概述
BootStrap 响应式布局使得同一套页面可以兼容不同分辨率的设备。
如苹果官网：不同的尺寸宽度，就有不同的布局。
可以看出其布局有区别了。
它的实现依赖于栅格系统，栅格系统是将一行平均分成12个格子，可以指定元素占几个格子
实现步骤
- 定义容器。类似于中的table标签
- 容器主要分为两类：container、container-fluid
.container，它max-width在每个响应断点处设置一个.container-fluid，这是width: 100%所有断点
- 容器主要分为两类：container、container-fluid
- 定义行。类似于tr标签
-
定义元素。指定该元素在不同的设备上，所占的格子数目。类似于td标签
设备代号：
案例1：使用container-fluid容器
普通屏幕使用 container-lg
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 栅格系统</title> <link href="./BootStrap_3.3.7_libs/css/bootstrap.min.css" rel="stylesheet"> <script src="./jQuery/jquery-3.2.1.min.js"></script> <script src="./BootStrap_3.3.7_libs/js/bootstrap.min.js"></script> <!-- 为内容定义一个方框，方便查看效果 --> <style> .inner { border:1px solid royalblue; } </style> </head> <body> <!-- 1、定义容器 --> <div class="container-fluid"> <!-- 2、定义行--> <div class="row"> <!-- 3、定义元素 --> <div class="col-lg-1 inner">栅格 1：占1个格子</div> <div class="col-lg-2 inner">栅格 2：占2个格子</div> <div class="col-lg-3 inner">栅格 3：占3个格子</div> <div class="col-lg-4 inner">栅格 4：占4个格子</div> <div class="col-lg-5 inner">栅格 5：占5个格子</div> <div class="col-lg-6 inner">栅格 6：占6个格子</div> <div class="col-lg-7 inner">栅格 7：占7个格子</div> <div class="col-lg-8 inner">栅格 8：占8个格子</div> <div class="col-lg-9 inner">栅格 9：占9个格子</div> <div class="col-lg-10 inner">栅格10：占10个格子</div> <div class="col-lg-11 inner">栅格11：占11个格子</div> <div class="col-lg-12 inner">栅格12：占12个格子</div> </div> </div> </body> </html>
效果如下：一行最多只能有12个格子
小屏幕使用 container-sm
将上例中的定义元素部分的 class稍微做修改：
<!-- 1、定义容器 --> <div class="container-fluid"> <!-- 2、定义行--> <div class="row"> <!-- 3、定义元素 --> <div class="col-lg-1 col-sm-2 inner">栅格 1</div> <div class="col-lg-1 col-sm-2 inner">栅格 2</div> <div class="col-lg-1 col-sm-2 inner">栅格 3</div> <div class="col-lg-1 col-sm-2 inner">栅格 4</div> <div class="col-lg-1 col-sm-2 inner">栅格 5</div> <div class="col-lg-1 col-sm-2 inner">栅格 6</div> <div class="col-lg-1 col-sm-2 inner">栅格 7</div> <div class="col-lg-1 col-sm-2 inner">栅格 8</div> <div class="col-lg-1 col-sm-2 inner">栅格 9</div> <div class="col-lg-1 col-sm-2 inner">栅格10</div> <div class="col-lg-1 col-sm-2 inner">栅格11</div> <div class="col-lg-1 col-sm-2 inner">栅格12</div> </div> </div>
效果：
只要适当正价页面大小即可实现如下效果：
案例2：使用container容器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 栅格系统</title> <link href="./BootStrap_3.3.7_libs/css/bootstrap.min.css" rel="stylesheet"> <script src="./jQuery/jquery-3.2.1.min.js"></script> <script src="./BootStrap_3.3.7_libs/js/bootstrap.min.js"></script> <!-- 为内容定义一个方框，方便查看效果 --> <style> .inner { border:1px solid royalblue; } </style> </head> <body> <!-- 1、定义容器 --> <div class="container"> <!-- 2、定义行--> <div class="row"> <!-- 3、定义元素 --> <div class="col-lg-1 col-sm-2 inner">栅格 1</div> <div class="col-lg-1 col-sm-2 inner">栅格 2</div> <div class="col-lg-1 col-sm-2 inner">栅格 3</div> <div class="col-lg-1 col-sm-2 inner">栅格 4</div> <div class="col-lg-1 col-sm-2 inner">栅格 5</div> <div class="col-lg-1 col-sm-2 inner">栅格 6</div> <div class="col-lg-1 col-sm-2 inner">栅格 7</div> <div class="col-lg-1 col-sm-2 inner">栅格 8</div> <div class="col-lg-1 col-sm-2 inner">栅格 9</div> <div class="col-lg-1 col-sm-2 inner">栅格10</div> <div class="col-lg-1 col-sm-2 inner">栅格11</div> <div class="col-lg-1 col-sm-2 inner">栅格12</div> </div> </div> </body> </html>
效果如下：
注意事项
1. 一行中如果格子数目超过12，则超出部分自动换行。
2. 栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。
3. 如果真实设备宽度小于了设置栅格类属性的设备代码的最小值，会一个元素沾满一整行。