1. In the global style:
1.container: version heart
2.col-xx-xx: grid layout
3.btn btn-default: button, the default button style
4..pull-left pull-right clearfix: left-float, right-float, clear-fix
5. Responsive tools: visible-xx: hidden under xx
6.text-center;text-left;text-right: center/left/right
2. Inside the CSS component:
1. Glyphicons font icon (custom font icon)
2.nav-tabs: Navigation
3.nav-bar nav-default: navigation bar
4.pagination: pagination
5.media: media object (default style is: display a multimedia content [image, video, audio] on the left or right of a content block)
6.panel: Panel (put some DOM content inside a box)
3. javascript plugin
1.tabs data-toggle="tab" : tab page
2.carousel : carousel
3.collapse: accordion menu
4. Scroll listener: window.resize();
5. Tooltip tooltip
6.affix: fixed on top
In the framework downloaded in the future, what we are looking for is generally in the dist folder (compiled). The source code is in less.
in addition:
1.div:first-child: refers to the first child of the parent element of the div element, not the first div; (wrong), if the first one is not a div, it will not be selected
2.div:nth-of-type(1): only find the first element from the div;
3.div:first-of-type: is the first element of this type of div;
4. Mobile phone product sliding:
1. Monitor screen changes window.resize().
2.利用js，让轮播图里面的图片滑动的时候大小图的切换。先判断屏幕宽度的大小，当屏幕宽度>768px的时候，给轮播图里面的img设置大图片的路径，设置背景图片，就不需要图片标签了（赋值一个: ''）,代码： $item.css('background-image', 'url('+ imgSrc +')');；当屏幕宽度<=768px的时候，给li里面插入图片标签，此时，就不需要背景图片了（赋值一个: ''）; 代码：$item.html('<img src="'+ imgSrc +'" alt="" );
3.利用js，给轮播图添加在手机端的滑动效果（touchstart）。给#slide添加滑动事件（用addeventListener）,判断滑动的方向，从左往右滑动，调用.carousel('prev');从右往左，调用.carousel('next');
4.利用自定义属性 data-large-image存储大图片的路径， data-small-image 存储小图片的路径。然后在js中，再利用jQuery获取到这个自定义属性，设置到item上。那么如何获取？？？
用：data函数来获取。var imgSrc = $item.data('large-image').
5.在产品推荐的nav-tabs里面，想让ul在手机端或者屏幕变小的时候出现横向滚动条，那么我们给ul外层设置一个div（ul-wraper）设置overflow-x:scroll，通过监听屏幕宽度的大小的变化和利用媒查询来判断屏幕宽度，这样，当里面的宽度超出父亲的宽度，就出现横向滚动条了。但是在此时，我们一般要利用js来计算一下产品推荐里面的总宽度（里面所有li的宽度之和），首先获取到里面所有的li的宽度，然后把这些li的宽度都加起来。
代码：// 计算产品推荐里面的盒子的总宽度
var tabs = $('#products .nav-tabs');
// ul 下面的 li们
var lis = $('#products .nav-tabs > li');
// 开始的宽度设置为0
var width = 0;
// 遍历lis，
lis.each(function(index, el) {
width += $(el).width();
});
tabs.css('width', width);
5.特殊类名：
.pull-left:左浮动
.pull-right:右浮动
.col-md-4:在中屏幕下占4份; .col-sm-6:在小屏幕下占6份;
.col-md-offset-4:是指将 .col-md-4的元素向右侧偏移4个列（column）的宽度。
.visible-xs-*:在超小屏幕下可见 <768px 手机
.visible-sm-*:在小屏幕下可见 >=768px 平板
.visible-md-*:在中屏幕下可见 >=992px 桌面
.visible-lg-*:在大屏幕下可见 >=1200px 桌面
.hidden-xs-*:在超小屏幕下隐藏 <768px 手机
.hidden-sm-*:在小屏幕下隐藏 >=768px 平板
.hidden-md-*:在中屏幕下隐藏 >=992px 桌面
.hidden-lg-*:在大屏幕下隐藏 >=1200px 桌面
6.使用工具提示（tooltip.js），一定要用js触发一下。
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on top</button>
$(function () {
$('[data-toggle="tooltip"]').tooltip();
});
7.事件定义完就触发一下 用trigger('resize');
其他：
一、栅格系统
1.栅格布局
<div class="col-md-8 col-xs-6 col-lg-4"></div>
表示：该DIV在中等屏幕中占有‘8/12’，在手机中占有‘6/12’，在大屏幕中占有屏幕比例的‘4/12’。
- 布局容器：页面的内容滑入栅格系统都包含在这里面。可以添加一下两种类。二者不能嵌套。
.container 类用于固定宽度并支持响应式布局的容器。
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
二、表格：
1. 表格基本实例：给任意table标签添加 .table 类可以生成表格的最基本的样式。（含有少量的padding和水平方向的分割线）
2. 条纹状表格： .table-striped 类可以给tbody内的每一行增加斑马条纹样式。（类似于隔行高亮）, 但是这个有兼容性，条纹表格是以来css3选择器:nth-child来实现的，IE8 不支持.
3. 让表格增加边框： .table-bordered 类 为表格和其中的每个单元格增加边框。
例如：<table class="table table-bordered">里面是表格的内容</table>
4. 鼠标悬停： .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。(鼠标移入当前行，当前行高亮)
5. 紧缩表格： .table-condensed : （表格的padding减半）
6.状态类：（给行或者单元格设置颜色）
7.响应式表格： 将.table 元素包裹在 .table-responsive 元素内，可以创建响应式表格。在小屏幕设备上（<768px）水平滚动，大于768px时候，水平滚动条消失。
Firefox 浏览器对 fieldset 元素设置了一些影响 width 属性的样式，导致响应式表格出现问题。除非使用我们下面提供的针对 Firefox 的 hack 代码，否则无解：
火狐的兼容处理办法：
@-moz-document url-prefix() {
fieldset { display: table-cell;
}}
三．表单
1.基本实例
单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。
例如：
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
</form>
2.内联表单：为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。需要手动设置宽度
注意：在 Bootstrap 中，输入框和单选/多选框控件默认被设置为 width: 100%; 宽度。在内联表单，我们将这些元素的宽度设置为 width: auto;，因此，多个控件可以排列在同一行。根据你的布局需求，可能需要一些额外的定制化组件。
一定要添加 label 标签
如果你没有为每个输入控件设置 label 标签，屏幕阅读器将无法正确识别。对于这些内联表单，你可以通过为label 设置 .sr-only 类将其隐藏。
3.水平排列表单： .form-horizontal并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了。
效果：
4.内联单选和多选框： 通过将 .checkbox-inline 或 .radio-inline 类应用到一系列的多选框（checkbox）或单选框（radio）控件上，可以使这些控件排列在一行。
5.下拉列表（select）
使用默认选项或添加 multiple 属性可以同时显示多个选项。
6.静态控件： 如果需要在表单中将一行纯文本和 label 元素放置于同一行，为 <p> 元素添加 .form-control-static 类即可。
实例：
代码：
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<p class="form-control-static">[email protected]</p>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
</form>
7.禁用输入框： disabled：
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
8.被禁用的 fieldset
为<fieldset> 设置 disabled 属性,可以禁用 <fieldset> 中包含的所有控件。
例如：
<form role="form">
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="form-group">
<label for="disabledSelect">Disabled select menu</label>
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Can't check this
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset></form>
9.只读输入框 ：为输入框设置readyonly属性，禁止用户输入
10.控件尺寸： .input-lg 设置控件的高度，通过.col-lg-*为控件设置宽度、
11.水平排列的表单组的尺寸：通过添加 .form-group-lg 或 .form-group-sm 类，为 .form-horizontal 包裹的 label 元素和表单控件快速设置尺寸。
四、按钮
1.预定义样式
代码：
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>
.btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。
2.尺寸 使用 .btn-lg、.btn-sm 或 .btn-xs 可以获得不同尺寸的按钮。
让按钮处于激活状态（底色更深、边框颜色更深，向内投射阴影），对于 <button> 元素，是通过 :active 状态实现的。对于 <a> 元素，是通过 .active 类实现的。然而，你还可以将 .active 应用到 <button>上，并通过编程的方式使其处于激活状态。
<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>
3.禁用状态
A 给按钮背景设置opacity属性，呈现无法点击的效果。
B 为button元素添加disabled属性，表示禁用
五、图片
1.响应式图片 给图片设置 .img-responsive 类名。
2.图片形状 给img标签添加相应的类，让图片呈现不同的形状。（.img-rounded; .img-circle; .img-thumbnail）
六、关闭按钮：让模态框和警告框消失
七．响应式工具
1.可用的类