Bootstrap 3 网格系统简介
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-width: @screen-tablet) { .make-sm-column(1); } @media(min-width: @screen-desktop) { .make-md-column(7); } @media(min-width: @screen-large-desktop) { .make-lg-column(4); } } .right { .make-xs-column(12); @media(min-width: @screen-tablet) { .make-sm-column(11); } @media(min-width: @screen-desktop) { .make-md-column(5); } @media(min-width: @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方法,将禁止宽度偏移以及在任何情况下都不能改变布局。如果你想要你有宽度偏移,你就得使用混合方式。我不确定为什么会有这些区别,但事实就是这样的。
在使用拉/推的方式时,你可以很容易的漂移,左右移动窗口,也在整个移动设备的屏幕上上下移动。在已经很强大的网格系统中会让你有无限的可能。