概述

BootStrap 响应式布局使得同一套页面可以兼容不同分辨率的设备。

如苹果官网：不同的尺寸宽度，就有不同的布局。

可以看出其布局有区别了。

它的实现依赖于

栅格系统，栅格系统是将一行平均分成12个格子，可以指定元素占几个格子

实现步骤

定义容器。类似于中的table标签

容器主要分为两类：container、container-fluid

.container，它max-width在每个响应断点处设置一个

.container-fluid，这是width: 100%所有断点

定义行。类似于tr标签

定义元素。指定该元素在不同的设备上，所占的格子数目。类似于td标签

设备代号：

案例1：使用container-fluid容器

普通屏幕使用 container-lg

DOCTYPE html html head meta meta http-equiv meta titleBootstrap 栅格系统/title link script /script script /script -- 为内容定义一个方框，方便查看效果 -- style .inner border:1px solid royalblue /style /head body -- 、定义容器 -- div -- 、定义行-- div -- 、定义元素 -- div 栅格：占1个格子/div div 栅格：占2个格子/div div 栅格：占3个格子/div div 栅格：占4个格子/div div 栅格：占5个格子/div div 栅格：占6个格子/div div 栅格：占7个格子/div div 栅格：占8个格子/div div 栅格：占9个格子/div div 栅格10：占10个格子/div div 栅格11：占11个格子/div div 栅格12：占12个格子/div /div /div /body /html

效果如下：一行最多只能有12个格子

小屏幕使用 container-sm

将上例中的定义元素部分的 class稍微做修改：

-- 、定义容器 -- div -- 、定义行-- div -- 、定义元素 -- div 栅格 /div div 栅格 /div div 栅格 /div div 栅格 /div div 栅格 /div div 栅格 /div div 栅格 /div div 栅格 /div div 栅格 /div div 栅格1/div div 栅格1/div div 栅格1/div /div /div

效果：

只要适当正价页面大小即可实现如下效果：

案例2：使用container容器

DOCTYPE html html head meta meta http-equiv meta titleBootstrap 栅格系统/title link script /script script /script -- 为内容定义一个方框，方便查看效果 -- style .inner border:1px solid royalblue /style /head body -- 、定义容器 -- div -- 、定义行-- div -- 、定义元素 -- div 栅格 /div div 栅格 /div div 栅格 /div div 栅格 /div div 栅格 /div div 栅格 /div div 栅格 /div div 栅格 /div div 栅格 /div div 栅格1/div div 栅格1/div div 栅格1/div /div /div /body /html

效果如下：