1.基礎(chǔ)
BootStrap是全球最流行的前端框架，用于構(gòu)建響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的WEB站點(diǎn)。
可以通過(guò)官網(wǎng)：https://getbootstrap.com/，下載BootStrap以獲取編譯過(guò)的CSS和JS文件。
然后將下載的本地化文件引入HTML中，也可以使用CDN的方式引入。
Bootstrap 頁(yè)面的基本模板如下（來(lái)自于Bootstrap中文網(wǎng)）：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3個(gè)meta標(biāo)簽*必須*放在最前面，任何其他內(nèi)容都*必須*跟隨其后！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link rel="stylesheet">
<!-- HTML5 shim 和 Respond.js 是為了讓 IE8 支持 HTML5 元素和媒體查詢（media queries）功能 -->
<!-- 警告：通過(guò) file:// 協(xié)議（就是直接將 html 頁(yè)面拖拽到瀏覽器中）訪問(wèn)頁(yè)面時(shí) Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好，世界！</h1>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據(jù)需要只加載單個(gè)插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>
2.容器
BootStrap帶有三種不同的容器：
.container，它的 max-width在每個(gè)響應(yīng)斷點(diǎn)設(shè)置一個(gè)
.container-fluid，這是 width:100% 所有斷點(diǎn)
.container-{breakpoint}，width:100%直到指定的斷點(diǎn)為止
其中，.container-{breakpoint}又分為四種：
.container-sm，
.container-md，
.container-lg，
.container-xl，
每種容器的 max-width與屏幕斷點(diǎn)之間的對(duì)應(yīng)關(guān)系：
關(guān)系表測(cè)試代碼;
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<link rel="stylesheet" href="./BootStrap/bootstrap.min.css">
<script src="./BootStrap/jquery-1.12.4.min.js"></script>
<script src="./BootStrap/bootstrap.min.js"></script>
<style>
.testDiv{height: 50px;background-color: blue;}
</style>
</head>
<body>
//修改 div類名進(jìn)行逐一測(cè)試。
<div class="container-lg testDiv"></div>
<script>
//打印當(dāng)前窗口寬度。
console.log($(window).attr("innerWidth"));
</script>
</body>
</html>
3.布局
BootStrap提供了一套響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的流式網(wǎng)格系統(tǒng)，隨著屏幕或視口（viewport）尺寸的增減變化，
系統(tǒng)會(huì)自動(dòng)分為最多12列。
BootStrap的網(wǎng)格系統(tǒng)在各種屏幕和設(shè)備上的關(guān)系約定如下表：
BootStrap中的網(wǎng)格(柵格)系統(tǒng)被稱為布局，它通過(guò)一系列的行（row）與列（column）的組合創(chuàng)建頁(yè)面布局。
網(wǎng)格系統(tǒng)的實(shí)現(xiàn)原理非常簡(jiǎn)單，僅僅是通過(guò)定義容器大小，平分12等份，再調(diào)整內(nèi)外邊距，
最后結(jié)合媒體查詢，就制作出了強(qiáng)大的響應(yīng)式網(wǎng)格系統(tǒng)。
在使用的時(shí)候也可以根據(jù)實(shí)際情況重新編譯LESS/Sass源碼平分成24份或32份，但12份是最常見(jiàn)的，
Bootstrap框架中的網(wǎng)格系統(tǒng)就是將容器平分成12份。
示例代碼：
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<link rel="stylesheet" href="./BootStrap/bootstrap.min.css">
<script src="./BootStrap/jquery-1.12.4.min.js"></script>
<script src="./BootStrap/bootstrap.min.js"></script>
<style>
.row>[class^=col-]{
padding-top: .75rem;
padding-bottom: .75rem;
background-color: rgba(96,69,128,.25);
border: 1px solid rgba(255,11,12,.2);
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xl-3 col-lg-4 col-md-6 col-sm-12">四分之一</div>
<div class="col-xl-3 col-lg-4 col-md-6 col-sm-12">四分之一</div>
<div class="col-xl-3 col-lg-4 col-md-6 col-sm-12">四分之一</div>
<div class="col-xl-3 col-lg-4 col-md-6 col-sm-12">四分之一</div>
</div>
</div>
<script>
console.log($(window).attr("innerWidth"));
</script>
</body>
4.使用規(guī)則
① 數(shù)據(jù)行（.row）必須包含在容器（.container）中，便于設(shè)置合適的內(nèi)距(padding)和對(duì)齊方式(alignment)。
?、?nbsp;在行（.row）內(nèi)可以添加列（.column），但是列數(shù)之和不能超過(guò)平分的總列數(shù)，比如12。
③ 預(yù)定義的網(wǎng)格類，比如 .row、.col-sm-4，可用于快速創(chuàng)建網(wǎng)格布局，LESS混合類可用于更多語(yǔ)義布局。
?、?nbsp;具體內(nèi)容應(yīng)當(dāng)放置在列容器（column）內(nèi)，而且只有列（column）才可以作為行容器（.row）的直接子元素。
?、?nbsp;通過(guò)設(shè)置內(nèi)距（padding）定義列間距，第一列和最后一列設(shè)置“負(fù)值”的外距（margin）抵消內(nèi)距（padding）影響。
其他說(shuō)明;
BootStrap根據(jù)設(shè)備屏幕大小，查找對(duì)應(yīng)的類（參考前述布局關(guān)系表格），并使用它們的設(shè)置。
使用類名 “.col-”前綴時(shí)，表示所有屏幕都保持相同比例，即列（column）布局與屏幕大小無(wú)關(guān)。
類名不加任何后綴，僅為“.col”時(shí)表示完全等分，即行（row）內(nèi)所有列寬度相同。
對(duì)于等寬列，可以通過(guò)加入“<div class="w-100"></div>”這樣一個(gè)div元素將前后分行。
類名中規(guī)定占比和類名中設(shè)置自動(dòng)等分，兩種方式可以混合使用，如其中一塊內(nèi)容明確占比而其他不明確的情況下。
代碼示例;
<div class="container">
<div class="row">
<div class="col"></div>
<div class="col-7"></div>
<div class="col"></div>
</div>
</div>
5.BootStrap排版
?、?nbsp;text-muted，用于設(shè)置副標(biāo)題（淺灰色），配合<small>標(biāo)簽使用
示例：<h3>
H3 heading label
<small class="text-muted"> Secondary heading info </small>
</h3>
類似的文本情景顏色類：
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>
?、?nbsp;display-n，用于設(shè)置標(biāo)題字體大小，定義比<h1>更大的字體
示例：<h1 class="display-1"> text </h1>
?、?nbsp;內(nèi)聯(lián)文本元素
<mark>highlight</mark>，突出顯示標(biāo)簽
<del>text</del>，刪除標(biāo)簽
<u>text</u>，下劃線標(biāo)簽
<small>text</small>，將文本設(shè)置為父容器字體大小的85%
也可以通過(guò)給元素設(shè)置“.small”類，相當(dāng)于small元素
<strong></strong>，加粗字體
<em></em>，斜體字
… …
?、?nbsp;對(duì)齊方式
在 BootStrap中通過(guò)設(shè)置標(biāo)簽類，實(shí)現(xiàn)對(duì)齊操作，如下：
<p class="text-left">左對(duì)齊</p>
<p class="text-center">居中對(duì)齊</p>
<p class="text-right">右對(duì)齊</p>
<p class="text-justify">兩端對(duì)齊</p>
<p class="text-nowrap">不換行</p>
⑤ 字母大小寫(xiě)
<p class="text-lowercase">字母小寫(xiě)</p>
<p class="text-uppercase">字母大寫(xiě)</p>
<p class="text-capitalize">首字母大寫(xiě)</p>
?、?nbsp;其他
縮略語(yǔ)、地址、引用、… …
都是通過(guò)設(shè)置標(biāo)簽類名來(lái)引用BootStrap樣式的。
⑦ 列表
無(wú)序列表，<ul> <li>...</li> </ul>
有序列表，<ol> <li>...</li> </ol>
無(wú)樣式列表，<ul class="list-unstyled"> <li>...</li> </ul>
內(nèi)聯(lián)列表，<ul class="list-inline"> <li class="list-inline-item">…</li> </ul>
有描述短語(yǔ)列表：
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>
水平排列描述，
<dl class="dl-horizontal">
<dt>...</dt>
<dd>...</dd>
</dl>
6.代碼文本
① <code></code>，
標(biāo)簽用于包括內(nèi)聯(lián)樣式的代碼片段
示例：<code><section></code>
其中，“<”表示左尖號(hào)，“>”表示右尖號(hào)。
?、?nbsp;<kbd></kbd>，
用于標(biāo)記用戶通過(guò)鍵盤(pán)輸入的內(nèi)容
示例：<kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
可以多層嵌套，第一層增加背景顏色，第二層增強(qiáng)字體
?、?nbsp;<pre></pre>，
用于標(biāo)記代碼塊
示例：<pre><p>Sample text here...</p></pre>
?、?nbsp;<var></var>，
用于標(biāo)記變量
示例：<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
輸出值：y = mx + b
7.表格
?、?nbsp;設(shè)置表格基本樣式，給<table>標(biāo)簽添加“.table”類。
示例：<table class="table"> ... </table>
?、?nbsp;條紋狀表格，給<table>標(biāo)簽添加“.table-striped”類。
示例：<table class="table table-striped"> ... </table>
?、?nbsp;帶邊框表格，給<table>標(biāo)簽添加“.table-bordered”類。
示例：<table class="table table-bordered"> ... </table>
④ 懸停樣式表格，給<table>標(biāo)簽添加“.table-hover”類。
示例：<table class="table table-hover"> ... </table>
?、?nbsp;緊縮樣式表格，給<table>標(biāo)簽添加“.table-sm”類。
示例：<table class="table table-sm"> ... </table>
?、?nbsp;響應(yīng)式表格，將<table>標(biāo)簽包裹在類名為“.table-responsive”的<table>內(nèi)，即可創(chuàng)建響應(yīng)式表格。
示例：<table class="table-responsive"> <table class="table"> ... </table> </table>
<table class="table table-sm table-hover table-bordered">
<!-- 定義表頭背景顏色類 -->
<thead class="thead-dark">
<tr>
<th scope="col">#</th>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
<th scope="col">Username</th>
</tr>
</thead>
<tbody>
<!-- 定義行頭部背景顏色類 -->
<tr class="thead-light">
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr class="thead-light">
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr class="thead-light">
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
補(bǔ)充：
?、?nbsp;HTML表格有兩種單元格類型：
表頭單元格，包含頭部信息，由<th>標(biāo)簽創(chuàng)建（元素中的文本通常呈現(xiàn)為粗體并且居中）
標(biāo)準(zhǔn)單元格，包含表體數(shù)據(jù)，由<td>標(biāo)簽創(chuàng)建（元素中的文本通常是普通的左對(duì)齊文本）
?、?nbsp;colspan屬性用于定義跨列（合并列）操作，語(yǔ)法：colspan="num"
rowspan屬性用于定義跨行（合并行）操作，語(yǔ)法：rowspan="num"
?、?nbsp;scope屬性用于定義表頭單元格為行、列或行組、列組的頭部，
<th scope="col">，表示單元格是列的表頭
<th scope="row">，表示單元格是行的表頭
<th scope="colgroup">，表示單元格是列組的表頭
<th scope="rowgroup">，表示單元格是行組的表頭
8.圖片
?、?“.img-fluid”類，用于設(shè)置圖片支持響應(yīng)式布局
示例：<img src="..." class="img-fluid" alt="">
?、?nbsp;圖片形狀類
.img-rounded，圓角圖片
.img-circle，圓形圖片
.img-thumbnail，圓角邊框圖片
?、?nbsp;圖片對(duì)齊方式
.float-left，左對(duì)齊
.float-right，右對(duì)齊
.mx-auto，自動(dòng)對(duì)齊（圖片的margin屬性設(shè)置為auto），可配合“.d-block”類設(shè)置圖片居中顯示
.d-block，將“display”屬性設(shè)置為“block”
代碼示例：
<img src="./Images/stair.jpg" class="img-fluid float-right img-thumbnail rounded-circle size" alt="...">
?、?圖文混合，通過(guò)<figure>標(biāo)簽實(shí)現(xiàn)“圖片加文字備注”的效果，示例如下：
<figure class="figure">
<img src="./Images/stair.jpg" class="img-fluid img-thumbnail rounded-circle" alt="...">
<figcaption class="figure-caption text-center">A caption for the above image.</figcaption>
</figure>
<figure> 標(biāo)簽通常用于規(guī)定獨(dú)立的流內(nèi)容（圖像、圖表、照片、代碼等等）。
<figure> 元素的位置相對(duì)于主內(nèi)容是獨(dú)立的。如果被刪除，則不應(yīng)對(duì)文檔流產(chǎn)生影響。
<figure> 元素可以通過(guò)在其中插入 <figcaption> 元素（作為第一個(gè)或最后一個(gè)子項(xiàng)）用于定義標(biāo)題。
<figcaption> 元素中可以通過(guò)“.text-align”類定義標(biāo)題文字對(duì)齊方式。
ps：“.clearfix”類，用于清除浮動(dòng)樣式，相當(dāng)于“{clear : both;}”的css樣式。
9.flex
主要彈性盒樣式：
?、?.d-flex，創(chuàng)建彈性盒容器
?、?.d-inline-flex，定義行內(nèi)彈性盒容器
?、?nbsp;.flex-row，定義彈性子元素水平方向?qū)R，默認(rèn)樣式
⑷ .flex-row-reverse，定義子元素水平右對(duì)齊倒序顯示，與 .flex-row相反
?、?nbsp;.flex-column、.flex-row-reverse，定義子元素垂直方向排列、垂直方向倒序排列
?、?nbsp;內(nèi)容水平對(duì)齊：
?、?nbsp;.justify-content-*-start，左對(duì)齊
?、?nbsp;.justify-content-*-end，右對(duì)齊
③ .justify-content-*-center，居中對(duì)齊
?、?nbsp;.justify-content-*-between，兩端對(duì)齊
?、?nbsp;.justify-content-*-around，等邊距對(duì)齊
?、?nbsp;內(nèi)容垂直排列：
① .align-content-*-start，頂端排列
② .align-content-*-end，底端排列
?、?nbsp;.align-content-*-center，居中排列
④ .align-content-*-stretch，兩端排列
⑤ .align-content-*-around，等邊距排列
注意，以上樣式中“ * ”位置可以設(shè)置屏幕尺寸 sm、md、lg、xl（可選），
不同設(shè)備根據(jù)設(shè)置適應(yīng)排列對(duì)齊樣式；
其他彈性盒樣式也可以添加屏幕尺寸，從而實(shí)現(xiàn)響應(yīng)式布局。
參考資料來(lái)源：BootStrap中文網(wǎng)（https://v3.bootcss.com/）
聯(lián)系客服
