html5 bootstrap 框架,IT兄弟连 HTML5教程 栅格布局 Bootstrap框架

原标题：IT兄弟连 HTML5教程 栅格布局 Bootstrap框架

在这里突然给大家介绍一个叫bootstrap框架，是因为Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，该系统不仅可以随着屏幕设备或视口(viewport)尺寸的增加，而且会自动分为最多12列。

1 Bootstrap现状

Bootstrap，来自Twitter，是目前很受欢迎的前端框架。Bootstrap是基于HTML、CSS、JAVASCRIPT的，它简洁灵活，使得Web开发更加快捷，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言less写成。Bootstrap一经推出后颇受欢迎，国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。

Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站。其中包括以下组件：

下拉菜单、按钮组、按钮下拉菜单、导航、导航条、路径导航，分页、排版、缩略图、警告对话框、进度条、媒体对象等。

Bootstrap让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。全球数以百万计的网站都是基于Bootstrap构建的，例如：招聘网、ghostchina网、laravel中文网等等。

2 栅格系统

Bootstrap的栅格系统就是通过一系列的行(row)与列(column)的组合创建页面布局，然后把相应的内容放入到早已创建好的布局当中。

下面就简单介绍一下Bootstrap栅格系统的工作原理：

网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份。

在使用的时候大家可以根据实际情况重新编译LESS(或Sass)源码，如图1的第323行来修改12这个数值(也就是换成24或32，当然你也可以分成更多，但不建议这样使用)。

图1 sass编译

1．栅格选项

接下来我会为读者们详细介绍Bootstrap里的栅格系统。之前也给大家介绍了Bootstrap是有一个很大的优点特色：支持响应式。所以，Bootstrap的栅格系统里也可以实现在多种不同的移动设备上面进行工作。下图2展示了Bootstrap在不同屏幕设备上工作。

图2 多种屏幕设备

可以看到在不同的设备上栅格系统行为是不一样的，所以也决定了在不同的设备上样式也会不一样，类名为”container”的容器在设备尺寸>=1200px时，会匹配类前缀为”col-lg-”的样式；在>=992px同时又<1200px时，会匹配类前缀为”col-md-”的样式；在>=768px同时<992px时匹配类前缀为”col-sm-”的样式；最后是在屏幕尺寸<768px时匹配类前缀为”col-xs-”的样式。

下面是Bootstrap网格系统中的关键的分界点的媒体查询：

2．基本用法

我们选择网格系统来布局，其实网格系统说白了就是行和列的不同组合。在Bootstrap框架的网格系统中提供了四种基本的用法，下面先从中等屏幕(970px)为读者们介绍。

● 1．列组合

列组合就是在container容器中，首先定义行，然后在每行里再定义不同的列，不同列的类名不一样决定不同的列所占的父级宽度也不一样。不过，每行的列总和数加起来不能超过12。例如：

图3 列组合

为了加深读者对行列布局的理解，笔者这里把行列模块用不同的颜色进行了区分。在第一行中，我们是划分了两列，不过两列的布局比例是4:8，第二行中，我们是划分了三列，每列布局比例是4:4:4，第三行中，也划分了三列，每列布局比例是3:6:3。不知道读者有没有发现，每行列数总和不超过12。第一行4+8=12，第二行4+4++4=12，第三行3+6+3=12。下面给出代码：

给出源代码后，就可以很明显的看出来了。在container类的div容器里，我们按照行列来划分，又在一个row类的div容器里定义不同宽度的列，例如”col-md-4”类的div宽度是占父级宽度的33.33333333%，”col-md-6”类的div宽度是占父级宽度的50%，而且将所有列皆实现左浮动的布局。

除了上面运用到的3、4、6、8类之外，还有其他几种列类名。代码如下：

有需求的时候，直接通过类名即可获取相应的css样式。

● 2 列偏移

有时候，当我们在开发过程中，有两个相邻的div模块展示内容，写好后给产品经理审核，然后产品经理说这两个相邻的div模块靠的太紧了，希望能增大一点宽度。常规思路就是使用margin或者其他的技术手段实现，但其实我们可以使用Bootstrap的列偏移(offset)功能来实现。如何使用？很简单，和上面的列组合一样只需要在列元素上添加类名”col-md-offset-*”(其中星号代表要偏移的列组合数)，那么具有这个类名的列就会向右偏移。比如，我们在列元素上添加”col-md-offset-2”，就表示该列向右移动2个列的宽度。下面是案例展示：

图4 列偏移

分析一下，在图4中，是在一个容器(container)里定义两行(row)，每行的背景颜色定义的是”#eee”，中间显示的空白部分就是行背景色。在第一行里，实际是定义了三列，分别类名是：col-md-4、col-md-2、col-md-2。不过，第二个”col-md-2”的类元素上还添加了一个列类”col-md-offset-4”，使得该div模块向右偏移了4列的宽度，加上该div本身的2列宽度，总共一起占了6列宽度。所以，第一行的列总合数是4+6+2=12，依旧加起来的列组合数不超过12。第二行也是一样，实际是定义了两列，分别类名是:col-md-4、col-md-4。不过，第二个”col-md-4”的类元素上添加了一个类”col-md-offset-4”，使得该div模块向右偏移了4列的宽度，加上该div模块本身的4列宽度，所以该div模块总共占的宽度是8列。因此，第二行的列组合是:4+8=12，还是依旧是不超过12的列组合数。

