# 響應式&柵格 響應式：為同一個頁面設計多種布局形態（區塊），根據不同的屏幕尺寸情況，調整這些區塊 的排版，從而實現不同屏幕尺寸的響應（適配）。 柵格：將頁面劃分為若干等寬的列（區塊），然后通過等寬列進行一定規則的組合，從而實現響 應式的頁面。 ### 柵格系統基本結構 container（包括 container-fluid ）、row、column必須保持特定的層級關系，柵格系統才可以正常工作（版心>行>列） > **重點：先有行，再有列** 舉例： ``` <div class="container"> <div class="row"> <div class="col-md-1"> </div> <div class="col-md-1"> </div> </div> </div> ``` ### 各種設備類型排列 ``` col-xs-[列數]：在超小屏幕下展示幾份 col-sm-[列數]：在小屏幕下展示幾份 col-md-[列數]：在中等屏幕下展示幾份 col-lg-[列數]：在大屏幕下展示幾份 __xs__ : 超小屏幕 手機 (<768px) __sm__ : 小屏幕 平板 (≥768px) __md__ : 中等屏幕 桌面顯示器 (≥992px) __lg__ : 大屏幕 大桌面顯示器 (≥1200px) ``` ### 柵格特點 多余列（column）的元素將作為一個整體單元被另起一行排列 **一行排不滿，自動向下排列。** **列偏移** 一個柵格向右邊偏移多少個列 .col-*\-offset-* 舉例： .col-md-offset-2 中等屏幕桌面電腦開始向右偏移2個列 **列嵌套**（了解） 如果要嵌套使用柵格，只需要在列（column）內直接續接行（row），然后再繼續接列（column） ，不再需要container。 **列嵌套這一列又被重新分成12列** **列順序** 使用 .col- \* -push- \* 和 .col- \* -pull-\* 類可以改變列（column）的順序（注意要結合使用） .col- \* -push- \* 往右推 .col- \* -pull-\* 往左拉 大于斷點值都生效