BS一些类名

版心

<div class="container"></div> 

响应式布局类前缀

超小屏 <768px   类前缀  .col-xs-

小屏  >=768px   类前缀  .col-sm-

中屏  >=992px   类前缀  .col-md-

大屏>=1200px   类前缀  .col-lg-

吸顶实现原理

给window绑定scroll事件，当浏览器卷去指定的高度时，给对应的盒子添加固定定位，将该盒子固定在指定位置

模态框

给指定的标签台添加

data-toggle="modal"    data-target="#myModal"

success   表示成功的操作

info         表示信息变化的操作

warning    表示一个警告的操作

danger    表示一个危险的操作

水平表单

向<form>元素添加类名   form-horizontal

把标签和控件放在一个带有 form-group类名的div中

向标签添加control-lable

视口

视口的作用：在移动浏览器中，当页面宽度超出设备，浏览器内部虚拟的一个页面容器，将页面容器缩放到设备这么大，然后展示

目前大多数手机浏览器的视口（承载页面的容器）宽度都是980

user-scalable:是否允许用户自行缩放（值：yes/no; 1/0）

minimum-scale:最小缩放，一般设置了用户不允许缩放，就没必要设置最小和最大缩放

maximum-scale:最大缩放

表单

Bootstrap 提供了下列类型的表单布局：

                垂直表单（默认）

                内联表单

                水平表单

模态框

通过 data 属性：在控制器元素（比如按钮或者链接）上设置属性  data-toggle="modal"，同时设置  data-target="#identifier" 或  href="#identifier" 来指定要切换的特定的模态框（带有 id="identifier"）。

data-toggle="modal" data-target="#myModal"

多媒体对象

使用  .media-left  类让多媒体对象(图片)来实现左对齐，同样  .media-right  类实现了右对齐。

文本内容放在 class=" media-body " 的 div 中，图片左对齐则放在 class=" media-body " 之前，图片右对齐则放在 class=" media-body " 之后。

此外，你还可以使用  .media-heading  类来设置标题。（在放文本内容的div中）