文 / 李壮相    技术总监

一、什么是BootStrap

在苹果推出视网膜屏幕的iPhone的时候，全世界的人都震惊了，其细腻的显示表达能力，打开了一个新的视觉世界，并开始被竞争对手效仿。然而很快人们就发现问题，微软强大的兼容能力造就了大量的屏幕分辨率极度不统一，苹果产品一家独秀，想模仿不是一件简单的事。于是微软想出了一个办法，就是Metro风格，并在Windows8得以展示。这样醒目简单块状的家伙，完全消除了不同的分辨率的障碍。于是三大阵营统一思路，Android、iOS 、WP，逐步消除拟物化的显示效果，大大小小的手机开始大行其道，满足了不同分辨率的能力。这是一种积木式的简朴思想的大获成功。

然而成熟的B/S架构除了宣布支持HTML5，在手机、PC上的展示能力外，总是捉襟见肘。所幸的是来自Twitter的两个工程师Mark Otto和Jacob Thornton捣鼓了一个叫BootStrap的前端开发的开源工具。其思想和积木式的如出一辙。

 BootStrap按官方的说法有三个特性说明：

A、预处理脚本

虽然可以直接使用 BootStrap 提供的 CSS 样式表，但不要忘记 BootStrap 的源码是基于最流行的 CSS 预处理脚本 —— Less 和 Sass 开发的。

B、一个框架、多种设备

你的网站和应用能在 BootStrap 的帮助下通过同一份代码快速、有效地适配手机、平板、PC 设备，这一切都是 CSS 媒体查询（Media Query）的功劳。

C、特性齐全

BootStrap 提供了全面、美观的文档。你能在这里找到关于 HTML 元素、HTML 和 CSS 组件、jQuery 插件方面的所有详细文档。

二、为啥说它就干一件事

虽然BootStrap说，它干了这三件事，但是我认为，它其实只干了一件事，就是积木！BootStrap用一个专业的名称叫栅格系统(Grid System)。

BootStrap 栅格系统（Grid System）提供了一套响应式、移动设备优先的流式网格系统。随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

这些数字的值就是其分配的宽度的值，最大12，最小1，各种混搭。

这样就把一个网页的布局全部弄清楚了。剩余的工作就比较简单了，为了配合布局，它把按钮、表格、缩略图、标签、气泡、下拉菜单、导航条、警告提示、进度条、列表组合、面板、轮播等重新加工处理了一遍，以满足外部容器的需要。

当然如果您认为事件就这么简单了，那还是小看了BootStrap，它还能够在一个页面里面直接说明不同的布局才是其强大之处。

在CSS上:

这事实上已经说明3中分辨率不同的布局风格，删格系统的定义如下[注]:

这样，一个能够满足不同分辨率的简洁、直观、强悍的前端开发框架被构建出来了，让web开发更迅速、简单。

那么另外，Less和Sass又是何种用途呢？它们的作用是能够让BootStrap的CSS变得更加简洁统一，以便于积木整个风格的调整。Less将CSS赋予了动态语言的特性，如变量、继承、运算、函数等，而Sass富于更加广泛的循环遍历CSS的运算能力，也是栅格系统得以发挥的基础，未来是否均整合到Sass中，我们尚不得而知。简单的讲，就是不要刻意研究Less和Sass，它们为BootStrap的栅格系统起到了重要的作用。但是都是为BootStrap干的这一件事。

从这里面我们得到的启发是，我们把很多事情想象得太复杂了，BootStrap用一个简单的积木方式和简单的表达能力，把前端开发框架重新构建了一下，获得了整个互联网的称赞。这样您弄懂了吗？

[注]表格来自网页：http://v3.bootcss.com/css/