1、BootStrap指定的四种屏幕尺寸：

 ①超大PC屏幕——lg（large）：w>=1200px；

 ②中等PC屏幕——md（medium）：1200px>w>=992px；

 ③Pad屏幕——sm（small）：992px>w>=768px；

 ④Phone屏幕——xs(extra small)：768px>w；

2、BootStrap中的两种容器：

 ①定宽容器：.container——1170px(lg)、970px(md)、750px(sm)、100%(xs)；

 ②变宽容器：.container——100%；

 ③两种容器都有:before和:after，可以清除子元素的margin和float造成的影响；

3、全局CSS样式——表格：

 .table——基础表格；

 .table-bordered——带边框的表格；

 .table-striped——隔行变色的表格；

 .table-hover——带鼠标悬停效果的表格；

 .table-responsive——响应式表格，必须使用在table的父元素div上；

4、全局CSS样式——栅格布局系统：

 ①最外层必须是容器类：.container或.container-fluid；

 ②容器中放置行：.row；

 ③行中放置列：.col；

 ④针对不同的屏幕使用不同的列：

  .col-lg-*：适用于超大PC屏幕；

  .col-md-*：适用于中等PC屏幕；

  .col-sm-*：适用于Pad屏幕；

  .col-xs-*：适用于Phone屏幕；

  一个div可以同时声明多个不同屏幕下的列宽：

   <div class="col-lg-* col-md-* col-sm-* col-xs-*">

 ⑤一行均分为12份，每个列都需要指定自己所占的份数：

  <div class="col-lg-2 col-md-6 col-sm-8 col-xs-12">

 ⑥每个列都可以指定向右的偏移量：，可以实现右错位的效果：

  <div class=".col-lg/md/sm/xs-offset-1/2/3/4/...">

 ⑦不同的列在不同的屏幕下有不同的适用性：

  .col-lg-*：只适用于LG屏幕；

  .col-md-*：适用于MD/LG屏幕；

  .col-sm-*：适用于SM/MD/LG屏幕；

  .col-xs-*：适用于XS/SM/MD/LG屏幕；

  列的偏移适用同样的规则，对当前屏幕以及更大屏幕有效；

 ⑧可以指定某列在特定尺寸的屏幕下隐藏：

  .hidden-lg/md/sm/xs；

  隐藏只对当前指定的屏幕有效；

 ⑨栅格系统可以嵌套：

  <div class="container">

   <div class="row">

    <div class="col-xs-6">

     <div class="row">

      <div class="col-xs-6"></div>

     </div>

    </div>

   </div>

   </div>

5、全局CSS样式——表单：

 ①HTML5标准对表单相关的推荐写法：

  button必须指定type；

  输入组件必须有对应的label——为无障碍阅读准备：

   <label for="xx">example</label>

   <input id="xx">

   <label>

    <input type="radio/checkbox">example

   </label>

 ②BootStrap提供的默认表单：

  <form>

   <div class="form-group">

    <label></label>

    <input class="form-control">

    <span class="help-block"></span>

   </div>

  </form>

 ③BootStrap提供的行内表单：

  <form class="form-inline">

   <div class="form-group">

    <label class="sr-only"></label>

    <input class="form-control">

   </div>

  </form>

 ④BootStrap提供的水平表单：

  <form class="form-horizontal">

   <div class="form-group">

    <div class="col-*-*">

     <label class="control-label"></label>

    </div>

    <div class="col-*-*">

     <label class="form-control"></label>

    </div>

   </div>

  </form>

6、BootStrap组件——图标字体：

 ①图标字体是字体，可以无限缩放、修改文本颜色、背景颜色、阴影...，显示的内容却是图形图标；

 ②图标字体在Web项目中都是作为服务器端字体来使用——当客户端访问页面时，即时从服务器下载必须的图标字体：

  @font-face{

   font-family:"Glyphicons Halflings";

   src:url("../fonts/glyphicons-halflings-regular.eot");

  }

  .glyphicon{

   position:relative;

   top:1px;

   display:inline-block;

   font-family:"Glyphicons Halflings";

  }

 ③使用：

  <span class="glyphicon glyphicon-*"></span>

  * span中不能含有任何文本或子标签；