bootstrap3学习笔记

1.工具

bootstrap 可视化编辑器
bootstrap v3中文网
下载bootstrap 3.3.0

2. css

2-1 网格系统（.col-）

bootstrap最基本的有种排版方式，通过在一个标签中加入.col-xs-，.col-sm-，.col-md-或.col-lg-的类来实现响应式列布局，但是这些类必须包含在.container 类里面，这是必须包含的，然后，浏览器会通过媒体查询根据浏览器的不同宽带和设备类型决定是否换行，一行最多有12个单位的长度。

.col-md-2的意思是当具有该类的元素的屏幕最小宽带小于970px时，该元素的宽度就会编程100%并单独占一行。

多个嵌套的列子(当浏览器宽度大于970px的时候，每个div占4个单位长度，当浏览器宽度小雨970并大于768px，每个div占6个单位长度。并且xs比较特殊，小于最小宽度768px也不会单独占一行)

<div class="row">  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div></div>

2-1-1 偏移列（.col-md-offset-3）
可以设置一个列相对左侧的偏移量，取值范围是1-11。

2-1-2 嵌套列（.row）
可以给一个div加上.row类表示一行，这个div将占一行，如果在这个div里，0再加一个含.row类的div放在含.col-类的div里，那么这个row将会嵌套在里面

2-1-3 列排序(.col-md-push-， .col-md-pull-)
如果给一个.col-类加上.col-md-push-8表示向右推8个单位长度，.col-md-pull-4表示像左拉4个单位长度.

2-2 表单（role=”form”）

要使用表单的话，那么需要在标签中加入role=”form”，而不是直接加.form。不过可以继续加.form-inline或.form-horizontal说明表单是水平的还是竖着的。然后在里面的每个小的组件用.form-group就行了。

2-2-1 输入框（.form-control）
这个没什么特殊的，一个输入框而已，在一个input标签中加上.form-control后，字体要大些，要看好些，要注意的是input这样的标签不能加.col-xm-*这样的类。

2-2-2 文本框（.form-control）
在一个textarea 标签中加入.form-control后，会美观很多，可以通过rows=”3”属性修改

2-2-3 复选框（.checkbox）和单选框（.radio）
把input标签放在.checkbox或.radio标签中。如果type是checkbox或radio，那么这些复选框和单选框将会变多稍微美观一点点，主要变化是间距和字体，如果希望选框水平排列，那么使用.checkbox-inline或.radio-inline即可.

2-2-4 选择框（.form-control）
实现起来很简单，只需要在select标签中加.form-control就行了。其它不变，就可以很美观了。如果再加上multiple，那么这个选择框将是可多选的，用得应该比较少

2-2-5 静态控件(.form-control-static)
如果需要在一个表单的某个地方放一段文字替换控件，那么可以在那个地方，用一个p标签加上.form-control-static，就可以实现间距字体大小的统一了。

2-2-6 表单控件大小（.input-lg， .col-lg- ）
如果觉得一个表单控件的大小不合适，可以通过.input-lg或.input-sm设置控件的大小，可以通过col-lg-2或col-lg-3设置控件的宽度.

2-3 表格 （.table）

对于表格也很简单，在相应的标签中使用相应的类就可以了

2-3-1 表格主体（.table）
对于table标签，.table默认下划线，会好看很多。.table-bordered添加边框。.table-hover鼠标悬停状态。可以组合在一起，效果也是叠加的。

2-3-2 头部和数据（tr,th,td标签）
五个状态的颜色，其中后面四个是和其它标签通用的，通过.active（激活）,.success（成功）,.info（提示）,.warning（警告）,.danger（危险）

2-3-3 响应式表格（ .table-responsive）
如果对一个表格应用.table-responsive，那么这个表格将在屏幕宽度太小的时候出现水平滚动条，表格中的元素不会换行，前面不应用响应式表格，也会出行水平滚动条，但是会换行。

2-4. 按钮（.btn）

使用超级简单，在一个button标签中加入相应的类就行了。不同的类型效果可以叠加。

2-4-1 按钮颜色
在基类.btn中加入.btn-default，.btn-primary，.btn-success….就行了。

2-4-2 按钮大小
在基类.btn中加入.btn-lg，.btn-sm，.btn-xs…..就行了。

2-4-3 按钮状态
在基类.btn中加入.active,可以使用按钮处于激活状态，并且可以被点击。
在基类.btn中加入.disabled，可以使按钮处于禁用状态，这时点击是不管用的。

2-5. 图片（.img-）

使用方法非常简单，直接在img标签中加入想要的效果类就可以了

2-5-1 图片效果类
.img-rounded（圆角），.img-circle（圆形图片），.img-thumbnail（略缩图效果边框），.img-responsive（响应式图片，大小会变化）

2-6.辅助布局

2-6-1 文本（.text-）
主要通过相应的类修改字体的颜色

2-6-2 背景（.bg-）
通过相应的类修改背景颜色，感觉没什么卵用，直接手动写一行css代码就行了。

2-6-3 其他
通过相应的类来设置排版和布局，包括浮动，显示/隐藏，页面关闭按钮，下拉三角形

2-7.响应式实用工具（.visible-，.hidden-）

通过给相应的.visible-，.hidden-类，让指定元素在符合一定条件事才显示，应该比较重要，和前面的响应式布局有异曲同工之妙

3.组件

3-1. 字体图标（.glyphicon）

使用方法非常简单，需要先引入字体图标文件，然后通过i标签的class引用.glyphicon和.glyphicon-*就行了。

3-2.下拉菜单（.dropdown）

通过一个button和ul组合成一个下来菜单，加入相应的类关联起来就行了。

3-3.按钮组（.btn-group ）

把所有的button元素放在一个含.btn-group的div标签中，好久可以形成一个按钮组。

3-4.输入框组（.input-group）

使用方法非常简单，在一个div中加入.input-group，然后里面嵌套一个.input-group-addonde的span和一个一个input就可以了。这样看上午输入框和标签就是一个整体了。

3-5.导航元素（.nav）

其实就是ul+li的嵌套，加入相应的样式类就行。

3-5-1.样式类（.nav-）

.nav-tabs(标签效果)，.nav-pills(胶囊效果)，nav-stacked(垂直效果)，.nav-justified(两端对其)，.disabled(可在li中加入.disabled实现禁用效果)，
另外，还可以在li中加入ul嵌套，实现下来菜单的效果

3-6. 导航栏(.navbar)

这个很好玩儿，比前面那个功能更多些，而且有个响应式导航经常被用到，也比较好用，可以在导航栏嵌入一个表单，例如搜索框。

3-7.面包屑导航( .breadcrumb)

在一个列表中加入.breadcrumb就可以了。

3-8.分页

也是一个列表，加入相应的类就可以了。用列表的地方还真多。

3-8-1.默认分页（.pagination）
在一个列表中加入这个类就行了。这样会显示默认的分页

3-8-2.分页的状态
在一个分页的li标签中加入.disabled或.active类，则当前的li将会显示激活或禁用状态。

3-8-3.简单的分页
在一个分页的列表标签中使用.pager，可以使用简单的分页，如果里面的li标签还是使用.previous或.next,则li标签会自动左对齐或又对齐。

3-9.标签（.label）

在一个span标签中使用积累.label，然后加上想要的效果，这样这个标签将会有相应的颜色状态。

3-10. 微章（.badge）

在一个span标签中使用.badge，就会使标签中的元素形成一个圆角徽章，然后结合.pull-right和.pull-left就可以定位了。