bootstrap的栅格系统

bootstrap中的栅格系统

简介

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：

“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。 通过“行（row）”在水平方向创建一组“列（column）”。 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。 类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。 通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。 负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-lg-* 不存在， 也影响大屏幕设备。 通过研究后面的实例，可以将这些原理应用到你的代码中。

什么是栅格系统？

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。

栅格参数

1.如果你的内容想在手机上显示那么你就可以调用.col-xs-。

2.如果你的内容想在平板上显示那么你就可以调用.col-sm-。

3.如果你的内容想在pc上显示那么你就可以调用.col-md-。

使用规则

列：

2.在行(.row)中可以添加列(.col)，但列数之和不能超过平分的总列数12。

例：

3.具体内容应当放置在列容器（col）之内，而且只有列（col）才可以作为行容器(.row)的直接子元素。

4.通过设置内距（padding）从而创建列与列之间的间距。然后通过为第一列和最后一列设置负值的外（margin）来抵消内距(padding)的影响。

实例

创建一个12栅格系统：

注意：将 .container 修改为 .container-fluid，就可以将固定宽度改变成100%宽度。（.container：居中效果，两边会有一个默认为15px的margin边距。.container-fluid：铺满。）

列偏移

使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 1 元素向右侧偏移了4个列（column）的宽度。

嵌套列

为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。被嵌套的行（row）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列）。

列排序

通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。

总结

通过设置多种col，可以达到在不同尺寸的屏幕上显示不同内容的效果。

栅格系统的原理其实就是css3中的媒体查询。

这篇好文章是转载于：学新通技术网