Bootstrap 3 网格系统简介
发布时间：2020-12-17 21:14:49 所属栏目：安全 来源：网络整理
导读：在将近9个月的打磨之后,Bootstrap 3 来到了我们的面前. 它展示了一种新的思路来考虑响应式网格系统究竟应该如何运作,其最佳应用时机,以及如何处理样式化的元素的响应式断点.大约一个月以前,我决定立即跳上这艘大船来开始追随新的潮流,所以我使用它创作了一个
|
|
网格的基础组合
为了将网格系统组合到你的HTML中，我们需要有一些大的修改。这里有4个不同的网格类可以被应用到你的布局中。如果你之前没有用过这样的框架，或者你已经习惯了?Bootstrap v2，这是一个看待它的新方式。这里有4个列的类名前缀：
- col-xs-*
- col-sm-*
- col-md-*
- col-lg-*
至此， 在你恐慌和想到“我不得不像个笨蛋一样在前缀上一个个标数字吗？！”大概不会。大多数时候，这种样式中的各种大小都已经被定义好了,尤其是平板电脑和比较大的尺寸。只有当你对比较大的尺寸有特殊要求的时候才需要调整。
例子 1 – 等列宽
我尝试着尽可能的简单的解释一下：现在你有2个div。你希望每个div的宽度为容器总宽度的50%，
<div class="">I’m on the left</div> <div class="">I’m on the right</div>
之前，在使用 Bootstrap 2的时候，我们可以给每个div指定class为span6。这样在平板或者更大尺寸的设备上我们会看到按50%/50%分割的2列，然后在达到响应式临界点时都会变成100%宽的列。但在 Bootstrap 3中不是这样了，自从它成为了一个移动优先的框架，所有的列都被默认为100%的宽度，垂直堆叠，在这个的例子中，如果你还是希望2个div各占50%； 你首先要决定在哪一个 断点这样显示，如果你说“我只想让他们在桌面上按50%/50%显示，不关心平板或手机”，那你可以这样写：
<div class="col-md-6">I'm on the left</div> <div class="col-md-6">I'm on the right</div>
混合类
Bootstrap 2 可以用混合类来创建列布局，在v3中将会更多的用到混合类。你光用混合类就可以创建你得行和列布局，而且你可以不用在HTML中使用网格标签。下面是2个能创建网格系统的基本类：
- .make-row();
- .mae-xs/sm/md/lg-column();
你也可以在元素里使用混入类以达到你的目的。这里有个例子，一个是在单个div里从左至右创建行，一个是列：
<div class="left-and-right"> <div class="left">I'm on the left</div> <div class="right">I'm on the right</div> </div>这里我们没有用列类，所以这些div将是以块级别来显示。因为我们想要用网格，但又不能用任何标签，所以我们将用混合类来创建行和列，(当然是用Less了).如果上面的例子用HTML来创建的话将是如下的样子:
.left-and-right {
.make-row();
.left {
.make-md-column(6);
}
.right {
.make-md-column(6);
}
} 这样将会在HTML中添加col-md-6类属性。运用混合类，你就不用再HTML中包含任何标签了。