1. 布局容器

BootStrap 必须需要至少一个布局容器，才能为页面内容进行封装和方便的样式控制。

相当于一个画板。

帮助手册位置：全局 CSS 样式-------》概览-------》布局容器

任意元素使用了布局容器的样式，都会成为一个布局容器，建议使用 div 作为布局容器

 代码准备：

示例 1：

效果 1：

示例 2：

效果 2：

2. 栅格

2.1 简述栅格系统

为了方便在布局容器中进行网页的布局操作。

BootStrap 提供了一套专门用于响应式开发布局的栅格系统。

栅格系统将一行分为 12 列 ，通过设定元素占用的列数来 布局元素在页面上的展示位置。

帮助手册位置：全局 CSS 样式 ----- 栅格系统

作用：

可以让开发人员更加轻松进行网页布局，并且轻松进行响应式开发。

2.2 栅格系统的特点及入门案例

栅格特点

 “行（

row）

”必须包含在 .container （固定宽度）或 .container-fluid （

100% 宽度）中

行使用的样式“.row”，列使用样式“col-*-*” 元素内容应当放置于“列（

column）

”内

基本的书写方式必须是：容器---行---列---内容

相当于 HTML 表格：表格----行-----单元格—内容

栅格参数：

“col-屏幕尺寸-占用列数”

列元素的书写顺序，决定布局顺序，先写的列元素会被先布局到行上。

列元素的占用列数，定义列元素的大小

示例 1：一个元素占一行

代码准备：

效果 1：

示例 2：三个元素平分一行

代码准备：

效果 2：

注：

一个 row 样式下，如果设置的 col 列数总和 <=12 ，那么该 row 下元素在一行排列；

一个 row 样式下，如果设置的 col 列数总和 >12 ，那么超出的元素会另起一行排列；

行和列可以进行无限嵌套，嵌套方式必须为 列---行---列----行。。。。

2.3 栅格屏幕尺寸设置

屏幕尺寸简述：

large : lg

------- 大屏幕，一般 PC 尺寸

medium : md --------中等屏幕，小 PC 尺寸

small: sm : sm ----- 小屏幕 ， iPad 尺寸

x small : xs

----- 超小屏幕，智能手机尺寸

示例：

代码准备：

效果：

2.4 设置屏幕尺寸时的注意事项

若设置了某个屏幕尺寸的样式，那么比该尺寸大的屏幕，会沿用该设置；比该尺寸小的屏幕，会默认一个元素占 12 列的设置。

例如：设置了 col-md-4，那么相当于也设置了 col-lg-4。

其他屏幕尺寸均默认为 col-sm-12,col-xs-12

2.5 列偏移

通常情况下我们需要将元素居中显示，需要左边空出一定的空白区域，这里我们就可以使用列偏移

来达到效果。

3. 响应式工具

为针对性地在移动页面上展示和隐藏不同的内容，bootStrap 提供响应式工具。

可以让开发人员通过该工具决定，在何种屏幕尺寸下，隐藏或者显示某些元素

帮助手册位置：全局 CSS 样式---响应式工具

代码准备：

实质：通过设置 display: inline-block; 并添加少量的内补（

padding），将所有元素放置于同一行。