1、BootStrap指定的四種屏幕尺寸： ①超大PC屏幕——lg（large）：w>=1200px； ②中等PC屏幕——md（medium）：1200px>w>=992px； ③Pad屏幕——sm（small）：992px>w>=768px； ④Phone屏幕——xs(extra small)：7 ...
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中不能含有任何文本或子標簽；
