建站中的
点点滴滴

Bootstrap3网格系统简介

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

jzcoder的PHP学习笔记

  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-*

  至此, 在你恐慌和想到“我不得不像个笨蛋一样在前缀上一个个标数字吗?!”大概不会。大多数时候,这种样式中的各种大小都已经被定义好了, 尤其是平板电脑和比较大的尺寸。只有当你对比较大的尺寸有特殊要求的时候才需要调整。

  这可能会花费一些额外的时间, 但是:

  1. 相对于同时保有一个"桌面优先"的基础样式表和一个纯移动版的样式表的旧式做法来说, 这种方式更佳.
  2. 一旦你习惯了这种方式, 其灵活性以及功能将会弥补存在的疑问或不足.

  新方式实行的前提是网格系统是由视口尺寸经由媒体查询来控制的, 一旦浏览器宽度变大, 不同的列的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-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方法,将禁止宽度偏移以及在任何情况下都不能改变布局。如果你想要你有宽度偏移,你就得使用混合方式。我不确定为什么会有这些区别,但事实就是这样的。

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

 同时用响应式类属性和混合式网格列

  想想我们已经学到的,我们可以同时利用CSS响应式属性和混合式列形成任何你想要的。这更接近于一个夸大的真实世界的样子:

.main-content {
  .make-row();
  .sidebar {
    padding: 20px;
    @media(min-width: @screen-desktop) {
      padding: 30px;
    }
    h2 {
      font-size: 20px;
      @media(min-width: @screen-desktop) {
        font-size: 30px
      }
    }
    .make-xs-column(12);
    @media(min-width: @screen-tablet) {
      .make-sm-column(2);
    }
    @media(min-width: @screen-desktop) {
      .make-md-column(3);
    }
  }
  .content-area {
    line-height: 1.2em;
    @media(min-width: @screen-desktop) {
      line-height: 1.6em;
    }
    h1 {
      font-size: 30px;
      @media(min-width: @screen-desktop) {
        font-size: 40px;
      }
    }
    .make-xs-column(12);
    @media(min-width: @screen-tablet) {
      .make-sm-column(10);
    }
    @media(min-width: @screen-tablet) {
      .make-md-column(9);
    }
  }
}

  从本质上来说,它是让你在每个响应式宽中有完全不同的布局,无论是在网格系统中还是在风格集合中,而且它不会让你在写Less时会有很多工作要做。还有个好处是如果你已经知道怎样用列混合的方式,那么你不需要改变任何HTML内容。

  在使用的时候要记住一件事,这些风格是在基本的移动设备CSS中的“上面或是外面”。你甚至可以为桌面视图来设计样式,那么你就得从移动宽到桌面风格都得改变CSS以适应不同的屏幕,之后你就得在基本水平上固定/取代风格。如果你不关心这些在移动设备上显示的是否完美,那这就变的简单了。如果你不想你得网站有很好的体验,那就打开2个浏览器-一个适应桌面宽,一个适应移动设备宽度。这样至少你就能看到每一个视图上一些糟糕的东西。

 来帮他们改进吧!

  Bootstrap 3 推动了整个移动优先CSS规范的发展,并且让很多从来没有做过移动优先开发的人也能够轻易上手。它越来越具有动态性和灵活性,而且我认为最后它一定更易于使用。

  总而言之,使用Bootstrap 3让我非常激动。我非常痴迷Bootstrap 2,Bootstrap 3向前迈进了很大一步以至于很难让人不对 @twbootstrap guys (@md0, @fat) 和Github 的贡献者为这所在的工作感到惊喜。

现在就去get Bootstrap尝试一下吧!如果你有任何意见,问题,需要帮助,有一些想法或者其他的,都可以提交到网站下方的Disqus区域。

  原文地址:http://www.helloerik.com/bootstrap-3-grid-introduction

未经允许不得转载:建站笔记 » Bootstrap3网格系统简介

分享到:更多 ()

评论 抢沙发

评论前必须登录!

 

学建站就来建站笔记,提供一切有关建站的知识

关于站长加入我们