Bootstrap网格系统

什么是Bootstrap

Bootstrap是一个用于快速开发Web应用程序和网站的前端框架，它包括HTML,CSS,JS等。它是由Twitter开发，如今成为Github上最为流行的前端开发框架。它提供了一套响应式，移动设备优先的流式栅格系统，随着屏幕或视窗尺寸增长，系统会自动分为最多12列。

栅格系统用于经过一系列的行（row）与列（column）的组合来建立页面布局，你的内容就能够放入这些建立好的布局中。Bootstrap栅格系统的工做原理以下：

• 行(row)必须包含在.container(固定宽度)或.container-fluid(100% 宽度)中，以便为其赋予合适的排列(alignment)和内补(padding)。

• 经过行(row)在水平方向建立一组列(column)。

• 你的内容应当放置于列(column)内，而且，只有列(column)能够做为行(row)的直接子元素。

• 相似.row和.col-xs-4这种预约义的类，能够用来快速建立栅格布局。Bootstrap 源码中定义的 mixin 也能够用来建立语义化的布局。

• 经过为列(column)设置padding属性，从而建立列与列之间的间隔(gutter)。经过为.row元素设置负值margin 从而抵消掉为.container元素设置的padding，也就间接为行(row)所包含的列(column)抵消掉了padding。

• 负值的 margin就是下面的示例为何是向外突出的缘由。在栅格列中的内容排成一行。

• 栅格系统中的列是经过指定1到12的值来表示其跨越的范围。例如，三个等宽的列能够使用三个.col-xs-4来建立。

• 若是一行(row)中包含了的列(column)大于12，多余的列(column)所在的元素将被做为一个总体另起一行排列。

• 栅格类适用于与屏幕宽度大于或等于分界点大小的设备，而且针对小屏幕设备覆盖栅格类。所以，在元素上应用任何 .col-md-*栅格类适用于与屏幕宽度大于或等于分界点大小的设备，而且针对小屏幕设备覆盖栅格类。所以，在元素上应用任何.col-lg-*不存在，也影响大屏幕设备。

实例

下图是一个栅格系统，共有四行。咱们能够使用bootstrap的grid-system容易的实现。

代码以下：

<div class="container-fluid">
    
    <div class="row">
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
    </div>
    
    <div class="row">
      <div class="col-md-8">.col-md-8</div>
      <div class="col-md-4">.col-md-4</div>
    </div>
    
    <div class="row">
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4">.col-md-4</div>
    </div>
    
    <div class="row">
      <div class="col-md-6">.col-md-6</div>
      <div class="col-md-6">.col-md-6</div>
    </div>
</div>

在这段代码中，咱们使用.col-md-*栅格类，就能够建立一个基本的栅格系统。因为该例中使用的是.col-md-*，因此最佳的体验状态是在中等屏幕设备上, 它显示为水平排列的多个列，全部列必须放在.row之中。使用.container-fluid是为了是该栅格系统占100%宽度。若是你想浏览更多的例子，请访问bootstrap官网。

Bootstrap实现栅格系统原理

Bootstrap是基于Less构建的，可是同时还提供了一套Sass版本。本文就是经过分析Sass代码来了解Bootstrap是如何实现栅格系统的。Bootstrap Sass版本的github地址为: https://github.com/twbs/bootstrap-sass。可是为了更加方便的理解，我将Bootstrap Sass中关于栅格系统的代码单独提取出来，建立了Bootstrap-grid-sass工程，github地址为: https://github.com/simonwoo/bootstrap-grid-sass。经过分析该项目中的代码，你能够更好的理解栅格系统的工做原理。

该工程的项目结构为：

路径	描述
src	关于bootstrap栅格系统的源代码
release	编译出来的css代码
gruntfile	定义编译sass到css的任务
example	例子

src中共包括如下文件：

• _variables.scss定义栅格系统用到的变量，如各类设备的尺寸大小

• _grid.scss定义了.container, .container-fluid, .row等样式

• _config.scss配置文件，能够在该文件中自定义栅格系统列的数目，以及列与列之间的间距

• mixin目录, 定义了一系列生成栅格系统相关的mixin和一个清除浮动的clearfix的mixin

经过改变_config.scss中的$grid-columns和$grid-gutter-width数值，来自定义你本身的栅格系统，例如，若是你以为默认的12列系统不能知足需求，你能够定义24列系统等。而后在根目录中，使用grunt sass:dev命令，能够自动将scss源代码编译成css，放在release目录中。

参考

• Bootstrap中文站: http://v3.bootcss.com

• Bootstrap Sass项目Github地址: https://github.com/twbs/bootstrap-sass