Bootstrap是當前世界最受歡迎的響應式、移動設備優先的門戶和應用前端框架。它不是單一的CSS或JavaScript框架，而是完整的HTML、CSS、JavaScript框架，你可以僅通過Bootstrap簡單、快速的開發移動設備優先的響應式布局頁面和應用。
一 Bootstrap簡介
1，bootstrap文件目錄
你可以在Bootstrap官網，下載不同版本的文件包，現在最新的版本是4.3.x。解壓文件后有兩個子文件夾，CSS和JS，他們的目錄如下：
所有文件都有普通版和壓縮版。.min的即是壓縮版，去除了空白字符等，使文件更小。.map是Source map文件，需要特定的工具才可以使用。關於Source map文件詳細情況可以參考這里阮一峰博客。或戳這里。
bootstrap.css是Bootstrap的核心CSS文件，一般根據需要選擇bootstrap.css或bootstrap.min.css即可。bootstrap-grid.css是Bootstrap提供的單獨使用其柵格系統的CSS文件。bootstrap.reboot.css則僅做引導（初始化）文件使用。核心CSS文件包含了grid和reboot文件。
bootstrap.js是Bootstrap提供的核心JS文件，而bootstrap.bundle.js與bootstrap.js相比，新增了Pooper.js，根據需要選擇你需要的JS文件即可。pooper.js主要用於元素定位，詳情可以查看https://popper.js.org/。
2，文件引入
你可以通過兩種方式引入bootstrap框架，本地和CDN。
CSS引入如下所示：
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- 為了實現移動設備優先，你應該有以上meta標簽 --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
JS引入：
1 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
2 <!-- bootstrap依然基於jQuery，並不是像前兩年網上有些人吹的那樣，bootstrap將放棄jQuery。所以你必須優先引入jQuery -->
3 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
4 <!-- popper.js單獨引入 -->
5 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
6 <!-- bootstrap.js單獨引入 -->
3，初始化CSS
Bootstrap盡量使用rem為單位，以獲得不同尺寸屏幕上都能夠獲得更好的顯示比例。
Bootstrap移除了大多數元素的margin-top屬性，減少margin折疊（塌陷）。
Bootstrap把所有元素的box-sizing屬性都設置為border-box，防止padding和border使盒子變形。
Bootstrap把html元素的font-size重置為16px，body設置為1rem，其他元素盡量使用inherit值繼承font-size屬性。
Bootstrap把標題的margin-bottom重置為0.5rem，段落的margin-bottom重置為1rem。
Bootstrap使用用戶系統自帶的字體，而不是硬性規定。
4，瀏覽器兼容性
Bootstrap支持所有主流瀏覽器的較新版，包括使用WebKit，Blink或Gecko內核的第三方瀏覽器（比如360，世界之窗，QQ瀏覽器等）。
對於IE瀏覽器，很遺憾，官方推薦使用IE10及之后的版本。如果你希望在IE10以前的版本上運行Bootstrap開發的網頁或應用，那么你可能需要使用Bootstrap 3.x或以前版本。
二 柵格系統
Bootstratp把網頁划分成一個個網格，每一行有12列，根據需要可以設置多行。在一行中，通過flex布局實現每一列占用的空間自適應。通過Bootstrap提供的柵格系統，我們可以輕松滿足各種形狀和尺寸的布局。
1，啟用柵格系統
Bootstrap通過.container或.container-fluid類啟用bootstrap的柵格系統，該類通常添加在第一祖先元素上，理論上.container可以相互嵌套，但不建議這么做。.container設置元素左右有固定的15px padding，左右自適應margin，從而居中顯示元素。
1 <div class="container"></div>
2 <!-- 啟用柵格系統就這么簡單 -->
與之對應的.container-fluid類則使用100%，盡量占滿其父元素內的可用寬度，用的較少。
1 <div class="container-fluid"></div>
2，行與列
Bootstrap通過.row來新增一行，.row采用最新的flex布局。同一行中你可以添加最多12列，.col-*表示一列，每一列在水平方向上都有30px padding，並且都使用百分比定義寬度，所以它們總是流式的呈現，並隨父元素寬度的變化而變化。
1 <div class="container">
2 <div class="row">
3 <div class="col-*"></div>
4 </div>
5 </div>
請注意，在柵格系統中，只有.col-*是合法的.row的直接子元素，.row的直接子元素不能是其他任何內容，否則可能會破壞整個柵格系統，帶來意想不到的結果。
你可以直接用1 -- 12 的數字代替.col-*后面的星號，表示希望該列占用的寬度。如果你想讓每一列均分寬度，你可以直接設置.col，或設置相同的數字（12除以列數）。
1 <div class="container">
2 <div class="row">
3 <div class="col-8">我大概占66.7%</div>
4 <div class="col-4">我大概占33.3%</div>
5 </div>
6 </div>
如果每一行中列的數字之和大於12，那么超出的部分將換行，你雖然可以在換行的位置插入一個.w-100實現多行，但我們不建議這樣做。如果確實需要換行，建議新增一個.row。
1 <div class="row">
2 <div class="col-8">col</div>
3 <div class="w-100"></div>
4 <div class="col-8">col</div>
5 </div>
3，屏幕斷點
Bootstrap為了適應不同尺寸的屏幕，利用CSS媒體查詢功能，對不同尺寸的屏幕做了斷點設置。其中前綴xl代表超大屏幕（大屏），lg代表大屏幕（普通顯示器），md代表中等屏幕（較小顯示器），sm代表小屏幕（pad），無前綴則代表超小屏幕（手機）。
| 超小屏幕 (新增規格)<576px |
小屏幕 次小屏≥576px |
中等屏幕 窄屏≥768px |
大屏幕 桌面顯示器≥992px |
超大屏幕 大桌面顯示器≥1200px |
|
|---|---|---|---|---|---|
.container 最大寬度 |
None (auto) | 540px | 720px | 960px | 1140px |
| 類前綴 | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
bootstrap斷點的特點是：如果把列的寬度設置在某一斷點上，那么屏幕寬度大於或等於該斷點值的設備都會被應用該設置，而小於該斷點值的設備將不會被應用。根據這個特點，我們可以只定義一個屏幕尺寸，即可以向上覆蓋所有尺寸的設備。
1 <div class="row">
2 <div class="col">col</div>
3 <div class="col">col</div>
4 </div>
5 <div class="row">
6 <div class="col-8">col-8</div>
7 <div class="col-4">col-4</div>
8 </div>
4，混合使用屏幕斷點
如果你想讓同一個網頁在不同尺寸的設備上有不同的表現，那么你可以混合使用bootstrap的屏幕斷點。
1 <div class="row">
2 <div class="col-12 col-md-8"></div>
3 <div class="col-6 col-md-4"></div>
4 <!-- 在超小屏幕上一列全寬，一列半寬，其他尺寸則以8：4的比例呈現 -->
5 </div>
5，對齊
在.row行上使用.align-items-*可以方便的控制行在容器內的垂直方向上的對齊方式。在.col-*列上使用.align-self-*控制列在水平方向上的對齊方式。
1 <div class="container">
2 <div class="row align-items-start">
3 <div class="col align-self-start">
4 第一列 5 </div>
6 <div class="col align-self-center">
7 第二列 8 </div>
9 <div class="col align-self-end">
10 第三列 11 </div>
12 </div>
13 <!-- align-items-start：上對齊；align-items-center：中對齊；align-items-end：下對齊 -->
14 <!-- align-self-start：左對齊；align-self-center：居中對齊；align-self-end：右對齊>
由於Bootstrap柵格系統基於flex實現，所以你還可以在.row行上使用justify-content-*來規定.col-*列在水平方向上的對齊方式（justify-content實際是flex布局中使用的屬性，用來規定內容塊在主軸方向的分布）。flex布局請戳這里《CSS定位與布局》4.4。
1 <div class="container">
2 <div class="row justify-content-start">
3 <div class="row justify-content-center">
4 <div class="row justify-content-end">
5 <div class="row justify-content-around">
6 <div class="row justify-content-between">
7 </div>
8 <!-- 他們依次表示左對齊，居中，右對齊，內容塊間隔相等，兩端對齊 -->
6，清除間隙
我們知道，bootstrap的行和列水平方向上都有30px的padding值，如果你不希望它存在，bootstrap提供了.no-gutters類。
1 <div class="container no-gutters">
2 <div class="row">
3 <div class="col"></div>
4 </div>
5 </div>
6 <!-- 放在.container上清楚行和列的padding，放在.row上則只清楚列的padding -->
7，列的重排序
默認狀況下，列會根據代碼編寫順序依次呈現，基於flex，bootstrap提供了.order-*來自定義顯示順序，星號可以是1 -- 12的數字，數字越小，顯示優先級越高。
1 <div class="container">
2 <div class="row">
3 <div class="col">
4 未定義序號，位置不變。 5 </div>
6 <div class="col order-12">
7 12號排最后。 8 </div>
9 <div class="col order-1">
10 1號排在12號之前 11 </div>
12 </div>
13 </div>
14 <!-- 重排序的元素只能在他們之間確立優先級，而不能影響為重排序的元素 -->
如果你臨時起意，在行的末尾新增了一列，又想讓它優先顯示，那么你可以使用.order-first。
三 CSS基礎樣式
Bootstrap初始化了很多CSS樣式，使我們擁有了一個簡潔的、優雅的頁面基礎。基本的HTML元素均通過添加class設置樣式並得到增強效果；還有先進的柵格系統用於頁面布局。
1，標題和段落
Bootstrap重新定義了基本的全局顯示、排版、以及鏈接樣式。
首先是標題，你可以直接使用新的h1 -- h6標簽，或給標題標簽設置.display-1 -- .display-4類，以獲取更大的顯示效果。也可以使用.h1 -- .h6 class屬性呈現標題樣式。當然，那樣並不符合web語義化規范。
1 <h1 class="display-2">
2 我是 bootstrap h1 3 <small class="text-muted">我是副標題</small>
4 </h1>
5 <p class="h1">我是擁有bootstrap h1 樣式的p</p>
你還可以通過small標簽來添加副標題，通過添加.text-muted類讓副標題的顏色更淺一點。
其次是段落，你可以通過.lead樣式來突出顯示部分內容。.text-right或。text-center設置文本右對齊或居中。.text-truncate可以在文本容器寬度不足時顯示省略號。
1 <p class="lead text-right text-truncate">我很重要我很重要。。。（很多內容）</p>
對footer使用.blockquote-footer來獲得更好的引用備注效果。
1 <blockquote class="blockquote">
2 <p>愛上一個地方，就應該背上包去旅游，走得更遠。</p>
3 <footer class="blockquote-footer">出自商務印書館的 <cite title="Source Title">《新華字典》</cite></footer>
4 </blockquote>
.list-inline清除列表樣式和左邊距，.list-inline-item則把列表元素設置為行類塊級元素。配合使用可以使列表橫向展示。
1 <ul class="list-inline">
2 <li class="list-inline-item">列表一</li>
3 <li class="list-inline-item">列表二</li>
4 <li class="list-inline-item">列表三</li>
5 </ul>
2，圖片和表格
Bootstrap通過.img-fluid實現圖片響應式特征，圖片大小會隨着父元素大小同步縮放。使用.img-thumbnail裝飾圖片，實現縮略圖效果，實際就是加了個邊框和一點padding。
1 <img src="url" alt="..." class=" img-fluid img-thumbnail">
Bootstrap通過.table重新定義了表格的基本樣式，你可以通過.table-dark來實現表格背景和文字顏色的反轉效果。通過.table-striped實現條紋狀表格。
1 <table class="table table-dark table-striped">
2 </table>
如果只是想對表頭做一些改變，那么你可以使用.thead-light或.thead-dark讓表頭背景呈現淺黑色或深灰色。
1 <table class="table">
2 <thead class="thead-linght">
3 </thead>
4 </table>
另外，你還可以通過.table-bordered或.table-borderless來設置或取消表格的邊框。通過.table-hover產生鼠標懸停效果。
1 1 <table class="table table-bordered table-hover">
2 2 </table>
3，文本
使用text-*的方式規定文本對齊方式，星號的取值可以是任意text-align屬性的可選值。另外，你還可以通過text-sm-*、text-lg-*等來創建響應式的字體對齊方式。
1 <p class="text-right">右對齊</p>
2 <p class="text-sm-left">在sm及以上的屏幕顯示為左對齊</p>
另外，你可以在文本上應用的樣式有：.text-wrap（可換行），.text-nowrap（不可換行），.text-truncate（超出文本顯示省略號），.text-lowercase（轉換為小寫），.text-uppercase（轉換為大寫），.text-capitalize（單詞首字大寫），.text-decoration-none（清楚裝飾）等等。
4，顏色
Bootstrap通過主題顏色來傳達一些信息，包括元素的不同狀態。
1 <p><a href="#" class="text-primary">重要的</a></p>
2 <p><a href="#" class="text-secondary">次要的</a></p>
3 <p><a href="#" class="text-success">成功的</a></p>
4 <p><a href="#" class="text-danger">危險的</a></p>
5 <p><a href="#" class="text-warning">警告的</a></p>
6 <p><a href="#" class="text-info">信號的</a></p>
7 <p><a href="#" class="text-light bg-dark">高亮的</a></p>
8 <p><a href="#" class="text-dark">暗沉的</a></p>
9 <p><a href="#" class="text-muted">暗淡的</a></p>
10 <p><a href="#" class="text-white bg-dark">白色的</a></p>
同樣的，背景顏色也是類似的通過主題顏色在不同的場景傳遞不同的信息。不過背景顏色是通過bg-*d的方式。
5，顯示模式
Bootstrap通過.d-*的方式制定元素顯示模式。通過.d-none隱藏元素。
1 <div class="d-inline">我變成行內元素了</div>
2 <div class="d-none">我被隱藏了</div>
3 <!-- 星號的取值可以是：inline，inline-block，block，table，table-cell，table-row，flex，inline-flex -->
同時你也可以指定響應式的顯示模式。
1 <div class=".d-sm-none .d-md-block">在sm屏幕上隱藏，其他的都顯示</div>
2 <div class=".d-block .d-sm-none">只在xs屏幕上可見</div>
6，浮動與清除
Bootstrap通過.float-*來設置元素浮動，你當然也可以通過.float-*-*來指定響應式的浮動規則。
1 <div class="float-sm-left">在sm屏幕上左浮動</div><br>
2 <div class="float-md-left">在md屏幕上左浮動</div>
清楚浮動bootstrap只提供了一種方式.clearfix：通過偽元素實現清除浮動。
1 <div class="clearfix">
2 <div class="float-left">左浮動</div>
3 </div>
四 功能組件
Bootstrap提供了無數可以復用的組件，包括字體圖標、下拉菜單、導航、警告條、彈出框等更多功能。
1，警告提示
警告框組件通過提供一些靈活的預定義消息，為常見的用戶動作提供常見的上下反饋消息和提示。首先你應該指定元素的.alert類，然后再根據警報種類（主題）選擇合適的顏色控件。
1 <div class="alert alert-primary"></div>
2 <div class="alert alert-secondary"></div>
3 <div class="alert alert-success"></div>
4 <div class="alert alert-danger"></div>
5 <div class="alert alert-warning"></div>
6 <div class="alert alert-info"></div>
7 <div class="alert alert-light"></div>
8 <div class="alert alert-dark"></div>
9 <!-- 警報實際上是一組顏色控件，共八種-->
2，標識
Bootstrap通過.badge來實現標識信息，標識也可以通過.badge-*來指出特定的主題信息。
1 <h1>用於標題<span class="badge badge-pramiry">New</span></h1>
2 <button>用於按鈕 <span class="badge badge-secondary">2</span></button>
3 <a>用於鏈接<span class="badge badge-warning"></span></a>
你還可以通過.badge-pill獲得更大的圓角，這會使元素看起來像橢圓形的。
3，痕跡導航
在通過BootStrap的內置CSS樣式，自動添加分隔符、並呈現導航層次和網頁結構結構，從而指示當前頁面的位置為用戶提供優秀用戶體驗。
1 <nav>
2 <ol class="breadcrumb">
3 <li class="breadcrumb-item"><a href="#">Home</a></li>
4 <li class="breadcrumb-item active" aria-current="page">Library</li>
5 </ol>
6 </nav>
7 <!-- 通過.breadcrumb設置導航欄， .breadcrumb-item設置子選項，.active設置當前活動選項-->
4，按鈕
Bootstrap自定義了按鈕樣式，並廣泛用於表單、對話框等場景中的操作，並支持多種大小和狀態。Bootstrap包括多個預定義的按鈕樣式，每個樣式都有自己的語義目的。
1 <button type="button" class="btn btn-primary">Primary</button>
2 <button type="button" class="btn btn-secondary">Secondary</button>
3 <button type="button" class="btn btn-success">Success</button>
4 <button type="button" class="btn btn-danger">Danger</button>
5 ...
<!-- 你也可以在input標簽上應用這些樣式 -->
如果你不喜歡帶有背景顏色的按鈕，你可以使用.btn-outline-*來構建輪廓按鈕（只有一個帶圓角的邊框）。
1 <button type="button" class="btn btn-outline-primary">Primary</button>
2 <button type="button" class="btn btn-outline-secondary">Secondary</button>
3 <button type="button" class="btn btn-outline-success">Success</button>
4 <button type="button" class="btn btn-outline-danger">Danger</button>
5 ...
此外，你還可以通過.btn-lg、.btn-sm來創建更大或更小的按鈕，disabled屬性或.active類來定義按鈕是禁用狀態或啟用狀態。
5，下拉菜單
下拉菜單是網頁開發經常永達ode一個組件，通過bootstrap即可輕松實現。
1 <div class="dropdown">
2 <button class="btn btn-success btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
3 下拉按鈕 4 </button>
5 <div class="dropdown-menu">
6 <h6 class="dropdown-header">HTML</h6>
7 <a class="dropdown-item active" href="#">CSS</a>
8 <a class="dropdown-item" disabled href="#">JavaScript</a>
9 <div class="dropdown-divider"></div>
10 <a class="dropdown-item" href="#">其他</a>
11 </div>
12 </div>
通過.drop*創建一個下拉菜單，*是一個方位名詞，可以是top，down，left，right其中一個，表示菜單將出現在什么方位。按鈕上你可以通過.btn-*來設置按鈕大小、主題顏色等，dropdown-toggle生成一個三角形小圖標。使用下拉菜單時，data-toggle="dropdown"是必須的屬性。
通過.dropdown-menu設置菜單，.dropdown-header設置菜單標題，.dropdown-item設置菜單項，.dropdown-divider創建分割線。
6，進度條
Bootstrap進度條沒有使用HTML5的<progress>實現，而是通過兩個div和一些類實現。
1 <div class="progress">
2 <div class="progress-bar progress-bar-striped" style="width:20%">20%</div>
3 </div>
通過.progress創建進度條的底，.progress-bar表示當前進度，style設置當前進度值。你還可以通過。.progress-bar-striped給當前進度添加條紋樣式，如果你在當前進度div中添加了文本，那么它將展示在進度條上。
如果你不需要這些復雜的玩意兒，那么使用HTML5的<progress>標簽或許才是更好的選擇。
8，加載特效
bootstrap實現了兩種加載特效，圓形旋轉和圓形漸變氣泡。
1 <div class="spinner-border spinner-border-lg text-success" role="status">
2 <span class="sr-only">Loading...</span>
3 </div>
4 <button>
5 <div class="spinner-grow spinner-grow-sm text-danger" role="status">
6 <span class="sr-only"></span>
7 </div>
8 loading... 9 </button>
圓形旋轉特效通過.spinner-border創建邊框和動畫效果，.spinner-border-*設置大小，.text-*設置主題顏色。
圓形漸變氣泡通過spinner-grow創建，其余和旋轉一樣。
9，其他
更多可復用的組件，由於篇幅有限，請查看官方文檔。
五 Jquery插件
Bootstrap自帶了許多jQuery插件，這極大的豐富了bootstrap的功能，所以如果你需要用到這些插件，並不需要額外的代碼，直接引入bootstrap.min.js即可。
Bootstrap許多插件都可以通過HTML標簽的data-*屬性觸發，這也應該是你首選的方式。另外，Bootstrap也提供了僅使用JavaScript（實際是通過jQuery）來使用插件的方式。
雖然Bootstrap提供了許多JS插件和CSS組件，但實際工作中可能用的並不多，個人認為Bootstrap的核心和優勢完全在於其柵格系統，其他的作簡單了解即可。
寫在最后：一般，公司開發不太可能只依賴Bootstrap或其他某一單一庫或框架，即使它功能非常強大。實際開發過程中，遇到的可能UI，數據，交互等都采用更有針對性的庫或框架，稍有實力的公司甚至有自己內部開發的專用框架。所以，很遺憾，這里沒有繼續講解更多關於bootstrap組件庫的信息。如果你確實有興趣或正在使用，請移步Bootstrap中文網繼續學習。