1.Dropdown下拉按鈕
⑴ 基本樣式
外層容器div，class="dropdown"
button元素，在一般按鈕的基礎上增加“.dropdown-toggle”類和 data-toggle="dropdown"屬性、“id”
“.btn-secondary”樣式也可以改換成其他類，如“.btn-success”……
下拉菜單，class="dropdown-menu"
下拉選項，class="dropdown-item"，可以用<a>，也可以是<span>、<button>、<h*>等元素
下拉選項之間可以插入分隔，<div class="dropdown-divider"></div>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
⑵ 分裂按鈕
本質是將基本樣式中的按鈕與下拉菜單分開為兩個按鈕，
因此，分裂按鈕是一個按鈕組，其中一個是普通按鈕，另一個是下拉按鈕。
設置按鈕大小、外觀樣式，需要針對普通按鈕和下拉按鈕分別設置。
與基本樣式不同的是，下拉按鈕需要增加“.dropdown-toggle-split”類。
<div class="btn-group">
<!-- 普通按鈕 -->
<button type="button" class="btn btn-danger">Action</button>
<!-- 下拉按鈕 -->
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<!-- 下拉菜單 -->
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<!-- 下拉選項分隔 -->
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
⑶ 菜單方向
按鈕菜單除了下拉也可以向上、向右、向左。
下拉菜單使用的是class="dropdown"/"btn-group"，
但其他三個方向都必須使用".btn-group"和特定方向類。
dropup，向上
dropright，向右
dropleft，向左
而且，特定方向類只需要設置".btn-group"容器即可，其他內部元素樣式與下拉按鈕相同。
⑷ 菜單選項
".dropdown-header"，用於設置菜單選項表頭，將其賦予<h*>元素
".dropdown-item-text"類，用於將菜單選項定義為文本格式，可以使用<span>元素
".active"類，用於設置菜單活動選項
".disable"類，禁用菜單選項
純文本形式的菜單內容，示例如下：
<div class="dropdown-menu p-4 text-muted" style="max-width: 200px;">
<p>
Some example text that's free-flowing within the dropdown menu.
</p>
<p class="mb-0">
And this is more example text.
</p>
</div>
另外，form表單也可以作為菜單的內容呈現。
⑸ 菜單容器
".dropdown-menu-right"，賦予菜單容器，定義菜單右對齊
響應式對齊，即符合某個條件時采用指定對齊方式，需設置<button>屬性 data-display="static"，
同時，設置dropdown菜單容器特定樣式類，如“.dropdown-menu-lg-right”或者
".dropdown-menu-right"和“.dropdown-menu-lg-left”。
⑹ 菜單事件
show.bs.dropdown
shown.bs.dropdown
hide.bs.dropdown
hidden.bs.dropdown
調用示例：
$('#myDropdown').on('show.bs.dropdown', function () {
// do something...
})
2.Form表單
除普通表單外，可以給<form>元素添加“.form-inline”定義行內表單。
每一對<label><input>標簽都被一個“.form-group”類的div包裹。
input元素的 class樣式為“.form-control”，可以添加通過“.form-control-sm/lg”定義 form控件大小。
input元素中添加“readonly”屬性，定義只讀文本，
將“.form-control”替換為“.form-control-plaintext”去掉邊框背景等樣式
input type="checkbox"時，class="form-check-input"，label class="form-check-label"
⑴ 基本表單示例：
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
ps：<small>標簽用於定義小一號字體的文本，如果字體達到模型支持的最小字號，
則<small>標簽將不起任何作用，其與<big>標簽相對應。
⑵ 下拉菜單 form-group
<select>可以定義“multiple”屬性，同時顯示多項。
同樣，可以添加通過“.form-control-sm/lg”定義 form控件大小。
<div class="form-group">
<label for="exampleFormControlSelect">Example select</label>
<select class="form-control" id="exampleFormControlSelect">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
⑶ input type="file"（文件輸入框）
此時，input class="form-control-file"
<div class="form-group">
<label for="exampleFormControlFile">Example file input</label>
<input type="file" class="form-control-file" id="exampleFormControlFile">
</div>
⑷ 響應式 form-group
“.form-group”容器添加“.row”類
將<input>元素用<div>包裹，定義為“.col-* ”
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com">
</div>
</div>
⑸ input type="range"（范圍輸入框）
此時，input class="form-control-range"
<div class="form-group">
<label for="formControlRange">Example Range input</label>
<input type="range" class="form-control-range" id="formControlRange">
</div>
⑹ “.form-group”改換為".form-check"
".form-check"類的 div容器用於定義“checkbox”和“radio”表單元素
同時添加".form-check"類和".form-check-inline"類，表示form-check內聯樣式。
<!-- 復選框控件 -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck">
<label class="form-check-label" for="defaultCheck">
Default checkbox
</label>
</div>
<!-- 單選按鈕控件 -->
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios" value="option">
<label class="form-check-label" for="exampleRadios">
Second default radio
</label>
</div>
⑺ 更多復雜的表單設計
參考資料：https://v4.bootcss.com/docs/components/forms/?
3.Modal模態框
類似於 js中的Alert對話框，但Modal功能要強大的多。
⑴ 基礎Modal
示例如下：
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
由代碼結構可以看出，
Modal容器有三層 div：
.Modal、.Modal-dialog、.Modal-content，每一層分別預定義了不同的屬性樣式。
Modal內容的三塊構成：
.Modal-header、Modal-body、Modal-footer
Modal頭部通常包括標題(<h*>)和關閉按鈕(<button>)：
.Modal-title、.close
“.close”按鈕需要定義“ data-dismiss="modal" ”屬性，關閉標識叉號為“×”實體字符
Modal腳部通常設置關閉按鈕和提交/保存按鈕：
此處關閉按鈕class與頭部關閉按鈕不同，class="btn btn-secondary"，data-dismiss屬性相同。
⑵ 靜態Modal
非靜態Modal在彈出后可以通過關閉按鈕或點擊彈框外部來關閉彈出對話框，
但靜態Modal在彈出后只能點擊關閉按鈕關閉彈出對話框。
所有關於Modal對話框的觸發和結束的相關屬性或類的設置都是在最外層 div容器中設置的：
定義靜態Modal，
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" " aria-hidden="true">
...
</div>
其中，data-backdrop屬性表示數據背景，
data-keyboard屬性表示Esc鍵是否生效，
tabindex屬性表示Tab鍵的切換順序，負值為不在Tab序列內
定義觸發按鈕，
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop">
Launch static backdrop modal
</button>
其中，data-target屬性的Value是要觸發的Modal的“id”。
⑶ 長文滾動
當Modal對話框中的文本長度超過視口高度時，需要滾動查看內容。
“.modal”預定義了默認滾動方式，整個對話框獨立於頁面本身進行上下滾動；
還可以在“.modal-dialog”中添加“.modal-dialog-scrollable”類，創建一個“.modal-body”滾動條：
<div class="modal-dialog modal-dialog-scrollable">
...
</div>
⑷ Modal垂直居中
在“.modal-dialog”中添加“.modal-dialog-centered”類，可以使整個對話框在頁面垂直居中：
<div class="modal-dialog modal-dialog-centered">
...
</div>
⑸ tooltips和popover
Popover（彈出框）與Tooltip（工具提示）類似，提供了一個擴展視圖。
Popover 不像之前所的下拉菜單及其他插件那樣，它不是純 CSS 插件。
因此，如需使用該插件，必須使用 jquery 激活才會生效。
啟用頁面中的所有的popover彈出框，可以使用如下腳本：
$(function () { $("[data-toggle='popover']").popover(); }); //錨點或按鈕標簽中須添加“data-toggle”屬性！
<body>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop">
Launch static backdrop modal
</button>
<div class="modal" tabindex="-1" id="staticBackdrop" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h5>Popover in a modal</h5>
<p>This <a href="#" role="button" class="btn btn-secondary popover-test"
title="Popover title" data-content="Popover body content is set in this attribute.">button
</a> triggers a popover on click.
</p>
<hr>
<h5>Tooltips in a modal</h5>
<p>
<a href="#" class="tooltip-test" title="Tooltip">This link
</a> and
<a href="#" class="tooltip-test" title="Tooltip">that link
</a> have tooltips on hover.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script>
$('.popover-test').popover({
trigger:"hover" //觸發的方式： click| hover | focus | manual
});
// 也可以使用下面方式激活：
// $(function () { $("[data-toggle='popover']").popover(); });
</script>
</body>
參考資料來源：https://www.runoob.com/bootstrap/bootstrap-tooltip-plugin.html
⑹ Modal大小
通過向“.modal-dialog”中添加各種尺寸類，定義整個對話框的大小：
<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>
⑺ Modal方法和事件
參見BootStrap官方文檔：https://v4.bootcss.com/docs/components/modal/
4.分頁器
用於頁面切換的頁碼導航連接，通常使用由<nav>標簽包裹的“ul”列表。
⑴ 基礎樣式
<nav>
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>
其中，可以給<nav>元素添加“aria-label="Page navigatio" ”屬性幫助輔助技術更好的識別內容；
⑵ Previous和Next按鈕可以使用圖標替代
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">«</span> <!--圖標為實體字符“& laquo;”-->
</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">»</span> <!--圖標為實體字符“& raquo;”-->
</a>
</li>
</ul>
</nav>
⑶ 活動狀態
可以為“.page-item”元素<li>添加“.disable”類定義禁用狀態，或添加“.active”類定義當前活動狀態。
⑷ Nav大小
可以給“.pagination”元素<ul>添加“.pagination-sm/lg”類，定義分頁器小尺寸和大尺寸。
⑸ Nav對齊方式
可以給“.pagination”元素<ul>添加“.justify-content-center/end”類，定義分頁器居中或居右。
參考資料來源：BootStrap中文網（https://v3.bootcss.com/）