Introduction
什么是 Bootstrap蚣旱？
Bootstrap 是一個用于快速開發(fā) Web 應用程序和網(wǎng)站的前端框架果复。Bootstrap 是基于 HTML叙淌、CSS互亮、JAVASCRIPT 的文件慢宗。
為什么使用 Bootstrap坪蚁？
- 移動設備優(yōu)先：自 Bootstrap 3 起奔穿，框架包含了貫穿于整個庫的移動設備優(yōu)先的樣式。
- 瀏覽器支持：所有的主流瀏覽器都支持 Bootstrap迅细。
- 容易上手：只要您具備 HTML 和 CSS 的基礎知識巫橄，您就可以開始學習 Bootstrap。
- 響應式設計：Bootstrap 的響應式 CSS 能夠自適應于臺式機茵典、平板電腦和手機湘换。更多有關響應式設計的內(nèi)容詳見 Bootstrap 響應式設計。
- 它為開發(fā)人員創(chuàng)建接口提供了一個簡潔統(tǒng)一的解決方案统阿。
- 它包含了功能強大的內(nèi)置組件彩倚，易于定制。
- 它還提供了基于 Web 的定制扶平。
- 它是開源的（遵循MIT3.0）
Bootstrap 包的內(nèi)容
基本結(jié)構(gòu)：Bootstrap 提供了一個帶有網(wǎng)格系統(tǒng)帆离、鏈接樣式、背景的基本結(jié)構(gòu)结澄。這將在 Bootstrap 基本結(jié)構(gòu) 部分詳細講解哥谷。
- CSS：Bootstrap 自帶以下特性：全局的 CSS 設置、定義基本的 HTML 元素樣式麻献、可擴展的 class们妥，以及一個先進的網(wǎng)格系統(tǒng)。這將在 Bootstrap CSS 部分詳細講解勉吻。
- 組件：Bootstrap 包含了十幾個可重用的組件监婶，用于創(chuàng)建圖像、下拉菜單齿桃、導航惑惶、警告框、彈出框等等短纵。這將在 布局組件 部分詳細講解带污。
- JavaScript 插件：Bootstrap 包含了十幾個自定義的 jQuery 插件。您可以直接包含所有的插件香到，也可以逐個包含這些插件鱼冀。這將在 Bootstrap 插件 部分詳細講解。
- 定制：您可以定制 Bootstrap 的組件养渴、LESS 變量和 jQuery 插件來得到您自己的版本雷绢。
ref：http://www.runoob.com/bootstrap/bootstrap-intro.html
Installation
官方網(wǎng)站下載：https://getbootstrap.com
網(wǎng)站提供了兩種下載文件形式
-
Compile File：適用于網(wǎng)站運營階段，不含注釋信息和源代碼文件
Compile File 官網(wǎng)描述 - Source File：較Compile File有更多的注釋理卑，文檔代碼可讀性高翘紊，適合用于開發(fā)過程使用
此外，Bootstrap還提供了在線CDN訪問方式：
Bootstrap CDN引用方式
<link rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
當使用Bootstrap中JS組件時藐唠，需要加載依賴文件jQuery和Popper.js
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
ref: https://getbootstrap.com/docs/4.2/getting-started/download/
國內(nèi)用戶可以使用此CDN提高訪問速度
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet">
<!-- jQuery文件帆疟。務必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
HTML 5 文檔類型（Doctype）
Bootstrap 使用了一些 HTML5 元素和 CSS 屬性鹉究。為了讓這些正常工作，您需要使用 HTML5 文檔類型（Doctype）踪宠。 因此自赔，請在使用 Bootstrap 項目的開頭包含下面的代碼段。
<!DOCTYPE html>
<html>
....
</html>
如果在 Bootstrap 創(chuàng)建的網(wǎng)頁開頭不使用 HTML5 的文檔類型（Doctype）柳琢，您可能會面臨一些瀏覽器顯示不一致的問題绍妨，甚至可能面臨一些特定情境下的不一致，以致于您的代碼不能通過 W3C 標準的驗證柬脸。
Bootstrap 瀏覽器/設備支持
Bootstrap 可以在最新的桌面系統(tǒng)和移動端瀏覽器中很好的工作他去。
舊的瀏覽器可能無法很好的支持。
下表為 Bootstrap 支持最新版本的瀏覽器和平臺：
| Chrome | Firefox | IE | Opera | Safari | |
|---|---|---|---|---|---|
| Android | YES | YES | 不適用 | 不適用 | 不適用 |
| iOS | YES | 不適用 | 不適用 | 不適用 | YES |
| Mac OS X | YES | YES | 不適用 | YES | YES |
| Windows | YES | YES | YES | *YES | 不適用 |
*Bootstrap 支持 Internet Explorer 8 及更高版本的 IE 瀏覽器倒堕。
Bootstrap 網(wǎng)格系統(tǒng)
Bootstrap 的網(wǎng)格系統(tǒng)（Grid System）灾测。
Bootstrap 提供了一套響應式、移動設備優(yōu)先的流式網(wǎng)格系統(tǒng)垦巴，隨著屏幕或視口（viewport）尺寸的增加媳搪，系統(tǒng)會自動分為最多12列。
什么是 Bootstrap 網(wǎng)格系統(tǒng)（Grid System）骤宣？
Bootstrap 包含了一個響應式的秦爆、移動設備優(yōu)先的、不固定的網(wǎng)格系統(tǒng)涯雅，可以隨著設備或視口大小的增加而適當?shù)財U展到 12 列鲜结。它包含了用于簡單的布局選項的預定義類展运，也包含了用于生成更多語義布局的功能強大的混合類活逆。
響應式網(wǎng)格系統(tǒng)隨著屏幕或視口（viewport）尺寸的增加，系統(tǒng)會自動分為最多12列拗胜。
網(wǎng)格選項
下表總結(jié) Bootstrap 網(wǎng)格系統(tǒng)如何跨多個設備工作：
| 超小設備手機（<768px） | 小型設備平板電腦（≥768px） | 中型設備臺式電腦（≥992px） | 大型設備臺式電腦（≥1200px） | |
|---|---|---|---|---|
| 網(wǎng)格行為 | 一直是水平的 | 以折疊開始蔗候，斷點以上是水平的 | 以折疊開始，斷點以上是水平的 | 以折疊開始埂软，斷點以上是水平的 |
| 最大容器寬度 | None (auto) | 750px | 970px | 1170px |
| Class 前綴 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| 列數(shù)量和 | 12 | 12 | 12 | 12 |
| 最大列寬 | Auto | 60px | 78px | 95px |
| 間隙寬度 | 30px （一個列的每邊分別 15px） | 30px （一個列的每邊分別 15px） | 30px （一個列的每邊分別 15px） | 30px （一個列的每邊分別 15px） |
| 可嵌套 | Yes | Yes | Yes | Yes |
| 偏移量 | Yes | Yes | Yes | Yes |
| 列排序 | Yes | Yes | Yes | Yes |
基本的網(wǎng)格結(jié)構(gòu)
下面是 Bootstrap 網(wǎng)格的基本結(jié)構(gòu)：
<div class="container">
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">...</div>
</div>
<div class="container">....
