1.全局样式里面：
1.container:版心
2.col-xx-xx：栅格布局
3.btn btn-default： 按钮，默认按钮样式
4..pull-left pull-right clearfix: 左浮动 右浮动 清除浮动
5.响应式工具：visiable-xx: 在xx下隐藏
6.text-center;text-left;text-right：居中/靠左/靠右
2.CSS组件里面：
1.Glyphicons 字体图标(自定义字体图标)
2.nav-tabs:导航
3.nav-bar nav-default： 导航条
4.pagination： 分页
5.media： 媒体对象（默认样式是：在一个内容块的左边或者右边展示一个多媒体的内容[图像，视频，音频]）
6.panel： 面板(将某些DOM内容放到一个盒子里面)
3.javascript插件
1.tabs data-toggle="tab" : 标签页
2.carousel : 轮播图
3.collapse: 手风琴菜单
4.滚动监听:window.resize();
5.工具提示 tooltip
6.affix： 固定在顶部
以后下载的框架里面，我们要找的一般在dist文件夹里面（编译好的）。源码在less里面。
另外：
1.div:first-child: 是指div元素的父元素的第一个孩子，并不是指第一个div;(有误)，如果第一个不是div那么就选不中
2.div:nth-of-type(1): 只从div里面去找第一个元素;
3.div:first-of-type ： 是div这种类型的第一个元素;
4.手机端产品滑动：
1.监听屏幕变化 window.resize().
2.利用js，让轮播图里面的图片滑动的时候大小图的切换。先判断屏幕宽度的大小，当屏幕宽度>768px的时候，给轮播图里面的img设置大图片的路径，设置背景图片，就不需要图片标签了（赋值一个: ''）,代码： $item.css('background-image', 'url('+ imgSrc +')');；当屏幕宽度<=768px的时候，给li里面插入图片标签，此时，就不需要背景图片了（赋值一个: ''）; 代码：$item.html('
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触发一下。
$(function () {
$('[data-toggle="tooltip"]').tooltip();
});
7.事件定义完就触发一下 用trigger('resize');
其他：
一、栅格系统
1.栅格布局
表示：该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 类 为表格和其中的每个单元格增加边框。
例如：
4. 鼠标悬停： .table-hover 类可以让
中的每一行对鼠标悬停状态作出响应。(鼠标移入当前行，当前行高亮)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 类的 、