下面就是源代码：

结合前面的分析和源代码，就看的很清晰了。在容器里，想要移动4列的距离，我们总共又有12列，计算一下这个距离：4/12=1/3=33.333333%，所以我们需要用margin-left去设置移动33.333333%的距离，同理可得，想要移动几列，就做一下计算，得出占12分之几的宽度，再设置相应的margin-left值。现在，我们可以把其他的偏移类也定义出来：

可以看到从第28行到41行是设置的不同类别的偏移宽度，从偏移0到偏移100%的宽度。这样以后大家在使用时就可以直接使用，明确自己想要的移动宽度，然后找到对应的”col-md-offset-?”(?代表列数)就可以达到想要设置的移动宽度距离。

读者需要注意一点，使用”col-md-offset-*”对列进行向右偏移时，要保证列与偏移列的总数不超过12，不然会致列断行显示。

● 3列排序

第三个要给大家讲的是列排序，也就是改变列的方向。简单点说就是通过设置浮动距离来改变左右浮动，在Bootstrap的网格系统中还是通过添加类名的方式进行功能实现。类名有两个：”col-md-push-*”和”col-md-pull-*”(其中星号代表移动的列组合数)。

下面来看一个简单的列子：

这个列子的演示效果如图5：

图5 列排序

现在可以看到图5.9上左边是类名为”col-md-4”的div内容，右边是类名为”col-md-8”的div内容。现在如果要互换位置，就得将左边的”col-md-4”模块向右移动8个列的距离，右边的”col-md-8”模块向左移动4个列的距离。怎么移动呢？通过在”

”上添加类名”col-md-push-8”，在”

”上添加类名”col-md-pull-4”，然后调用样式。

下面是案例展示，实现将图5的案例左右交换：

图6 列排序交换

源代码如下：

原本在左边的类名为”col-md-4”的模块，因为添加了类”col-md-push-8”来控制了模块的left值，想要移动几列，还是计算出占12分之几，然后设置left是12分之几的距离。在右边的类名为”col-md-8”的模块，在其基础上再添加类”col-md-pull-4”来控制模块的right值，依旧是想要移动几列，计算出占12分之几，然后设置right值是12分之几的距离。Bootstrap就是通过这样的添加类的方式设置left和right来实现定位效果，实现布局的左右移动。扩展开来，下面是其余移动距离的类名：

需要移动几列，相应的选择用”col-md-push-?”或着”col-md-pull_?”(?是具体的数字几)就可以了。

● 4 列嵌套

前面介绍的布局都是单一的在某一行里定义多个列，其实Bootstrap框架的网格系统还支持列的嵌套。我们可以在一个列中添加一个或者多个行(row)容器，然后在这个行容器中插入列，具体的插入的列的使用和前面介绍到的列组合、列偏移、列排序一样。需要清楚的是，当我们在列容器中的行容器的宽度设置为100%时，这个宽度和当前的外部的列的宽度是一样的。下面是案例展示：

图7 列嵌套

在这个案例中，第一行里是定义的8:4的列宽，又在类名为”col-md-8”的列中定义了一个新的行(row)容器，在这个行容器中又重新定义了6:6的列宽。第二行中也是同样的嵌套思路，先在第二行里定义了4:8的列宽，在”col-md-8”中的列里定义了新的行(row)容器，在这个行容器里划分了4:4:4的列宽。

下面是源代码：

给出源码后，读者们可以就可以很清楚的看到这个body里的各个DOM节点，DIV标签是怎么的嵌套。

3．手机案例布局

在前面的基本语法讲解里，以中等屏幕(桌面显示器)为例进行了各种类的功能的介绍，现在会给读者们介绍手机端得布局案例，请看下图8：

图8 pc版

图9 手机版

图8和图9显示的是两个不同屏幕得设备，可以看到两者得布局也是不一样得，在图8中一行里显示3列，每列都是占4个宽度得大小；而在图9中，一行显示得是1列，每列都是占12个列得宽度。具体代码看下：

可以看到在源代码里，笔者只定义了一个行(row)容器，可为什么会出现在两种设备上布局不一样呢？这是因为笔者采用了@media媒体查询，当监测到当前得屏幕宽度在768px以下时，就会加载类”hidden-xs”，在屏幕大于992px时，就会加载”hidden-md”类，而这两个类都是控制div标签的”display”属性并决定div模块是否在页面上显示出来。

当在移动设备(屏幕width<768px)时，就会使得第55-57行的div模块被隐藏，显示出来类名为”col-md-12”的div模块即移动端的布局。而不在移动设备(屏幕width>992px)时，第58-60行会被隐藏，只显示出类名为”col-md-4”的div模块。

在以后的开发中，为了在不同的设备上达到显示不同的布局效果，就可以采用这中思路，先弄清楚想要在哪种设备上显示，哪种设备上不显示，将相应的”hidden-xs”、”hidden-md”、“hidden-sm”、”hidden-lg”添加到对应的div标签上即可。返回搜狐，查看更多

责任编辑：