Bootstrap网格系统快速入门

Bootstrap是现在使用最广泛的前端框架。当涉及到构建响应网站和应用程序时,这是专业人士和业余爱好者的第一选择,因为它使用起来非常简单。任何人只要会一点HTML、CSS和JavaScript就可以学习Bootstrap。

在这个快速教程里边，我们要讲网格系统的一个基本概念，任何Bootstrap开发人员都需要掌握。它允许我们创建响应页面布局,通过用户设备的屏幕大小可以改变和适应。

1.行和栏（Rows & Columns）

网格由行和列组成。这允许我们自由的定位垂直和水平位置的元素。

rows是一个块级别的。这意味着,当我们创建一个行,它占据了整个元素的宽度。你可以认为在你的布局中，rows是一个新行。

水平对齐网格是通过列。列是所有行的子节点,所有的列内容都应该被包括进在里边。把内容直接在一行将打破布局。

注:行和列有一种特殊的关系。列有15 px左和右的padding,这样他们的内容正确地间隔开来。然而,这把第一列和最后一列的内容设置距离父节点15 px。为补偿他,行的左右两侧有-15px的margin。这就是为什么你应该把列放在行中的原因。

2. 行被拆分为12格

行横向划分为12个相等的部分。当我们将列放在一个行中时,我们必须指定具体会占用多少个数量。

这可以通过一个具体的类.col-md-NUMBER,那个NUMBER可以是整数从1到12。根据数量,列会占据一定比例的完整行宽度:6将占50%(12/6),3将占25%(12/3)等等。下面的示例表示得更清晰:

3. Column列

我们必须始终考虑,只有12个宽度的可用空间。如果我们通过计算几个相邻的列,他们所需的空间的结果超过12,在那一组的最后一列将不得不移到下一行。让我们看一个实际的例子:

前两列的大小分别为8和4(8 + 4 = 12),这使得第一行。第三单元没有足够的空间,所以它必须包装到下一行。

4. 不同屏幕大小的类别

还记得在步骤2中，我们写到  .col-md-NUMBER吗?这里的-md-代表媒体类别。Bootstrap有许多类不同的屏幕尺寸:

• xs – 代表的小屏幕，比如智能手机。 可以这样使用它 .col-xs-NUMBER

• sm – 小屏幕平板电脑等设备。 .col-sm-NUMBER

• md – 中等大小的屏幕,如低dpi台式机和笔记本电脑。  .col-md-NUMBER

• lg – 大而且高分辨率的屏幕。 .col-lg-NUMBER

Bootstrap需要通过屏幕分辨率和dpi决定使哪些classes处于活动状态。这是一个如何控制布局呈现在不同的设备上的强大的方法。

当我们为任何设备大小定义一个规则,这个规则将继承和适用于所有大的尺寸,除非我们通过提供一个新的覆盖它。

5. Clearfix清楚浮动

在某些情况下,当一个列有更多的内容和更大的高度之后的,布局将打破。列都堆积在彼此的上面,而没有移动到下一行。

为了防止这一点,我们添加一个div并加上clearfix的类名。它将迫使所有所有在它之后的列,搬到一个新行,来解决这个问题。

您可以使用Bootstrap的响应实用工具类来控制当前clearfix类的活跃状态。

6. Offsets 偏移也是很重要的

默认情况下,列坚持彼此没有留下任何空间的向左浮动。任何留在这行的多余的空间将保持在空的右边。

在列的左边去创造margins我们可以使用offset类。应用.col-md-offset-2类在任何列中将会使他向右移动,仿佛有一个无形的.col-md-2 列。你可以为不同的屏幕尺寸添加不同的offsets,通过xs,sm、md和lg前缀。

7. Push 和 Pull

“push”和“pull”类允许我们根据屏幕大小重新排序列。push 可以把列向右移动,同时pull可以拉到左边。这不同于offset,push和pull使用position:relative,不会使其他列发生移动。

push和pull类遵循后面这种格式: .col-SIZE-push-NUMBER, 和 .col-SIZE-pull-NUMBER. SIZE取后面这几个值(sm, xs, md 和 lg). 这代表在这4种不同屏幕大小的场景下，我们具体希望交换发生在哪种情况。NUMBER告诉Bootstrap我们想移动多少个位置。