Bootstrap框架快速上手，mysql视频教程推荐

…

3、栅格网格系统

==========================================================================

• Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

• 栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。

• Bootstrap框架中的网格系统就是将容器平分成12份。

4列

8列

注意：

• 行（row）必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中

• 具体内容应该放置在列容器 (column) 之内

• col-屏幕尺寸-列数，其中屏幕尺寸有

• xs(xsmall phones) 超小屏(自动)

• sm(small tablets) 小屏(750px)

• md(middle desktops) 中屏(970px)

• lg(larger desktops) 大屏(1170px)

4列

8列

3.1、列组合

---

列组合简单理解就是更改数字来合并列(原则：列总和数不能超12，大于12则自动换到下一行)，有点类似于表格的 colspan 属性

4列

8列

2列

10列

3.2、列偏移

---

• 如果我们不希望相邻的两个列紧靠在一起，但又不想使用 margin 或者其他的技术手段来。这个时候就可以使用列偏移 (offset) 功能来实现。

• 使用列偏移也非常简单，只需要在列元素上添加类名 "col-md-offset-*" (星号代表要偏移的列组合数)，那么具有这个类名的列就会向右偏移。

• 例如，你在列元素上添加 "col-md-offset-8" ,表示该列向右移动8个列的宽度(要保证列与偏移列的总数不超过12，不然会导致列 断行|换行 显示)

4

2

3.3、列排序

---

1列

1列

• 列排序就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。

• 在 Bootstrap 框架的网格系统中是通过 添加类名 col-md-push-* 和 col-md-pull-* (其中星号代表移动的列组合数)

• 左浮动往前 pull ,右浮动往后 push

我们让第二个盒子向右浮动1个列的距离

1

1

1

1

我们让第二个盒子向右浮动3个列的距离

1

1

1

1

3.4、列嵌套

---

• 列嵌套：你可以在一个列中添加一个或者多个行(row) 容器，然后在这个行容器中插入列。

4

4

4

4

4、排版

======================================================================

4.1、标题

---

• Bootstrap 和普通的 HTML 页面一样，定义标题都是使用标签 <h1> ~ <h6> ，只不