對於 Web 開發來說，一個永遠的話題是如何創建一個跨瀏覽器兼容的布局。許多年來，各種框架使用各種技術來解決這個問題。Bootstrap 使用了一個不同的方式來解決這個問題。基於 960 像素的布局 http://960.gs，bootstrap 提供了更為簡單的語法，它還支持響應式布局，布局可以根據設備的不同尺寸進行調整，從桌面計算機到平板和手持設備。
以前版本的 bootstrap 在沒有使用響應式布局的時候，使用了 940px 布局使用 span* 和 offset* 布局。在使用響應式布局的時候，網格系統使用 724px 或者 1170px 的寬度。
如果希望使用百分比的布局，可以將容器的類從 .row 替換為 row-fluid。
3.0 版本對這一部分有比較大的變動，可以區分特小型設備 xs ( Extra small devices, 小於 768px 比如手機 ), 小型設備 sm ( Small devices, 小於 992px, 比如平板 )， 中型設備 md ( Medium devices, 小於 1200px, 比如桌面計算機), 大型設備 lg ( Large devices, 比如寬屏顯示器 )。
而 row-fluid 已經不存在了。
我們馬上就基於這個系統創建網站的頁面，首先，我們先熟悉 bootstrap 布局的基本特性。
開始
讓我們從示例中的 jumbotron 頁面開始。
在我們自己創建的 study 文件夾中創建名為 3 的文件夾。
1. 將這個文件夾中的兩個文件復制到 study 中的 3 文件夾中。
2. 在文本編輯器中打開 index.html 文件。
3. 將第 10 行的標題修改為
<title>Layout Playground | My Bootstrap site</title>
4. 找到第 71 行，將標題修改為
<h1>Layout Playground</h1>
5. 打開 index.html，你會看到如下的頁面
如何使用
1. 找到頁面的第 79 行，你會看到如下的內容
<div class="row"> <div class="col-lg-4"> <h2>Heading</h2> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn btn-default" href="#">View details »</a></p> </div> <div class="col-lg-4"> <h2>Heading</h2> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn btn-default" href="#">View details »</a></p> </div> <div class="col-lg-4"> <h2>Heading</h2> <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> <p><a class="btn btn-default" href="#">View details »</a></p> </div> </div>
2. 你會看到在 class=”row” 的 div 內部，嵌入了三個 class=”col-lg-4” 的 div。
3. 將第一個 class=”col-lg-4” 修改為 “col-lg-6”，將第二個和第三個修改為 “col-lg-3”
4. 保存之后，刷新瀏覽器，你會看到如下的頁面。
5. 我們在下面添加一個新的分欄。
<div class="row"> <div class="col-lg-2"> <h2>Heading</h2> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn btn-default" href="#">View details »</a></p> </div> <div class="col-lg-4"> <h2>Heading</h2> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn btn-default" href="#">View details »</a></p> </div> <div class="col-lg-6"> <h2>Heading</h2> <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> <p><a class="btn btn-default" href="#">View details »</a></p> </div> </div>
6. 保存之后的頁面
工作原理
Bootstrap 提供了一個 12 列的分欄系統，col-lg- 從 1 直到 12，col-lg-12 表示整個寬度，8 表示三分之二，6 表示一半，class=”row” 的 div 用來作為列的容器，每個行作為一個新的布局區域。詳細的說明見： http://getbootstrap.com/css/#grid
單獨使用 .col-md-* 的樣式，可以在移動設備或者平板設備上創建基本的網格，在小型設備上是堆棧式的，在中型設備上將是橫向的。
樣式的內容如下所示：
<div class="row"> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> </div> <div class="row"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div>
同時支持移動設備和桌面設備
同時使用 .col-xs-* .col-md-* 樣式可以取得更好的效果。
內容如下所示：
<!-- 移動設備整個寬度，其它一般寬度 --> <div class="row"> <div class="col-xs-12 col-md-8">.col-xs-12 col-md-8</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <!-- 移動設備 50% 寬度，其它 33.3% 寬度 --> <div class="row"> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <!-- 移動和桌面都是 50% --> <div class="row"> <div class="col-xs-6">.col-xs-6</div> <div class="col-xs-6">.col-xs-6</div> </div>
同時支持移動，平板和桌面
<div class="row"> <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div> <div class="col-xs-6 col-sm-6 col-md-4">.col-xs-6 .col-sm-6 .col-md-4</div> </div> <div class="row"> <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div> <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div> <!-- Optional: clear the XS cols if their content doesn't match in height --> <div class="clearfix visible-xs"></div> <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div> </div>
列定位
使用 .col-md-offset-* 可以進行列定位，比如 .col-md-offset-4 可以定位到第 4 個位置
<div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div> </div> <div class="row"> <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> </div> <div class="row"> <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div> </div>
列還可以嵌套
<div class="row"> <div class="col-md-9"> Level 1: .col-md-9 <div class="row"> <div class="col-md-6"> Level 2: .col-md-6 </div> <div class="col-md-6"> Level 2: .col-md-6 </div> </div> </div> </div>