Bootstrap 3 网格系统简介 【已翻译100%】
在将近9个月的打磨之后, Bootstrap 3 来到了我们的面前. 它展示了一种新的思路来考虑响应式网格系统究竟应该如何运作, 其最佳应用时机, 以及如何处理样式化的元素的响应式断点.大约一个月以前, 我决定立即跳上这艘大船来开始追随新的潮流, 所以我使用它创作了一个新的博客主题(就是你现在看见的这个)并且学到了相当多的东西, 超出了我的预想. 这也是本文着力探讨的问题, 即分享一些我的使用感受和经验.
Bootstrap 2 的网格系统十分的直观, 如果你过去使用的是固定宽度的容器, 那么存在标准, 大尺寸, 平板以及移动版这些可选尺寸. 基准样式均基于"桌面"环境的尺寸来进行构建, 移动版样式则通过随后的响应式样式表来进行应用. 相较于 V3, 它在开箱即用的这种便利性上做得十分的有限.
Bootstrap 3 重点宣扬的一点就是移动优先, 过去一年中存在着一些针对移动优先思想的设计运动, 就是说你应优先使用移动视角来考虑一些概念以及用户体验, 你的交互设计, 线框图, 原型等均基于移动体验来进行初始化的设计. Bootstrap 3 采纳了该理念并将整个框架构建于该理念之上, 即你应该默认通过移动视角来创建基础CSS样式和html结构代码.
非常好。如果我从没有这样干过，这意味着什么 ? 很好， 让我们跳到一个简单的小例子。假设现在有一个h1标签摆放在你网站的顶端。你在你的浏览器中设计好并稍微检查了一下 —— 看起来棒极了。然后你把浏览器拉成一个手机屏幕的大小， 你就会发现这个字体有点太大了！ 让我们在以移动为优先之后好好思考下： Bootstrap 认为你放在h1标签上的样式对移动设备的宽度是合适的。 所以说如果你在桌面大小上给你的字体设置大小、填充、边缘什么的话，那么在移动设备的宽度下会变的相当不同。
这里有这么一个例子：
h1 {
font-size: 40px;
margin-bottom: 20px;
margin-left: 20px;
}
如果你想在桌面上看他，一个40px字体大小是个不错的主意。 但如果放在移动设备的大小上，这就显得有些太大了。 你非得用一个移动CSS框架来做这件事吗？ 就像这样：
h1 {
font-size: 22px;
margin: bottom 10px;
@media min-width(@screen-tablet) {
font-size: 40px;
margin-bottom: 20px;
margin-left: 20px;
}
}
看看，简约风格就是移动风格。 任何你想在大尺寸中改变的东西都被封装在了这个@screen-table媒体查询中。我们字体的默认大小是22px， 但是在桌面上时就变成了40px。而且你可以看到在基本样式中我并不需要一个margin-left， 但是我在@screen-tablet中放了一个, 所以他只会在超过了最小宽度的时候被应用。
为了将网格系统组合到你的HTML中，我们需要有一些大的修改。这里有4个不同的网格类可以被应用到你的布局中。如果你之前没有用过这样的框架，或者你已经习惯了 Bootstrap v2，这是一个看待它的新方式。这里有4个列的类名前缀：
- col-xs-*
- col-sm-*
- col-md-*
- col-lg-*
至此， 在你恐慌和想到“我不得不像个笨蛋一样在前缀上一个个标数字吗？！”大概不会。大多数时候，这种样式中的各种大小都已经被定义好了, 尤其是平板电脑和比较大的尺寸。只有当你对比较大的尺寸有特殊要求的时候才需要调整。
- 相对于同时保有一个"桌面优先"的基础样式表和一个纯移动版的样式表的旧式做法来说, 这种方式更佳.
- 一旦你习惯了这种方式, 其灵活性以及功能将会弥补存在的疑问或不足.
新方式实行的前提是网格系统是由视口尺寸经由媒体查询来控制的, 一旦浏览器宽度变大, 不同的列的class将会重写之前的. 所以按手机宽度来说,“xs (极小尺寸)”列的class就会被激活. 但是如果你将浏览器宽度拉伸, “lg (大尺寸)”的列就会激活并重写更小的尺寸. 如果你感到不解的话, 请坚持阅读下去. 这是一个全新的 Bootstrap 范式, 较之 Bootstrap 2 的弹性(橡皮筋)处理方式, 现在 v3 可以让你在每个断点处实行增量控制.
很有用对吧? 不? 不明白是咋回事? 那我们继续往下看吧!
我尝试着尽可能的简单的解释一下：现在你有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>
<div class="col-xs-6">I’m on the left</div>
<div class="col-xs-6">I’m on the right</div>
基本上，这就是”保持在一个6列的宽度，并向下适合于手机的尺寸，而永不切换到堆栈式的移动布局中“。这意味着，在一个手机上，由于你是用了特定的col－xs－6类，所以它将仍然是一个50％对50％的列宽。从另一个方向来看，如果你想要同样的div保持于50％对50％的列宽，而作用于最大宽度的临界相应点上，而仅在此点上有效。这同样简单：
<div class="col-lg-6">I’m on the left</div>
<div class="col-lg-6">I’m on the right</div>
这就是告诉它，仅应用”6列宽度“在较大或者更大的尺寸上。一旦你到达了分界点，从而列宽变窄，它会再次假定这是一个移动设计，所以使用100％的宽度。我为此文制作了一些样本页面，而样本1，就是用来展示这种最基本的概念。现在我们已经大致了解了HTML标记类是怎么工作的。但是，我们可以再深入些。这次我们还是使用2个div并且让它们在中等视口上以50%50%分割：
<div class="col-md-6">I'm on the left</div>
<div class="col-md-6">I'm on the right</div>
现在，这里有一些新东西。假如在中等视口上，你想以50/50布局，而在大视口上，你设计的是以33%66%布局更好。所以我们将要做的就是在转折点处改变列宽度进行布局。
<div class="col-md-6 col-lg-4">I’m on the left</div>
<div class="col-md-6 col-lg-8">I’m on the right</div>
这有何意义呢？Bootstrap会告诉你，在中等尺寸的视口 ，我将会查找带有'md'的类，并使用它们。在大视口尺寸，我会查找那些带有'lg'的类，并使用它们。同样，我们的两个div将会从50%50%分割到33%66%分割，就如Bootstrap说的那样。这种方法同样可以应用到其它级别视口上，如我们想在比较小的手机上改变布局。假如我们想在平板上使用25%75%的列布局，我们可以这样做:
<div class="col-sm-3 col-md-6 col-lg-4">I’m on the left</div>
<div class="col-sm-9 col-md-6 col-lg-8">I’m on the right</div>
现在，每个节点上有三种不同的列布局。在手机上，它会是左边25%，右边75%。在平板上，它会以50%50%等比分割。在大的视口上，它会以33%66%的比例分割。3种不同的布局对应于三种响应式尺寸。参看示例2:
但是，我知道你在想些什么；在你的HTML里有太多标签了，你可能在一个网格中会用到4种不同的类。有些人关注这些，有些人可能不会。但这里也有一个答案，那就是: mixins。
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中包含任何标签了。.left-and-right {
.make-row();
.left {
.make-xs-column(12);
@media(min- @screen-tablet) {
.make-sm-column(1);
}
@media(min- @screen-desktop) {
.make-md-column(7);
}
@media(min- @screen-large-desktop) {
.make-lg-column(4);
}
}
.right {
.make-xs-column(12);
@media(min- @screen-tablet) {
.make-sm-column(11);
}
@media(min- @screen-desktop) {
.make-md-column(5);
}
@media(min- @screen-large-desktop) {
.make-lg-column(8);
}
}
}
在每一个布局中我们用.left和.right来改变列宽度。在这个比较怪异的例子中，用.left和.right就能实现漂亮的跳转功能，但效果将在例子3中可以饱览无遗:
同时在这个例子中，因为我们用了make-xs-column()混合类，手机处理网格大小时仍然维持并行的列，而不是垂直叠加的。截至目前，Bootstrap不允许在手机中使用列混合类，你得包含如上面的make-xs-column(12),这样在根类中就能拥有Bootstrap基本的网格CSS属性了，如果你想要自定义混合类，我已经制作了一个例子，以备万一Bootstrap将来出现状况：Bootsrap 3 Smallest Column Mixin
无论是在HTML类或是混合方法中，偏移和拉/推以同样的方式工作。你可以在标签中以类的方式包含它们，或者是动态的的混合方式。这两者的不同之处是如果你用HTML方法，将禁止宽度偏移以及在任何情况下都不能改变布局。如果你想要你有宽度偏移，你就得使用混合方式。我不确定为什么会有这些区别，但事实就是这样的。
在使用拉/推的方式时，你可以很容易的漂移，左右移动窗口，也在整个移动设备的屏幕上上下移动。在已经很强大的网格系统中会让你有无限的可能。