bootstrap网格系统使用方法解析

bootstrap网格系统使用方法解析

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

工作原理

1、数据行(.row)必须包含在容器（.container）中，以便为其赋予合适的对齐方式和内距(padding)。如：

2、在行(.row)中可以添加列(.column)，但列数之和不能超过平分的总列数，比如12。如：

3、具体内容应当放置在列容器（column）之内，而且只有列（column）才可以作为行容器(.row)的直接子元素

4、通过设置内距（padding）从而创建列与列之间的间距。然后通过为第一列和最后一列设置负值的外距（margin）来抵消内距(padding)的影响

能这媒体查询实现：

针对不同的浏览器分辨率，其宽度也不一样：自动、750px、970px和1170px

css源码：

.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;

}

基本用法

网格系统用来布局，其实就是列的组合，Bootstrap框架在不同屏幕尺寸使用了不同的网格样式

1、列组合

列组合简单理解就是更改数字来合并列（原则：列总和数不能超12）

实现列组合方式非常简单，只涉及两个CSS两个特性：浮动与宽度百分比。

/*确保所有列左浮动*/

.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, http://.col-md-12 {

float: left;

}

---------------------------------------------------------------------------------

/*定义每个列组合的宽度（使用的百分比）*/

.col-md-12 {

width: 100%;

}

.col-md-11 {

width: 91.66666667%;

}

.col-md-10 {

width: 83.33333333%;

}

.col-md-9 {

width: 75%;

}

.col-md-8 {

width: 66.66666667%;

}

.col-md-7 {

width: 58.33333333%;

}

.col-md-6 {

width: 50%;

}

.col-md-5 {

width: 41.66666667%;

}

.col-md-4 {

width: 33.33333333%;

}

.col-md-3 {

width: 25%;

}

.col-md-2 {

width: 16.66666667%;

}

.col-md-1 {

width: 8.33333333%;

}

列偏移

我们不希望相邻的两个列紧靠在一起，但又不想使用margin或者其他的技术手段来。这个时候就可以使用列偏移（offset）功能来实现。使用列偏移也非常简单，只需要在列元素上添加类名“col-md-offset-*”(其中星号代表要偏移的列组合数)，那么具有这个类名的列就会向右偏移。例如，你在列元素上添加“col-md-offset-4”，表示该列向右移动4个列的宽度。

实现原理非常简单，就是利用十二分之一（1/12）的margin-left。然后有多少个offset，就有多少个margin-left。

css源码：

.col-md-offset-12 {

margin-left: 100%;

}

.col-md-offset-11 {

margin-left: 91.66666667%;

}

.col-md-offset-10 {

margin-left: 83.33333333%;

}

.col-md-offset-9 {

margin-left: 75%;

}

.col-md-offset-8 {

margin-left: 66.66666667%;

}

.col-md-offset-7 {

margin-left: 58.33333333%;

}

.col-md-offset-6 {

margin-left: 50%;

}

.col-md-offset-5 {

margin-left: 41.66666667%;

}

.col-md-offset-4 {

margin-left: 33.33333333%;

}

.col-md-offset-3 {

margin-left: 25%;

}

.col-md-offset-2 {

margin-left: 16.66666667%;

}

.col-md-offset-1 {

margin-left: 8.33333333%;

}

.col-md-offset-0 {

margin-left: 0;

}

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

列排序

列排序其实就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。在Bootstrap框架的网格系统中是通过添加类名“col-md-push-”和“col-md-pull-” (其中星号代表移动的列组合数)。

左边占4列宽，右侧占8列宽；

-----------------------将这两个互换位置--------------------------------------------------

// 实现原理：

.col-md-pull-12 {

right: 100%;

}

.col-md-pull-11 {

right: 91.66666667%;

}

.col-md-pull-10 {

right: 83.33333333%;

}

.col-md-pull-9 {

right: 75%;

}

.col-md-pull-8 {

right: 66.66666667%;

}

.col-md-pull-7 {

right: 58.33333333%;

}

.col-md-pull-6 {

right: 50%;

}

.col-md-pull-5 {

right: 41.66666667%;

}

.col-md-pull-4 {

right: 33.33333333%;

}

.col-md-pull-3 {

right: 25%;

}

.col-md-pull-2 {

right: 16.66666667%;

}

.col-md-pull-1 {

right: 8.33333333%;

}

.col-md-pull-0 {

right: 0;

}

.col-md-push-12 {

left: 100%;

}

.col-md-push-11 {

left: 91.66666667%;

}

.col-md-push-10 {http://

left: 83.33333333%;

}

.col-md-push-9 {

left: 75%;

}

.col-md-push-8 {

left: 66.66666667%;

}

.col-md-push-7 {

left: 58.33333333%;

}

.col-md-push-6 {

left: 50%;

}

.col-md-push-5 {

left: 41.66666667%;

}

.col-md-push-4 {

left: 33.33333333%;

}

.col-md-push-3 {

left: 25%;

}

.col-md-push-2 {

left: 16.66666667%;

}

.col-md-push-1 {

left: 8.33333333%;

}

.col-md-push-0 {

left: 0;

}

列的嵌套

可以在一个列中添加一个或者多个行（row）容器，然后在这个行容器中插入列（像前面介绍的一样使用列）。但在列容器中的行容器（row），宽度为100%时，就是当前外部列的宽度。

我的里面嵌套了一个网格

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。