我的BootStrap学习笔记
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('<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@example.com</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.可用的类
