bootstrap学习

来源：互联网发布：产品主数据编辑：程序博客网时间：2024/06/07 04:05

boostrap 3--------bootcss.com 是基于jquery的，需要下载引用jquery库文件

1）bootstrap.css

2) jquery.js jquery的版本需要匹配

3) bootstrap.js

一、bootstrap的全局样式：

HTML元素都可以通过class类设置样式并增强效果

标题：

h1: 36px;

h2: 30px;

h3: 24px;

h4: 18px;

h5: 14px;

h6: 12px;

class= h1

副标题：

small

文本:

段落：

p标签

在bootstrap中默认： 14px

行高：20px；

底部外边距： 10px;

对齐方式：

.text-left

.text-center

.text-right

文本的左中右的对齐

大小写：

.text-lowercase

.text-uppercase

.text-captialize 首字母大写

字体的大小写

表格：

带边框表格 .table-bordered

条纹状表格 .table-striped

悬停变色 .table-hover

紧凑风格 .table-condensed

设置颜色

active

success

info

warning

danger

表单：

普通的input 单纯一个长方体

input-lg 很大

input-sm 更小

form-control 带有圆角边框的，悬停时有颜色变化的长方体

form-group 代表一个组件 label 和input select textarea组成一个组件

有一个默认的底边距 15px

form-inline 一行显示

sr-only label的提示信息消失，不显示label的信息

control-label 改变label的颜色，

has-sucess form-group上结合该类，改变label的颜色，input边框的颜色

按钮

btn颜色

btn

btn-default

btn-primary

btn-success

btn-info

btn-warning

btn-danger

btn大小

btn-lg

btn-sm

btn-block全屏大小的效果

active 按下的效果

disabled="disabled" 禁用按钮的颜色也发生了改变

a 标签写上 btn的类，也可以显示为按钮的效果

图片

形状：

圆角 .img-rounded

圆形 .img-circle

带有边框的圆角图形 .img-thumbnail

辅助类：

文本颜色

背景颜色

状态设置

三角符号

二. bootstrap渐进：

开发响应式页面

利用栅格系统适配不同的硬件

栅格

图标

响应式

meta标签中的viewport

1. width height

2. user-scable initial-scale

3. maximum-scale minimum-scale

bootstrap中的响应式：

css3中通过媒体查询的方式实现响应式布局 @media only screen and (max-width: 900px) { ... }

bootstrap中可以通过栅格系统实现响应式布局 ------------实现原理与媒体查询是一样的；

------------分成12等份

------------对不同设备的屏幕尺寸做了几个类型分类：

lg > 1200 大屏设备

md >992 中屏设备

sm >768 小屏设备

xs <768 超小屏设备------手机类

<div class="test col-lg-3 col-md-4 col-sm-6 col-xs-12 col-lg-offset-3 col-md-offset-4" ---------其中 col-lg-3 指大屏时的宽度 col-lg-offset-3指大屏时的左边距

单位：

rem html {font-size: 62.5%;} -------根元素10px = 1rem; 其他元素比如 16px = 1.6rem即可

图标：

字体图标：

无论放大多少倍数都不失真，因为是基于字体不是基于图片的

引用字体图标：

@font-face {

font-family {......}

}

图标：

.xxx {

font-size:100px;

color:green;

}

三、bootstrap的组件：

data- 自定义属性-------不影响在页面上显示可以去管理一些数据传递数据交互的一些效果

下拉菜单：

.dropdown 控制组件为下拉

.dropdown-menu-right 代替 .pull-right 右对齐

divider 分割线

<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" > 通过data属性绑定事件属性，点击按钮才会有下拉选项出来。

这是按钮

</button>

</ul>

</div>

导航：

class .nav 无序列表开始

.nav-tabs 可切换的导航

.nav-pills 胶囊导航

.nav-justified 导航垂直的

<li class="active"> <a href="xxxx" > aaa</a></li> 默认选中

</ul>

nav-stacked 垂直显示的导航

分页：

.pagination 父元素中添加表示分页

.pager 放置在分页区域

.previous 把链接向左对齐

.next 把链接向右对齐

<nav >

</ul>

<ul class="pagination pagination-lg"> 分页变大

<li class="active"> <a href="xxxx" > aaa</a></li> 默认选中

</ul>

</nav>

进度条：

.progress 表示进度条

通过状态类改变进度条的颜色

.progress-bar-striped 使得进度条颜色渐变

60%

</div>

阅读全文

0 0