1.nav導航
⑴ 基礎結構：
一種是在<ul><li>標簽中嵌套<a>標簽的方式；
另一種是在<nav>標簽中嵌套<a>標簽的方式；
也可以使用其它標簽代替<nav>標簽或<a>標簽。
涉及到的 class樣式如下：
<!-- 使用 ul列表創建導航 -->
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<!-- 使用 <nav>標簽創建導航 -->
<nav class="nav">
<a class="nav-link active" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>
⑵ 排列對齊
默認，水平居左
.justify-content-center，水平居中
.justify-content-end，水平居右
.flex-column，垂直排列
上述樣式utility都是針對外層“.nav”容器進行設置的。
⑶ Tabs和Pills
.nav-tabs，定義導航按鈕的表單樣式
.nav-pills，定義導航按鈕的葯丸樣式
⑷ Fill 和 Justified
.nav-fill，水平填充對齊（水平空間全部占用）
.nav-justified，水平等距對齊（每一個item寬度相等）
當導航外層容器為<nav>標簽時，必須給<a>標簽添加“.nav-item”類。
⑸ 彈性布局
通過添加“.flex-*-row”類定義導航彈性布局，示例如下
<nav class="nav nav-pills flex-column nav-fill flex-sm-row">
<a class="nav-item nav-link active" href="#">Active</a>
<a class="nav-item nav-link" href="#">Longer nav link</a>
<a class="nav-item nav-link" href="#">Link</a>
<a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>
⑹ 添加下拉
通過“.dropdown”類定義導航菜單下拉內容，下拉菜單結構示例：
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<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>
</li>
⑺ 添加內容窗口
通過添加內容窗口，使得導航菜單切換時動態呈現對應的內容。
要實現動態對應切換，菜單<a>標簽的 href或 data-target屬性值必須引用窗口元素的 id值
添加<a>標簽“ data-toggle='tab / pill' ”屬性，增加“.tab-content”容器並定義子元素“.tab-pane”
<!-- 采用 ul列表的方式定義導航菜單 -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
</ul>
<!-- 定義動態內容窗口“.tab-content” -->
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">Text Content...</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Text Content...</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">Text Content...</div>
</div>
2.navbar導航條
.navbar，用於定義導航條樣式，默認菜單項垂直排列
.navbar-expand{-sm|-md|-lg|-xl}，用於定義不同屏幕尺寸時響應式布局，小於斷點尺寸是垂直排列
.navbar-brand，用於定義品牌Logo、文字等樣式，可以是<a>鏈接，也可以是<span>等其他元素
.navbar-nav，用於定義導航條主體菜單，支持下拉菜單項
.navbar-toggler，用於定義菜單堆疊按鈕
.collapse.navbar-collapse，用於定義需要堆疊的菜單容器，
容器的 id必須與“.navbar-toggler”的“data-toggle”屬性值相同
.form-inline，用於創建行內表單
.navbar-text，用於定義垂直居中排列的文本內容
navbar基本結構示例：
<body>
<!-- 創建響應式布局的導航條,當屏幕尺寸在Medium以下時，菜單選項將堆疊顯示;
定義字體顏色（navbar-light|dark）、背景顏色（bg-light|dark|primary|…）
-->
<nav class="navbar navbar-expand-md navbar-light bg-light">
<!-- 定義商標/品牌字樣，可以是<a>標簽也可以是<span>等其他標簽；
標簽內容可以是 String文本，也可以引用 <img>圖片,或者是圖片+文本的形式 -->
<a class="navbar-brand" href="#">Navbar</a>
<!-- 定義菜單選項堆疊時的按鈕，data-target屬性值必須為 .collapse容器的 id引用 -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- 創建菜單選項容器,用於包裹需要堆疊的nav導航 -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- 創建導航條主體--nav導航 -->
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<!-- 創建下拉菜單項，添加 .dropdown樣式 -->
<li class="nav-item dropdown">
<!-- 下拉菜單的 data-toggle屬性值為“dropdown” -->
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<!-- 創建行內表格，用於包裹搜索框和搜索按鈕 -->
<form class="form-inline my-2 my-lg-0">
<!-- 創建<input>並添加“.form-control”類，也可以使用“input groups”，示例如下：
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">@</span>
</div>
<input type="text" class="form-control" placeholder="Username">
</div>
-->
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<!-- button按鈕可以添加“.btn-sm|lg”類定義小尺寸、大尺寸按鈕 -->
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</body>
3.Carousel輪播
基礎結構：
⑴ 輪播框架
carousel通常使用<div>元素作為外層容器
① 必須設置 id屬性，用於匹配對應的控制器和指示器
② 核心樣式類：.carousel、.slide，表示輪播滑動
③ data-ride="carousel"，該屬性用於標記輪播在頁面加載時開始觸發
④ 除使用 data-ride屬性觸發，還可以通過 js代碼使用 carousel()方法初始化輪播
⑵ 輪播內容(圖片)
① “.carousel-inner”，用於定義包裹主體內容的 div元素的樣式
② “.carousel-item”，用於定義嵌套在“.carousel-inner”內部用於包裹<img>的 div元素的樣式
③ <img>元素除定義 src屬性外，需要添加“.d-block w-* ”樣式類
⑶ 控制器
① 通常用<a>嵌套<span>創建控制器，<a>標簽放置在“.carousel-inner”元素的后面
② “.carousel-control-prev | next”類，用於定義向前或向后按鈕的樣式
③ <a>標簽的 href屬性必須為外層容器“.carousel”的 id
④ data-slide=“prev | next”，定義幻燈片切換是相對當前位置的操作
⑷ 指示器
① 通常使用<ol>有序列表創建指示器，<ol>標簽書寫在“.carousel-inner”元素的前序位置
② <ol>的樣式類設置為“.carousel-indicators”
③ <li>元素的 data-target屬性必須引用外層容器“.carousel”的 id
④ <li>元素的 data-slide-to屬性用於定義每個節點對應的“.carousel-item”的索引，從“0”開始
⑸ 文本說明
① 描述說明可以由標題<h*>和內容<p>組合構成，嵌套在“.carousel-caption”類的 div元素中
② “.carousel-caption”類的 div元素書寫在 <img>標簽的后序位置，也可以直接添加描述文本
③ “.carousel-caption”元素還可以添加“.d-none .d-*-block”（-*-代表屏幕大小），定義響應式
⑹ 其他屬性方法
① “.carousel-fade”淡入淡出樣式，在外層容器“.carousel”中定義
② data-interval="timeValue"，定義輪播間隔時間，在 “.carousel-item”中添加該屬性
③ .carousel()方法，在 js中調用，用於定義輪播的方式和特定操作
<body>
<div id="carouselExample" class="carousel slide carousel-fade w-25" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExample" data-slide-to="0" class="active"></li>
<li data-target="#carouselExample" data-slide-to="1"></li>
<li data-target="#carouselExample" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active" data-interval="1000">
<img src="./Images/rotation01.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<div class="carousel-item" data-interval="2000">
<img src="./Images/rotation02.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="carousel-item" data-interval="3000">
<img src="./Images/rotation03.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExample" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</body>
參考資料來源：BootStrap中文網（https://v3.bootcss.com/）