[TOC] # 栅格系统简介 **栅格的重点在于在排版上更好的进行适配，在不同的分辨率下能够显示显示不同的效果。将所有分辨率下的网页水平方向分成12列，那么在不同的分辨率下，水平方向显示不同的列数进而达到适配。**   **栅格系统运用媒体查询的原理，意义在于实现响应式设计。** # 响应式&栅格 响应式：为同一个页面设计多种布局形态（区块），根据不同的屏幕尺寸情况，调整这些区块 的排版，从而实现不同屏幕尺寸的响应（适配）。 栅格：将页面划分为若干等宽的列（区块），然后通过等宽列进行一定规则的组合，从而实现响 应式的页面。 ## 栅格系统基本结构 **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> ``` ### **各种设备类型排列** 平均分成12列，不同设备从堆叠到水平排列设置 >[success] 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-\* 往左拉 大于断点值都生效 ## 《相关案例》 栅格基础案例  列偏移/嵌套/顺序案例  栅格实现响应式案例