@(Bootstrap)
导言
前面我们讲了如何安装使用bootstrap框架，下面我们将会学习bootstrap的各种框架结构，布局。在这篇文章中将讲述如何使用栅格化布局
[TOC]
1.什么是栅格化布局
Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。
我在这里是把Bootstrap中的栅格系统叫做布局。它就是通过一系列的行（row）与列（column）的组合创建页面布局，然后你的内容就可以放入到你创建好的布局当中。下面就简单介绍一下Bootstrap栅格系统的工作原理：
网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份。
2.开始栅格化布局
a创建一个容器
我们要先创建一个容器来存放我们的内容，这个容器的名字加containner,我们来看一下bootstrap文档中的源码，这个样式在bootstrap.css文件中,下面是bootstrap中的源码
.container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto;}@media(min-width:768px){.container{width:750px;}}@media(min-width:992px){.container{width:970px;}}@media(min-width:1200px){.container{width:1170px;}
margin-left和magin-right都设置为auto，文档会居中显示并适配各种设备
b.创建合适的栅格系统
我们看下bootstrap官网给的解释
Three equal columns
Get three equal-width columns starting at desktops and scaling to large desktops. On mobile devices, tablets and below, the columns will automatically stack.
row代表行，bootstrap将划分为12等分，用col-md-num表示，其中num是自己定义的最大为12，并且要保证自己设置的col总和不能超过12
下面我们给个实例，部分源码
Hello,World!
王文杜是个大傻逼吗？是的ILOVEYOU下面为网页效果
c.进行列的嵌套
例如我们已经创建一个num为8的列，我们可以在列里继续嵌套列为6的列，这样就为原来的3/8，官方解释如下
d.单元格的其他类
.c0l-xs- 无论屏幕宽度如何，单元格都在一行，宽度按照百分比设置；试用于手机；
.col-sm- 屏幕大于768px时，单元格在一行显示；屏幕小于768px时，独占一行；试用于平板；
.col-md- 屏幕大于992px时，单元格在一行显示；屏幕小于992px时，独占一行；试用于桌面显示器；
.col-lg- 屏幕大于1200px时，单元格在一行显示；屏幕小于1200px时，独占一行；适用于大型桌面显示器
e.列偏移
5、列偏移
有的时候，我们不希望相邻的两个列紧靠在一起，但又不想使用margin或者其他的技术手段来。这个时候就可以使用列偏移（offset）功能来实现。使用列偏移也非常简单，只需要在列元素上添加类名“col-md-offset-*”(其中星号代表要偏移的列组合数)，那么具有这个类名的列就会向右偏移。例如，你在列元素上添加“col-md-offset-4”，表示该列向右移动4个列的宽度。
以上就是栅格化布局的内容
