文章目录
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。它包含了易于使用的预定义类,还有强大的mixin 用于生成更具语义的布局。
类似 .row 和 .col-xs-4 这种预定义的类,可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
栅格系统就是加强了对盒子模型的应用。使用的基本流程入下:
- 定义
.container
或者.container-fluid
作为父元素 - 再定义
.row
作为子元素 - 通过“行(
.row
)”在水平方向创建一组“列(.col
)
栅格参数
<!-- row类可以抵消container类的padding-->
<div class="container">
<div class="row">
<div class="col-lg-4">
<h2 style="background-color: rebeccapurple">HELLO WORLD</h2>
</div>
<div class="col-lg-4">
<h2 style="background-color: #25e4cd">HRLLO WOELD</h2>
</div>
</div>
</div>
<!--将最外面的布局元素 .container 修改为 .container-fluid,就可以将固定宽度的栅格布局转换为 100% 宽度的布局-->
值得注意的是 如果在一个 .row 内包含的列(column)大于12个,包含多余列(column)的元素将作为一个整体单元被另起一行排列。
列偏移
使用.col-md-offset-*
类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距(margin)。例如,.col-md-offset-4
类将 .col-md-4
元素向右侧偏移了4个列(column)的宽度。
<div class="row">
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
嵌套列
在定义了一个列里面还可以进行嵌套.row
新嵌套的行里的列数同样不能大于12。
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-xs-8 col-sm-6">
Level 2: .col-xs-8 .col-sm-6
</div>
<div class="col-xs-4 col-sm-6">
Level 2: .col-xs-4 .col-sm-6
</div>
</div>
</div>
</div>
列排序
列排序可以很容易地以一种顺序编写列,然后以另一种顺序显示列。
<div class="row">
<p>排序前</p>
<div class="col-md-4" >
我在左边
</div>
<div class="col-md-8" >
我在右边
</div>
</div>
<br>
<div class="row">
<p>排序后</p>
<div class="col-md-4 col-md-push-8" >
我在左边
</div>
<div class="col-md-8 col-md-pull-4" >
我在右边
</div>
</div>
Less mixin 和变量
由于预定义的栅格类已经够用,不再赘述,有兴趣可以去官网查看。