bootstrap的布局（container、row、col-xs-4）
使用bootstrap对前端页面的布局，container、row、col-xs-4等css样式的使用，使网页的布局更漂亮
操作方法
- 01
Bootstrap内置了一套响应式、移动设备优先的12列格网布局系统，它会随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列
- 02
它就是通过一系列的行（row）与列（column）的组合创建页面布局，然后你的内容就可以放入到你创建好的布局当中。 下面就简单介绍一下Bootstrap栅格系统的工作原理： 行（row）必须包含在.container中，以便为其赋予合适的排列（aligment）和内补（padding）。 使用行（row）在水平方向创建一组列（column）。 你的内容应当放置于列（column）内，而且，只有列（column）可以作为行（row）的直接子元素。 类似Predefined grid classes like .row and .col-xs-4 这些预定义的栅格class可以用来快速创建栅格布局。Bootstrap源码中定义的mixin也可以用来创建语义化的布局。 通过设置padding从而创建列（column）之间的间隔（gutter）。然后通过为第一和最后一样设置负值的margin从而抵消掉padding的影响。 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个.col-xs-4来创建。 新建html文件：如图内容所示
- 03
页面显示如下： 排成一列，然后分成三栏。再结合一下上面栅格系统的6部原理。是不是懂一点了，反正我自己懂了很多。通过同样的方式可以创建出比较复杂的网格布局页面。只需要在布局使用的容器上面添加相应的网格布局的类。比如说如果内容占用6个网格，那么就添加一个col-xs-6的类、占用四个网格就添加一个col-xs-4的类，然后在同一排的周围进行使用带有row类的容器
- 04
总结： 1、container:用.container包裹页面上的内容即可实现居中对齐。在不同的媒体查询或值范围内都为container设置了max-width，用以匹配栅格系统。 2、col-xs-4:这个类通过"-"分为三个部分，第三个部分的数字作为一个泛指，它的范围是1到12。就是可以把一个区域分为12个栏，这个要和row类联合使用。 其实这个布局很像HTMl中的Table布局tr行和td列