记忆中的 table 布局系统

我记得很多年前，当我还刚开始做网页编程的时候。大家都还是用 table 来做页面布局。首先，设计师一般是不懂什么 html 和 css 的，（大部分程序员也只是略懂……）。设计师在 photoshop 中完成华丽丽的页面设计。客户点头之后，切片一割，导出 html ，稍微修整一下。接下来就是程序员的工作了，如果设计师有一定经验的话，一般会避开一些在 html 上难以实现的效果。但要是不幸遇上创意性极强经验又不是很足够的设计师，给你来一堆圆角，不规则列表布（第一行三个，第二行四个，第三行五个，或者是不同的修饰效果）。那就苦逼了。。。这个时候你是多么地希望设计师多懂些 html。

新的 div + css 布局方法

后来，随着html4和css2的普及，以及 firefox/chrome 等现代浏览器的助力（ie就是个拖后腿的，特别是6！足足6年不更新，piece of shit!）。div + css 的布局开始流行。新的布局方式需要设计Programming人员深入了解 html 和 css ，生产的页面具有清晰的文档结构，更小的文件体积，维护修改的时候也更方便，设计师对 html/css 的了解也避免一些令人抓狂的设计出现，ajax 开始流行，新形态的 web 提供更好的用户体验。时至今日，几乎是看不到 table 布局的网站存在（小企业网站除外）。但另一方面却又加重了网页设计、Programming人员的工作量。相对于 table ，学习成本变高了。各种浏览器呈现细节不一致，也需要做很多兼容修补工作，为了简化Programming人员的工作量，一些出名的 js 框架开始出现如 Prototype, jQuery, ExtJS, YUI。这个时候智能手机开始兴起，很多人开始使用手机浏览网站。而很多网站也会专门针对手机Programming页面以适应小屏浏览。

时至今日，html5/css3 反而开始抛弃 html4 中一些严格的要求，比如说闭合标签，啰嗦冗长的doctype，向功能性以简便性方向演化。随着 乔帮主 发力，现代智能设备席卷人类世界。越来越多的网站需要考虑不同设备浏览的用户体验。这个时候专门针对手机再Programming一个网站已经不现实，除了工作量和成本问题之外，维护工作也会变得非常复杂及容易出错。Responsive页面设计随即被提出。现在的网页Programming更面临一个重要的挑战：对各种分辨率，各种尺寸的屏幕的自适应。

bootstrap 来了

twiter  推出了 开源bootstrap 项目，是一款革命性的 css 框架。以往的 div + css 让设计开始学技术，这个框架让技术人员可以做设计！马克思在讲事物对立面演化这方面还是相当正确的！bootstrap 从最基本的 css 规则设计到集成功能性的组件，以及强化的 javascript api 对没什么美术天份的程序员们带来了春天！即使不懂 ps和美术也可以整出一个相当漂亮美观的功能性页面。也正如其名，bootstrap =》 引导启航。当你把项目做得足够可用又足够漂亮的时候，再找设计师深入优化也不迟。更爽的是可以避免项目Programming中页面变动让设计抓狂的情形出现。而且 bootstrap 的界面足够美观，后面也可以很大部分保留下来，减少整合周期。

栅格系统

栅格系统是印刷业应用多年的排版方法，粗略地比较，table 布局也是 栅格的一种简单粗爆的实现方式。正统的栅格系统要粗细得多。就好 photoshop 里面的网格，定好整页网格大小之后，每个模块，元素，贴合到网格之中。严密规定的网格让人感觉布局清晰，一目鸟然，产生和谐的美感。栅格系统的思想是将页面为固定大小或比例的栅格块（想像下ps的网格）。然后各种页面块根据其内容大小或重要性占不定量的栅格块。映射到 html 里面就是由 row 和 col 元素组成的标签组。这看起来跟古老的 table 系统如出一辙，但在细节上还是存大很大不同

bootstrap3的栅格系统默认分为12列，网页不同于传统排版，不存在高度限制，所以是由不等量的行组成。为了适应不同分辨率设备显示，bootstrap3很多地方采用了百分比的设定，包括栅格系统一样应用百分比设定。而实践证明这种以百分比为尺寸设定的系统拥有很强的适应性！使用起来也是相当方便，row 即为行容器，col-md-1  这样的意思就是这个列在 970px 或以上的显示器（或者说浏览器宽度）的时候占 1/12。假定想本列占一半的话，只需使用 col-md-6 这样的类名就可以达到目的。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

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

bootstrap的栅格系统设计极为巧妙，通过 col-xs (分辨率 < 768px) col-sm (≥768px) col-md (≥992px) col-lg (≥1200px) 几个类前缀即可针对不同分辨率情况下 列 宽度的百分比！

[gallery ids=“265,266,267,268”]

通过组合设定自适应设计变得相当容易，元素的大小和位置根据不同分辨率自动变换！完成这一切只需要设定几个类名：

这一切都可以节省大量的 css 设计调试时间。美中不足的是国内大量的 xp 用户使用 ie9 以下版本的 ie 浏览器，后期的兼容性工作也是相当的令人担忧啊！

1
2
3

<div class="row">
  <div class="col-lg-3 col-md-4 col-sm-6">img</div>
</div>