Bootstrap中的网格系统
1、关于网格系统的简单介绍
- 网格系统中的内容需要放置在容器中。
- 容器一般有两种类, .container和.container-fluid
- Container 可以规定宽度
- Container-fluid 默认是全屏大小
- 关于行列关系的介绍
- 行是列的包装
- 内容必须放在列中,并且只有列才能作为行的直接子代
- 我们可以对列进行一些约束,比如大小,比如设备。
- 我们可以对列的边距进行一些修改。
- 列中的关于设备的不同类
- Extra small .col-
- small .col-sm-
- Medium .col-md-
- Large .col-lg-
- Extra Lagre .col-xl-
2、一些关于网格系统的实例
2.1 等宽
网格布局中,每列的宽度都是一致的。
<div class="container border">
<div class="row border">
<div class="col border">
1 of 2
</div>
<div class="col border">
2 of 2
</div>
</div>
<div class="row border">
<div class="col border">
1 of 3
</div>
<div class="col border">
2 of 3
</div>
<div class="col border">
3 of 3
</div>
</div>
</div>
2.2 等宽多行(分栏符)
我们可以通过插入.w-100来创建跨越多行的等宽列。
<div class="container border">
<div class="row border">
<div class="col border">col</div>
<div class="col border">col</div>
<div class="w-100 border"></div>
<div class="col border">col</div>
<div class="col border">col</div>
</div>
</div>
2.3 设置一行的宽度
自动布局意味着我们可以设置一列的宽度,并且同级列可以自动调整大小。
<!-- 用确定的标签大小来控制div -->
<div class="container border">
<div class="row border">
<div class="col border">1 of 3</div>
<div class="col-6 border">2 of 3 (wider)</div>
<div class="col border">3 of 3</div>
</div>
<div class="row border">
<div class="col border">1 of 3</div>
<div class="col-5 border">2 of 3 (wider)</div>
<div class="col border">3 of 3</div>
</div>
</div>
2.4 可变宽度内容
我们使用 col-{breakpoint}-auto可以使列的宽度随着内容的大小而变化。
<!-- 根据文本内容来控制容器大小 -->
<div class="container border">
<div class="row justify-content-md-center border">
<div class="col col-lg-2 border">1 of 3</div>
<div class="col-md-auto border">Variable width content</div>
<div class="col col-lg-2 border">3 of 3</div>
</div>
<div class="row border">
<div class="col border">1 of 3</div>
<div class="col-md-auto border">Variable width content</div>
<div class="col col-lg-2 border">3 of 3</div>
</div>
</div>
3、响应式布局
Bootstrap的网格包括了五层预定义的类,用于构建复杂的响应式布局,可以给不同的设备设置想要的大小,包括超小型,小型,中型,大型,超大型等五种设备。
3.1 给容器设置大小
如果对每一种设备网格要求都是一样的话,请使用.col和.col-*来修饰容器,如果需要变化的话,请使用指定的编号的类别。
<!-- 保证容器在任何大小设备中都能一致,需要使用bootstrap中的类.col-* -->
<div class="container border">
<div class="row border">
<div class="col border">col</div>
<div class="col border">col</div>
<div class="col border">col</div>
<div class="col border">col</div>
</div>
<div class="row border">
<div class="col-8 border">col-8</div>
<div class="col-4 border">col-4</div>
</div>
</div>
3.2 在特定设备中容器堆叠至水平
例如:我们可以使用.col-sm-*类,而被设置的容器将在小设备时堆叠呈水平状态。
<!-- 使用.col-sm-*会使得容器在小设备时行从堆叠变成水平 -->
<div class="container border">
<div class="row border">
<div class="col-sm-8 border">col-sm-8</div>
<div class="col-sm-4 border">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm border">col-sm</div>
<div class="col-sm border">col-sm</div>
<div class="col-sm border">col-sm</div>
</div>
</div>
3.3 混合搭配
使列在不同的设备中呈现不同的样子,我们需要对他进行不同类的组合。
<!-- 不同类的组合 -->
<div class="container border">
<div class="row border">
<div class="col-md-8 border">col-md-8</div>
<div class="col-6 col-md-4 border">col-6 col-md-4</div>
</div>
<div class="row border">
<div class="col-6 col-md-4">col-6 col-md-4</div>
<div class="col-6 col-md-4">col-6 col-md-4</div>
<div class="col-6 col-md-4">col-6 col-md-4</div>
</div>
<!-- 列始终保持50%的宽度 -->
<div class="row border">
<div class="col-6">col-6</div>
<div class="col-6">col-6</div>
</div>
</div>
3.4 行列
我们可以通过设置 .row-cols-* 来快速设置想呈现的内容的列数。
<div class="container border">
<div class="row row-cols-2 border">
<div class="col border">Column</div>
<div class="col border">Column</div>
<div class="col border">Column</div>
<div class="col border">Column</div>
</div>
</div>
4、对齐
4.1 垂直对齐
我们使用.align-items-*类可以使我们的容器实现垂直对齐。
<!-- 垂直对齐 -->
<div class="container border">
<div class="row align-items-start">
<div class="col border">One of three columns</div>
<div class="col border">Two of three columns</div>
<div class="col border">Three of three columns</div>
</div>
<div class="row align-items-center">
<div class="col border">One of three columns</div>
<div class="col border">Two of three columns</div>
<div class="col border">Three of three columns</div>
</div>
<div class="row align-items-end">
<div class="col border">One of three columns</div>
<div class="col border">Two of three columns</div>
<div class="col border">Three of three columns</div>
</div>
</div>
4.2 水平对齐
我们可以通过设置.justify-content-*类来改变在主轴上的对齐,也就是水平对齐。
<!-- 水平对齐 -->
<div class="container border">
<div class="row justify-content-start border">
<div class="col-4 border">One of two columns</div>
<div class="col-4 border">One of two columns</div>
</div>
<div class="row justify-content-center border">
<div class="col-4 border">One of two columns</div>
<div class="col-4 border">One of two columns</div>
</div>
<div class="row justify-content-end border">
<div class="col-4 border">One of two columns</div>
<div class="col-4 border">One of two columns</div>
</div>
<div class="row justify-content-around border">
<div class="col-4 border">One of two columns</div>
<div class="col-4 border">One of two columns</div>
</div>
<div class="row justify-content-between border">
<div class="col-4 border">One of two columns</div>
<div class="col-4 border">One of two columns</div>
</div>
</div>
4.3 No gutters
我们可以使用 .no-gutters 类来删除预定义网格中列之间的装订线。
<!-- No gutters -->
<div class="row no-gutters">
<div class="col-sm-6 col-md-8 border">col-sm-6 col-md-8</div>
<div class="col-6 col-md-4 border">col-6 col-md-4</div>
</div>
4.4 列包装
如果有一行中放置的列超过了12列,则每组额外的列将作为一个新单元包装至新行中。
<!-- Column wrapping -->
<div class="container border">
<div class="row border">
<div class="col-9 border">col-9</div>
<div class="col-4 border">
col-4<br/>
since 9 + 4 = 13 > 12, this 4-column-wid div gets wrapped onto a new line as one contigous unit.
</div>
<div class="col-6 border">
col-6<br/>
Subsequent columns continue along the new line.
</div>
</div>
</div>
5、重新排序
5.1 排列顺序
我们可以使用 .order-* 对项目进行可视化排序。
<!-- Order classes -->
<div class="container border">
<div class="row border">
<div class="col border">First in DOM, no order applied</div>
<div class="col order-12 border">Second in DOM, with a larger order</div>
<div class="col order-1 border">Thrid in DOM, with an order of 1</div>
</div>
</div>
我们可以通过.order-first或.order-last来重置DOM中的顺序。
<div class="container border">
<div class="row border">
<div class="col order-last border">First in DOM, ordered last</div>
<div class="col border">Second in DOM, uordered</div>
<div class="col order-first border">Third in DOM, ordered first</div>
</div>
</div>