基礎項 柵格布局

<

div 
class=
"row col-xs-4"
>
<
button 
class=
"btn btn-block btn-info"
>info
button
>
div>

格網布局由行（row）和列（column）構成。

使用容器包裹柵格系統:container,container-fluid

槽寬:每列左右都有15px

col-xs   超小螢幕手機(<768px)          最大列寬:自動 

col-sm   小螢幕平板(>=768px)           最大列寬:62px 
col-md   中等螢幕桌面顯示器(>=992px)    最大列寬:81px 
col-lg   大螢幕桌面顯示器(>=1200px)     最大列寬:97px

<

div 
class=
"row"
>
<
div 
class=
"col-sm-4"
>
div>
<
div 
class=
"col-sm-4 col-sm-offset-4"
>
div>
div>

這些類實際是通過使用 * 選擇器為當前元素增加了左側的邊距（margin）。

例如，.col-md-offset-4 類將 .col-md-4 元素向右側偏移了4個列（column）的寬度。

<

div 
class=
"row"
>
<
div 
class=
"col-md-9 col-md-push-3"
>.col-md-9 .col-md-push-3
div>
<
div 
class=
"col-md-3 col-md-pull-9"
>.col-md-3 .col-md-pull-9
div>
div>

col-md-pull-9的意思為讓此類向前推9列;

Bootstrap的柵格系統 基礎布局

行必須包含在.container或.container fluid裡面，前者是固定布局，後者是100 寬度布局。行的類是.row，通過行在水平方向建立一組列。內容應該放在 列 裡，並且只有列可以作為行的直接子元素。如果一行包含的列多餘12，多餘的列所在的元素就會另起一行排列。bootstrap的柵格...

2 柵格布局

字進行頁面開發,最頭疼的問題在於 頁面寫完了,發現換個瀏覽器不支援了 顯示風格瞬間改變 如果要真想實現柵格,那麼就必須有乙個可以容納第乙個柵格的行,而多個柵格行最終就組成了乙個頁面.在整個bootstrap之中最多隻能夠存在有12個柵格 如果現在是乙個寬容器的視窗,那麼整個柵格都會按照寬螢幕的方式完...

Bootstrap柵格布局

bootstrap 提供了一套響應式 移動裝置優先的流式柵格系統，隨著螢幕或視口 viewport 尺寸的增加，系統會自動分為最多12列。它包含了易於使用的預定義類，還有強大的mixin 用於生成更具語義的布局。柵格系統用於通過一系列的行 row 與列 column 的組合來建立頁面布局，你的內容就...