bootstrap的布局（container、row、col-xs-4）

使用bootstrap对前端页面的布局，container、row、col-xs-4等css样式的使用，使网页的布局更漂亮

方法/步骤

1. Bootstrap内置了一套响应式、移动设备优先的12列格网布局系统，它会随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列

   

2. 它就是通过一系列的行（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文件：如图内容所示

   

3. 页面显示如下：

   排成一列，然后分成三栏。再结合一下上面栅格系统的6部原理。是不是懂一点了，反正我自己懂了很多。通过同样的方式可 以创建出比较复杂的网格布局页面。只需要在布局使用的容器上面添加相应的网格布局的类。比如说如果内容占用6个网格，那么就添加一个col-xs-6的 类、占用四个网格就添加一个col-xs-4的类，然后在同一排的周围进行使用带有row类的容器

   

4. 总结：

   1、container:用.container包裹页面上的内容即可实现居中对齐。在不同的媒体查询或值范围内都为container设置了max-width，用以匹配栅格系统。

   2、col-xs-4:这个类通过"-"分为三个部分，第三个部分的数字作为一个泛指，它的范围是1到12。就是可以把一个区域分为12个栏，这个要和row类联合使用。

   其实这个布局很像HTMl中的Table布局tr行和td列

转载于:https://www.cnblogs.com/zhp404/articles/4285305.html