1.1 柵格系統介紹
利用Bootstrap做響應式內部采取的是一種叫做柵格系統的方式。
柵格系統：英文名gridsystems,又稱網格系統，它是指將頁面布局划分成等寬的列，然后通過列數的定義來模塊化頁面布局。
與rem划分等份數不同的是：rem響應式布局中是將整個屏幕划分成若干等分，而柵格系統是將頁面內容(container)划分成若干等份。
Bootstrap提供了一套響應式、移動設備優先的流式柵格系統，隨着屏幕或視口尺寸的增加，系統會自動分為最多12列。
Bootstrap里面的container寬度是固定的，但是不同屏幕下，container的寬度不一樣，我們再把container划分為12等份。
Bootstrap也采用了normalize.css的初始化，以后在引用Bootstrap的時候就不再需要另外引入normalize.css文件。
https://v3.bootcss.com/css/
1.2 柵格選項參數
柵格系統用於通過一系列的行（row）與列（column）的組合來創建頁面布局，你的內容就可以放入這些創建好的布局中。
體會Bootstrap中文網：https://www.bootcss.com/ 的以下部分的伸縮布局：
實現
- 行row必須放到container布局容器里面
- 我們實現列的平均分配需要給列添加類前綴
- xs-extral small:超小；sm-small:小；md-medium：中等；lg-lage:大；
- 列column大於12，多余的列所在元素將被作為一個整體另起一行排列
- 每一列默認有15px的padding
- 可以同時為一列指定多個設備的類名，以便划分不同的份數，例如：class="col-md-4 col-sm-6"
舉例1：
<body>
<div class="container">
<p> 當孩子的份數相加等於12 則孩子可以占滿整個container寬度</p>
<div class="row">
<!-- 3+3+3+3=12 -->
<div class="col-lg-3">1</div>
<div class="col-lg-3">2</div>
<div class="col-lg-3">3</div>
<div class="col-lg-3">4</div>
</div>
<div class="row">
<!-- 6+2+2+2=12 -->
<div class="col-lg-6">1</div>
<div class="col-lg-2">2</div>
<div class="col-lg-2">3</div>
<div class="col-lg-2">4</div>
</div>
<p> 當孩子的份數相加小於12 則孩子可以占不滿整個container寬度</p>
<div class="row">
<!-- 6+2+2+1=11 -->
<div class="col-lg-6">1</div>
<div class="col-lg-2">2</div>
<div class="col-lg-2">3</div>
<div class="col-lg-1">4</div>
</div>
<p>當孩子的份數相加大於12 則多出的那一列另起一行顯示</p>
<div class="row">
<!-- 6+2+2+3=13 -->
<div class="col-lg-6">1</div>
<div class="col-lg-2">2</div>
<div class="col-lg-2">3</div>
<div class="col-lg-3">4</div>
</div>
</div>
</body>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 要求當前頁面使用IE瀏覽器最高版本的內核來渲染 -->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--[if lt IE 9]>
解決ie9以下瀏覽器對html5新增標簽不識別，並導致css不起作用的問題
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
解決ie9以下瀏覽器對css3 Media Query 的不識別問題
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- 一定不要忘記引入bootstrap的樣式文件 -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<title>Document</title>
<style>
[class^="col"] {
border: 1px solid #ccc;
}
</style>
</head>
效果圖如下：
舉例2：
<body>
<div class="container">
一.
<div class="row">
<!-- 3+3+3+3=12 -->
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4</div>
</div>
二.
<div class="row">
<!-- 6+2+2+2=12 -->
<div class="col-lg-6">1</div>
<div class="col-lg-2">2</div>
<div class="col-lg-2">3</div>
<div class="col-lg-2">4</div>
</div>
</div>
</body>
1.3 列嵌套
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<!-- 對這個小盒子可以繼續划分成12列 -->
<!-- 我們列嵌套最好加一個行row 這樣可以取消父元素的padding值 -->
<div class="row">
<div class="col-md-6">a</div>
<div class="col-md-6">b</div>
</div>
</div>
<div class="col-md-4">2</div>
<div class="col-md-4">3</div>
</div>
</div>
</body>
1.4 列偏移
使用.col-md-offset-類，可以將列向右偏移，這些類實際上是通過使用選擇器為當前元素增加了左側的邊距(margin)。
<body>
<div class="container">
<!-- 兩側盒子 -->
<div class="row">
<!-- 左側盒子占3份，右側盒子占3份，且右側盒子向右偏移6份 -->
<div class="col-md-3">左側</div>
<!-- 右側盒子向右偏移6份，實際上就是為右側盒子添加了左側的外邊距 margin-left值由系統計算得出-->
<div class="col-md-3 col-md-offset-6">右側</div>
</div>
<!-- 中間盒子 -->
<div class="row">
<!-- 實現水平居中對齊 -->
<div class="col-md-8 col-md-offset-2">中間盒子</div>
</div>
</div>
</body>
<style>
.row div {
height: 50px;
background-color: pink;
}
</style>
1.5 列排序
通過使用.col-md-push-和.col-md-pull-類就可以很容易改變列column的順序。
<body>
<div class="container">
<div class="row">
<!-- 將占4份的左側盒子向右推8份 -->
<div class="col-md-4 col-md-push-8">左側</div>
<!-- 將占8份的右側盒子向左拉4份 -->
<div class="col-md-8 col-md-pull-4">右側</div>
</div>
</div>
</body>
<style>
.row div {
height: 50px;
background-color: pink;
}
</style>
1.6 響應式工具
為了加快對移動設備友好的頁面開發工作，利用媒體查詢功能，並使用這些工具類可以方便的針對不同設備展示或隱藏頁面工作。
與之相反的是visible-xs、visible-sm、visible-md、visible-lg是顯示某個頁面內容。
<body>
<div class="container">
<div class="row">
<div class="col-xs-3">
1
<span class="visible-lg">我會在大屏下顯示哦</span>
</div>
<div class="col-xs-3">2</div>
<!-- 在中等屏幕下該列隱藏992px~1200px;在超小屏幕下隱藏0~768px-->
<div class="col-xs-3 hidden-md hidden-xs">我會變魔術呦</div>
<div class="col-xs-3">4</div>
</div>
</div>
</body>
<style>
.row div {
height: 150px;
background-color: skyblue;
}
.row div:nth-child(3) {
background-color: pink;
}
span {
font-size: 30px;
color: #fff;
}
</style>