bootstrap及栅格系统

一、bootstrap简介

bootstrap是一个结合html、css、js的前端框架，他是基于jQuery的，jQuery本身是能够兼容各大浏览器的，所以bootstrap对各种浏览器的兼容也是非常好的，再者，bootstrap一个非常大的特点就是它的响应式布局，所谓响应式布局就是用bootstrap写出来的页面能够根据屏幕尺寸的大小而进行相应的变化，比如用bootstrap写出来的同一份html代码在pc端显示一个样式，在移动端看到的可能是另外一个样式，其实响应式布局的出现就是为了适应现在大量移动端的访问。

bootstrap本身对表单控件、导航条等已经封装了自己的样式，我们只需要copy代码就能够实现一些非常炫的样式，但是要改动bootstrap的样式是比较困难的，所以bootstrap的局限性在于它的样式是非常有限的，并且要扩展还比较困难。

二、栅格系统

bootstrap的响应式布局主要依靠的就是它的栅格系统，当然还有bootstrap的图片、表格等都能够实现响应式，但我们这里说的是布局；以前我们布局用的是表格，整个页面基本上全部都是表格，整体上是一个表格，然后在表格里面嵌套表格，通过单元格的合并可以很方便的划分成一块一块的，但这样的布局你会发现表格的层级非常深，看上去会非常繁琐，一个简单的页面有时要连续嵌套好几个表格，并且频繁的写那些table、tr标签，相对于div+css布局来说，这些标签似乎就显得非常多余，所以现在一般都用的div+css盒子模型进行布局，它通过一些float、clear、position、margin、padding、border等属性的设置就可以将页面划分成你想要的块状，盒子模型也是具有一定的响应式的，比如将div的width设为100
4000
%，它里面的内容一般也会跟着屏幕的变化而变化，但这种相对于bootstrap的响应式简直太小儿科了；

bootstrap的栅格系统也可以用表格来进行对比吧，它将整个页面看成一个表格，即一个container，container又分为页面两边留白的：container和布满整个页面:container-fluid两种，栅格系统的东西必须写在这两个容器中，既然是表格就有行和列，只不过bootstrap将列固定了数量，不管你的屏幕尺寸大小，每一行都被均分为12格，格子可以合并，格子可以嵌套格子，当格子数量超出12个的时候会自动换行排布，这样一来就可以将整个页面和划分成你想要的样子，并且还有非常重要的一点就是bootstrap的媒体查询，什么叫媒体查询呢？响应式布局是根据什么来响应呢？根据展示html页面的屏幕尺寸，那么bootstrap怎么知道当前页面屏幕的大小呢？这就是所谓的媒体查询了，媒体查询就是查询当前屏幕大小，根据屏幕大小来对html内容做出相应的变化，具体来说就是通过bootstrap的一个css的class样式来设置:

col-*-*

，第一个

*

代表当前的设备，第二个

*

代表在对应设备下当前div所占的格子数，还可以设置在不同尺寸下div的显示与否：

hidden-*

、

visible-*

，

*

对应不同的设备，不同设备尺寸和属性名参照如下官方文档