Bootstrap 3 网格系统简介

Bootstrap 3 网格系统简介【已翻译100%】

原文出自 http://www.oschina.net/translate/bootstrap-3-grid-introduction 请关注原文地址

limichange 推荐于 3年前 (共 12 段, 翻译完成于 09-09) 评论 1

参与翻译 (7人) : yale8848, maverickpuss, limichange, miaochuanwei, 一条大河波浪宽, DMDGeeker, 自由之信仅中文 | 中英文对照 | 仅英文 | 打印此文章

在将近9个月的打磨之后, Bootstrap 3 来到了我们的面前. 它展示了一种新的思路来考虑响应式网格系统究竟应该如何运作, 其最佳应用时机, 以及如何处理样式化的元素的响应式断点.大约一个月以前, 我决定立即跳上这艘大船来开始追随新的潮流, 所以我使用它创作了一个新的博客主题(就是你现在看见的这个)并且学到了相当多的东西, 超出了我的预想. 这也是本文着力探讨的问题, 即分享一些我的使用感受和经验.

Bootstrap 2 的网格系统十分的直观, 如果你过去使用的是固定宽度的容器, 那么存在标准, 大尺寸, 平板以及移动版这些可选尺寸. 基准样式均基于"桌面"环境的尺寸来进行构建, 移动版样式则通过随后的响应式样式表来进行应用. 相较于 V3, 它在开箱即用的这种便利性上做得十分的有限.

Bootstrap 3 重点宣扬的一点就是移动优先, 过去一年中存在着一些针对移动优先思想的设计运动, 就是说你应优先使用移动视角来考虑一些概念以及用户体验, 你的交互设计, 线框图, 原型等均基于移动体验来进行初始化的设计. Bootstrap 3 采纳了该理念并将整个框架构建于该理念之上, 即你应该默认通过移动视角来创建基础CSS样式和html结构代码.

以移动为优先的CSS

非常好。如果我从没有这样干过，这意味着什么 ? 很好，让我们跳到一个简单的小例子。假设现在有一个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 可以让你在每个断点处实行增量控制.

很有用对吧? 不? 不明白是咋回事? 那我们继续往下看吧!

例子 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>

这也就是，”在中等或以上的宽度上，给我做一个6列宽出来“。任何小于中等的元素，都将会回到100％宽度的堆栈式布局中（译者注释：因为每一个元素都是100％宽度，所以元素会被垂直叠放）。这是移动优先的设计，所有的内容都被假定于你在为一个移动设备做设计，相对比较小的视图。因此，假如说你想让它是50％对50％的划分屏宽，并且直到最小宽度上的手机都有效，无论怎样，你需要使用一个不同的类来做到这一点。如”保持一个50％的列宽，并且向下适合于手机的尺寸“所言。你要使用新的”xs“（相对小）的类：

<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中包含任何标签了。

回头看看例子2的多元性，不同的窗口是基于不同元素的，当然我们用混合类也能实现的。一旦你知道每一个响应式布局的大小后，你只需要给在每一个media query中添加列混合类。这里有4个用混合类来处理布局大小的例子：

.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方法，将禁止宽度偏移以及在任何情况下都不能改变布局。如果你想要你有宽度偏移，你就得使用混合方式。我不确定为什么会有这些区别，但事实就是这样的。

在使用拉/推的方式时，你可以很容易的漂移，左右移动窗口，也在整个移动设备的屏幕上上下移动。在已经很强大的网格系统中会让你有无限的可能。

Bootstrap 3 网格系统简介

Bootstrap 3 网格系统简介 【已翻译100%】

Bootstrap 3 网格系统简介【已翻译100%】