預設的 Bootstrap 網格系統（grid system）為 12 列，這會做出一個 940px 寬的容器，並且沒有 嚮應式特性。如果加入嚮應式 CSS 檔案，網格系統會自動依可視視窗的寬度從 724px 到 1170px 進行動態調整。可視視窗在低於 767px 寬度下，列會變成流動且垂直堆疊。
基礎網格的 HTML 一個簡易的兩列佈局，建立一個 .row 類別量，然在容器中加入適量的 .span* 的列。由於預設是 12 列的網格，所以 .span* 列網格量總合最多為 12（或者等於父容器的網格數）。
<div class="row">
<div class="span4">。。。</div>
<div class="span8">。。。</div>
</div>偏移列 offset*
把列向右移動使用 .offset* 類別。每個類別都會給列的左邊距（left margin）加增指定偏移的列數。例如，.offset1 將 .span3 右偏移 1 個列的寬度。
<div class="row">
<div class="span3 offset1">偏移列 </div>
<div class="span4 offset2">偏移列 把列向右移動使用 .offset* 類別。每個類別都會給列的左邊距（left margin）加增指定偏移的列數。例如，.offset2 將 .span4 右偏移 2 個列的寬度。</div>巢狀列
巢狀列 在預設的網格中，在已知的 .span* 內加入一個新的 .row 與 .span* 列，就能巢狀你的內容。巢狀行中的列總數最大數應該等於父列數。
<div class="row">
<div class="span9">Level 1 column。
<div class="row">
<div class="span6">Level 2</div>
<div class="span3">Level 2</div>
</div>
</div>
</div>固定布局
<body>
<div class="container">
...
</div>
</body>流動布局
<body>
<div class="container-fluid">
...
</div>
</body>
沒有留言 :
張貼留言