柵格布局：
container，固定寬度的容器。
container-fluid，百分百寬度的容器。
使用行（row）在水平方向上創建一組列（colmun）。
每一行中最多能夠包含12列，超出的列則另起一行排列
你的內容應該放置到列（colmun）中，只有列（colmun）可以作為行（row）的直接子元素。
列偏移：
使用col-*-offset-*類可以將列向右偏移。
例如，col-xs-offset-4表示在超小屏幕上時，將元素向右偏移4列。
div class="container"> <div class="row"> <div class="col-xs-4"><div class="box">1</div></div> <div class="col-xs-4 col-xs-offset-4"><div class="box">2</div></div> </div> <div class="row"> <div class="col-xs-3 col-xs-offset-3"><div class="box">1</div></div> <div class="col-xs-3 col-xs-offset-3"><div class="box">2</div></div> </div> <div class="row"> <div class="col-xs-6 col-sm-4"><div class="box">1</div></div> <div class="col-xs-6 col-sm-4"><div class="box">2</div></div> <div class="col-xs-6 col-sm-4 col-xs-offset-3 col-sm-offset-0"><div class="box">3</div></div> </div> </div>
嵌套列：
通過在列中嵌套行（row），可以將原有的列再分成12列，如此就實現了列的嵌套。
<div class="container"> <div class="row"> <div class="col-xs-6"> <div class="row"> <div class="col-xs-4"> <div class="box">1</div> </div> <div class="col-xs-4"> <div class="box">2</div> </div> <div class="col-xs-4"> <div class="box">3</div> </div> </div> </div> </div> </div>
列排序：
使用col-*-push-* 將列向右推，col-*-pull-*將列向左拉。例如下面的代碼將box1向右推了6列，將box3向左拉了6列，結果是它們調換了位置。
<div class="container"> <div class="row"> <div class="col-xs-3 col-xs-push-6"><div class="box">box1</div></div> <div class="col-xs-3"><div class="box">box2</div></div> <div class="col-xs-3 col-xs-pull-6"><div class="box">box3</div></div> <div class="col-xs-3"><div class="box">box4</div></div> </div> </div>
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
表格：
.table 必須的基類
.table-bordered 帶邊框的表格
.table-striped 帶條紋的表格（隔行變色）
.table-hover 鼠標懸浮時為整行添加背景色
.table-condensted 緊湊的表格（減少了單元格padding）
響應式的表格：
當屏幕寬度不足以顯示所有的表格內容時，表格內容會出現折疊甚至溢出的現象。為了解決這個問題，我們可以將.table元素放到一個具有.table-responsive類的元素內容。
-------------------------------------------------------------------------------------------------------------------
按鈕：
我們可以使用以下幾種標簽表示按鈕：
<a href="" class="btn btn-default">Link</a> <button class="btn btn-primary">Button</button> <input type="button" class="btn btn-success" value="登錄"> <input type="submit" class="btn btn-danger" value="刪除">
預定義樣式：
<a href="" class="btn btn-default">default</a> <a href="" class="btn btn-primary">primary</a> <a href="" class="btn btn-success">success</a> <a href="" class="btn btn-danger">danger</a> <a href="" class="btn btn-warning">warning</a> <a href="" class="btn btn-info">info</a> <a href="" class="btn btn-link">link</a>
按鈕的尺寸：
按鈕的尺寸被分成，.btn-lg、.btn-sm、默認尺寸、.btn-xs
<a href="" class="btn btn-default btn-lg">btn-lg</a> <a href="" class="btn btn-primary">默認尺寸</a> <a href="" class="btn btn-success btn-sm">btn-sm</a> <a href="" class="btn btn-danger btn-xs">btn-xs</a>
塊級按鈕：
塊級按鈕在移動設備上比較常見，它的寬度會充滿整個父元素。
<a href="" class="btn btn-success btn-sm btn-block">提交</a>
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
圖片：
響應式圖片：
通過為img標簽添加 .img-responsive 類名，就可以讓圖片自動根據父元素的寬度進行縮放。
<div class="container"> <div class="row"> <div class="col-xs-12 col-sm-6 col-md-3"> <img src="./images/banner-1.jpg" alt="" class="img-responsive"> </div> <div class="col-xs-12 col-sm-6 col-md-3"> <img src="./images/banner-2.jpg" alt="" class="img-responsive"> </div> <div class="col-xs-12 col-sm-6 col-md-3"> <img src="./images/banner-3.jpg" alt="" class="img-responsive"> </div> <div class="col-xs-12 col-sm-6 col-md-3"> <img src="./images/banner-4.jpg" alt="" class="img-responsive"> </div> </div> </div>
圖片形狀：
.img-rounded 圓角的圖片
.img-circle 圓形圖片
.img-thumbnail 縮略圖
<div class="row"> <div class="col-xs-12 col-sm-4"> <img src="./images/banner-1.jpg" alt="" class="img-responsive img-rounded"> </div> <div class="col-xs-12 col-sm-4"> <img src="./images/banner-2.jpg" alt="" class="img-responsive img-circle"> </div> <div class="col-xs-12 col-sm-4 "> <img src="./images/banner-3.jpg" alt="" class="img-responsive img-thumbnail"> </div> </div>
