Bootstrap應用核心
- 2019 年 10 月 28 日
- 筆記
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中文網繼續學習。
