搞定bootstrap栅格(grid)系统
发布在搞定 bootstrap 系列2014年12月19日view:9607
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

这个系列会介绍一些 bootstrap 主要模块的源码,第一篇就介绍一些神奇的栅格系统。文章首发在boke.io

栅格系统

维基百科中可以了解,栅格系统已经有了非常长的历史。

1629年,法王路易十四命令成立一个管理印刷的皇家特别委员会,由数学家尼古拉斯·加宗(Nicolas Jaugeon)担任领导。委员会提出了新字体设计建议:以罗马体为基础,采用方格为设计依据,每个字体方格分为64个基本方格单位,每个方格单位再分成36小格,这样,一个印刷版面就由2304个小格组成。这是世上最早对字体和版面进行科学实验的活动。也是栅格系统的雏形。

在字体设计、版式设计最早使用,后来网页设计也开始使用栅格系统

网页栅格系统

960栅格系统

960栅格系统算是最有名的固定宽度的栅格系统,在1024是普遍分辨率的情况下,960栅格系统非常的好用。

现在用浏览器打开,如上图,当然是很挫了

<body>
<!--container宽度固定为960px,浏览器居中显示 container_12指默认有12列-->
<div class="container_12">
  <h2>
    12 Column Grid
  </h2>
  <!--grid_12就会占一整行-->
  <div class="grid_12">
    <p>
      940
    </p>
  </div>
  <!--每行使用 clear清除浮动-->
  <div class="clear"></div>
  <div class="grid_1">
    <p>
      60
    </p>
  </div>
  <div class="grid_11">
    <p>
      860
    </p>
  </div>
  <div class="clear"></div>
  <div class="grid_2">
    <p>
      140
    </p>
  </div>
  <div class="grid_10">
    <p>
      780
    </p>
  </div>
</div>
</body> 

960grid实现非常简单

/*提供两种 container,固定宽度为960px,居中对齐*/
.container_12,
.container_16 {
  margin-left: auto;
  margin-right: auto;
  width: 960px;
}
/*枚举所有grid,向左浮动*/
.grid_1,
.grid_2,
.grid_3
.grid_**{
  display: inline;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
}
/*根据 container 设置固定大小*/
.container_12 .grid_1 {
  width: 60px;
}

在1024为主要分辨率的时代,960可以非常方便的解决网页的布局问题,但是随着屏幕分辨率越来越大,各种移动设备的普及,我们就需要新一代响应式的栅格系统了。

下面我们进入正题,讲一讲bootstrap 的栅格系统

bootstrap栅格系统

bootstrap的栅格系统是一个移动优先的栅格系统

固定大小的栅格系统(container)

bootstrap提供固定大小的栅格系统,但是和960grid 不同,bootstrap 提供的是一组。

bootstrap通过 Media Query,来设置不同级别的固定大小,如图下图所示

来个官方的 demo

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

结果如图所示

流式栅格系统(container-fluid)

bootstrap 除了提供 container 之外,还提供了 contaienr-fluid 类,这个会让容器的大小等于浏览器的大小,使用方法和container 一致。

如何来做响应式布局

上文已经可以了解到,行使用 row 来控制,列使用 col 来控制。

col根据分辨率不同,分为 col-xs-,col-sm-,col-md-,col-lg-四种类型,并且针对这些提供课可见类

举个例子

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

在大于992px 的浏览器:

  • 第一行是8/4分

在大于768小于992的浏览器:

  • 第一行是6/6分

在小于768的浏览器:

  • 第一行是12/0

从上面的例子基本可以了解响应式栅格系统的使用了,col 四种类型,是向上兼容的,也就是会优先显示大屏幕的类

bootstrap栅格系统源码解析

等待下回分解

联系我

微博 GitHub

评论
发表评论
暂无评论
WRITTEN BY
mdemo
Start Real-Time Life.
TA的新浪微博
PUBLISHED IN
搞定 bootstrap 系列

bootstrap 核心模块源码分析

我的收藏