寫在前面
最近在學習了寫前端頁面，其中使用了 Bootstrap 的前端框架，感覺非常好用。
Bootstrap 來自 Twitter ，是目前很受歡迎的前端組件庫，用于開發響應式布局、移動設備優先的 WEB 項目。Bootstrap 是一套用于 HTML、CSS 和 JS 開發的開源工具集。利用其提供的 Sass 變量和大量 mixin、響應式柵格系統、可擴展的預制組件、基于 jQuery 的強大的插件系統，能夠快速法開發出原型或者構建整個 app。Bootstrap 寫出來的界面簡介，使用方便，兼容大部分的 JQuery 插件。并且 Boostrap 是 gitHub 上的開源項目，可以獲取它的源碼。
這里附上中文官網地址：http://www.bootcss.com/
英文官網地址則是：https://getbootstrap.com/
Boostrap 目前最新版本是 Boostrap3 v3.3.7( Bootstrap 4 是預覽版)
下載
boostrap 在官網下載即可，這里使用版本v3.3.7 >>> 傳送門
下載好的文件是一個壓縮包，直接解壓即可。將文件復制到工程之中即可。
之后，只需要我們在html 文件中引用他們就可以了，除此之外，Bootstrap 的所有 JavaScript 插件都依賴 jQuery，因此 jQuery 也必須在 Bootstrap 之前引入：
<!-- Bootstrap -->
<link href="./public/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<script src="./public/jquery/jquery-3.2.1.min.js"></script>
<script src="./public/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
注：
之后，我們就可以使用 Boostrap 了。 注意，Bootstrap 使用到的某些 HTML 元素和 CSS 屬性需要將頁面設置為 HTML5 文檔類型,所以需要在每個頁面如下設置：
<!DOCTYPE html>
<html lang="zh-CN">
...
</html>
這里進入主題，主要介紹下 Bootstrap 中的 柵格系統。
柵格系統
Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統，隨著屏幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。它包含了易于使用的預定義類，還有強大的 mixin 用于生成更具語義的布局。
先看下示例：
 效果圖-平板.png
|
 小屏幕顯示.png
|
代碼如下：
<style type="text/css" media="screen">
.container,.container-fluid{
border-top: 2px solid #E1E1E8;
}
div{
border-left: 1px solid #E1E1E8;
border-right: 1px solid #E1E1E8;
border-bottom: 1px solid #E1E1E8;
}
</style>
<body>
<p>this is for test !</p>
<div class="container-fluid">
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
</div>
</body>
代碼解析：
- .如<div class="container-fluid">，<div class="row">，
<div class="">其中的 container-fluid，row，col-md-* 為 bootstrap 的預定義類，class聲明這些值后，會引用 bootstrap 中設置好的屬性。當然，我們也可以將他們改變成我們自己想要的樣式。 - 行（.row）必須包含在 .container （固定寬度）或 .container-fluid （100% 寬度）中，以便為其賦予合適的排列（aligment）和內補（padding）。
- 通過“行（row）”在水平方向創建一組“列（column）”。
- 內容應當放置于“列（column）”內，并且，只有“列（column）”可以作為“行（row）”的直接子元素。
- 類似 .row 和 .col-md-4 這種預定義的類，可以用來快速創建柵格布局。Bootstrap 源碼中定義的 mixin 也可以用來創建語義化的布局。
- 柵格系統中的列是通過指定1到12的值來表示其跨越的范圍。例如，三個等寬的列可以使用三個 .col-xs-4 來創建。
- 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素將被作為一個整體另起一行排列。
以下附錄官網有關 柵格系統的信息表格：
| 超小屏幕 手機 (<768px) | 小屏幕 平板 (≥768px) | 中等屏幕 桌面顯示器 (≥992px) | 大屏幕 大桌面顯示器 (≥1200px) | |
|---|---|---|---|---|
| 柵格系統行為 | 總是水平排列 | 開始是堆疊在一起的，當大于這些閾值時將變為水平排列C | ||
| .container 最大寬度 | None （自動） | 750px | 970px | 1170px |
| 類前綴 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| 列（column）數 | 12 | 12 | 12 | 12 |
| 最大列（column）寬 | 自動 | ~62px | ~81px | ~97px |
| 槽（gutter）寬 | 30px （每列左右均有 15px） | 30px （每列左右均有 15px） | 30px （每列左右均有 15px） | 30px （每列左右均有 15px） |
| 可嵌套 | 是 | 是 | 是 | 是 |
| 偏移（Offsets） | 是 | 是 | 是 | 是 |
| 列排序 | 是 | 是 | 是 | 是 |
實例
在不同設備上顯示—移動，平板電腦，桌面
代碼如下：
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>
效果圖：
效果圖-平板.png
|
 效果圖-移動.png
|
 效果圖-桌面.png
|
列偏移
使用 .col-md-offset-* 類可以將列向右側偏移。這些類實際是通過使用 * 選擇器為當前元素增加了左側的邊距（margin）。例如，.col-md-offset-4 類將 .col-md-4 元素向右側偏移了4個列（column）的寬度。
代碼：
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>
效果圖：
 效果圖-列偏移-小屏幕.png
|
 效果圖-列偏移-中等屏幕.png
|
嵌套列
為了使用內置的柵格系統將內容再次嵌套，可以通過添加一個新的 .row 元素和一系列 .col-sm-* 元素到已經存在的 .col-sm-* 元素內。被嵌套的行（row）所包含的列（column）的個數不能超過12（其實，沒有要求你必須占滿12列）。
 效果圖-嵌套.png
|
列排序
通過使用 .col-md-push-* 和 .col-md-pull-* 類就可以很容易的改變列（column）的順序。
代碼：
<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>
效果圖：
 效果圖-列排序-小屏幕.png
|
 效果圖-列排序-大屏幕.png
|
總結
以上為簡單使用 boostrap 的柵格系統。靈活使用柵格系統可以幫助我們很好的制作出適合不同屏幕的界面來。
除了以外， 柵格系統還支持 Less mixin 和變量 （暫時沒有用到，以后在更新）。
