基礎項 柵格布局

2021-08-20 04:07:29 字數 1286 閱讀 8487

<


div 


class=


"row col-xs-4"


>


<


button 


class=


"btn btn-block btn-info"


>info


button


>


div>
以上**表示 在這一行(row)中做12列格網布局，其中他佔4分大小-->

格網布局由行（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>
使用 .col-sm-offset-*類可以將列向右側偏移。

這些類實際是通過使用 * 選擇器為當前元素增加了左側的邊距（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-push-3的意思為讓此類向後推3列;

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

Bootstrap的柵格系統 基礎布局

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

2 柵格布局

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

Bootstrap柵格布局

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