简述Bootstrap栅格布局方式

标签：

栅格系统用于通过行（row）和列（column）组合创建页面布局，内容可以放入创建好的布局中。

Bootstrap栅格系统的工作原理：

• “行（row）”必须包含在 .container中，以便为其赋予合适的排列（aligment）和内补（padding）通过    点container可以将界面放入浏览器的中间位置。
• 使用“行（row）”在水平方向创建一组“列（column）”。
• 你的内容应当放置于“列（column）”内，而且，只有“列（column）”可以作为行（row）”的直接子元素。
• 类似Predefined grid classes like .row and .col-xs-4 这些预定义的栅格class可以用来快速创建栅格布局。Bootstrap源码中定义的mixin也可以用来创建语义化的布局。
• 通过设置padding从而创建“列（column）”之间的间隔（gutter）。然后通过为第一和最后一样设置负值的margin从而抵消掉padding的影响。
• 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个.col-xs-4来创建。

根据不同的屏幕情况选择不同的前缀  小屏幕设备 (<768px)使用.col-xs- 格式大小  

                                                       小屏幕设备 平板 (≥768px)  .col-sm-

                                                       中等屏幕设备 桌面 (≥992px)   .col-md-                                                                                                    大屏幕设备 桌面 (≥1200px)   .col-lg-

12列式：每格60PX间距为20PX（最常用）一般为336或者363等等

16列式：每格40PX 间距为20PX

24列式：每格30PX 间距为20PX

32列式：每格20PX 间距为20PX

不同的内容使用相应的格式，在同样的列中使用不同的前缀效果不同大的相对小的是堆叠的而小的相对大的是平面的并排的如果在使用小屏幕的时候堆叠在一起了么可以使用超小屏幕来实现那么他就不会堆叠了

列偏移：使用.col-md-offset-大小 可以将列偏移到右侧。使用*选择器将所有列增加了列的左侧margin。

       例如 .A .col-md-offset-3  将A 向左侧偏移3格

同样在这里面也可以使用嵌套方式去完成不同的格式

简述Bootstrap栅格布局方式

标签：

原文地址：http://www.cnblogs.com/zacy110/p/5453294.html