bootstrap cloumn 分割_Bootstrap 栅格布局

栅格布局系统：

思想：一个表达式足以描述， 百分比占位 + 多媒体查询 + float + relative

Bootstrap栅格系统的工作原理：

row必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中，以便为其赋予合适的排列(aligment)和内补(padding)。

通过“行(row)”在水平方向创建一组“列(column)”。

你的内容应当放置于“列(column)”内，并且，只有“列(column)”可以作为行(row)”的直接子元素。

类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。

通过为“列(column)”设置 padding 属性，从而创建列与列之间的间隔(gutter)。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行(row)”所包含的“列(column)”抵消掉了padding。

如果一“行(row)”中包含了的“列(column)”大于 12，多余的“列(column)”所在的元素将被作为一个整体另起一行排列。

栅格参数：

从堆叠到水平排列

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

流式布局容器

将最外面的布局元素 .container 修改为 .container-fluid，就可以将固定宽度的栅格布局转换为 100% 宽度的布局。

...

移动设备和桌面屏幕

.col-xs-*

.col-md-*

混合使用，xs、md依次添加(权重问题)。

手机、平板、桌面

支持平板可以添加

.col-sm-*

混合使用，xs、sm、md依次添加(权重问题)。

多余的列(column)将另起一行排列

如果在一个 .row 内包含的列(column)大于12个，包含多余列(column)的元素将作为一个整体单元被另起一行排列。

column reset

栅格系统组成的重要部分是使用了float。必然导致了dom脱离文档流对布局的影响。解决方法：添加.clearfix清除浮动对布局的影响

.col-xs-6 .col-sm-3

.col-xs-6 .col-sm-3

.col-xs-6 .col-sm-3

.col-xs-6 .col-sm-3

列偏移

使用.col-md-offset-*类可以将当前列向右侧偏移，css表达式为margin-left: xx%

.col-md-4

.col-md-4 .col-md-offset-4

.col-md-3 .col-md-offset-3

.col-md-3 .col-md-offset-3

.col-md-6 .col-md-offset-3

嵌套列

为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 元素和一系列 .col-sm-元素到已经存在的 .col-sm- 元素内。被嵌套的行(row)所包含的列(column)的个数不能超过12(其实，没有要求你必须占满12列)。

列排序

通过使用 .col-md-push-和.col-md-pull-类就可以很容易的改变列(column)的顺序。

原理：利用relative，可以理解为

.col-md-push-3 => 当前位置 向右移动

left = 100/12*3 % => 效果为：

left : 25%

.col-md-pull-9=> 当前位置 向左移动

right = 100/12*9 % => 效果为：

right : 75%