# 响应式&栅格 响应式：为同一个页面设计多种布局形态（区块），根据不同的屏幕尺寸情况，调整这些区块 的排版，从而实现不同屏幕尺寸的响应（适配）。 栅格：将页面划分为若干等宽的列（区块），然后通过等宽列进行一定规则的组合，从而实现响 应式的页面。 ### 栅格系统基本结构 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-\* 往左拉 大于断点值都生效