概述
BootStrap 響應式布局使得同一套頁面可以兼容不同分辨率的設備。
如蘋果官網：不同的尺寸寬度，就有不同的布局。
可以看出其布局有區別了。
它的實現依賴於柵格系統，柵格系統是將一行平均分成12個格子，可以指定元素占幾個格子
實現步驟
-
定義容器。類似於中的table標簽
-
容器主要分為兩類：container、container-fluid
-
.container，它max-width在每個響應斷點處設置一個 -
.container-fluid，這是width: 100%所有斷點
-
-
定義行。類似於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. 如果真實設備寬度小於了設置柵格類屬性的設備代碼的最小值，會一個元素沾滿一整行。