Bootstrap應用核心

 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中文網繼續學習。