如何使用BootStrap樣式
BootStrap與其他的開源庫類似，直接引用它的css樣式文件就可以使用了。
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
在代碼中，直接使用class就可以使用其定義的樣式，例如使用它button樣式，就可以按照下面的方式：
<button class="btn btn-primary" type="button">Reset</button>
什么是網格布局
目前流行的響應式布局，在顯示界面設定了集中寬度，當寬度滿足一定的標准時，就是用當前寬度支持下的樣式。
這樣就可以使一種開發，支持移動端、以及各種分辨率的顯示器，達到良好的使用效果。
BootStrap把網頁分成12個網格，並有下面四中寬度：自動、750px、970px和1170px
當屏幕屬於其中某個區間時，自動使用對應的樣式。
使用的基本語法，類似下面：container---->row---->column
<div class="container"> <div class="row"></div> </div>
提供個簡單的樣例：
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>基本用法</title> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> </head> <body> <div class="container"> <div class="row"> <button class="btn btn-primary col-md-4" type="button">test</button> <button class="btn btn-primary col-md-8" type="button">test</button> </div> <div class="row"> <button class="btn btn-info col-md-4" type="button">test</button> <button class="btn btn-info col-md-4" type="button">test</button> <button class="btn btn-info col-md-4" type="button">test</button> </div> <div class="row"> <button class="btn btn-primary col-md-3" type="button">test</button> <button class="btn btn-primary col-md-6" type="button">test</button> <button class="btn btn-primary col-md-3" type="button">test</button> </div> </div> </body> </html>
主要要滿足網格數目不超過12個，超過的部分會自動擠到下一列！
樣式運行效果分別如下：
最大的寬度下：
中等寬度下：
最小寬度下：
網格列偏移
BootStrap中支持網格的列偏移：直接在樣式中col-md-offset-*就可以達到偏移效果。
例如下面的代碼：
<div class="container"> <div class="row"> <button class="btn btn-primary col-md-4" type="button">test</button> <button class="btn btn-primary col-md-4 col-md-offset-4" type="button">test</button> </div> <div class="row"> <button class="btn btn-info col-md-4" type="button">test</button> <button class="btn btn-info col-md-4" type="button">test</button> <button class="btn btn-info col-md-4" type="button">test</button> </div> </div>
第一行的第二個button就達到了列偏移4個網格的效果：
網格嵌套
在BootStrap中也支持網格的嵌套，同樣也需要嵌套中的網格滿足12格的划分原則
<div class="container"> <div class="row"> <button class="btn btn-primary col-md-4" type="button">test</button> <div class="col-md-8"> <div class="row"> <button class="btn btn-info col-md-4" type="button">test</button> <button class="btn btn-info col-md-4" type="button">test</button> <button class="btn btn-info col-md-4" type="button">test</button> </div> </div> </div> <div class="row"> <button class="btn btn-info col-md-4" type="button">test</button> <button class="btn btn-info col-md-4" type="button">test</button> <button class="btn btn-info col-md-4" type="button">test</button> </div> </div>
效果如下：