導航欄：navbar
導航欄容器可以包含以下幾個常用組成：
1、品牌LOGO（.navbar-brand ）
2、導航菜單（.navbar-nav）
3、導航文本（.navbar-text）
4、折疊導航按鈕（.navbar-toggle）
5、表單（.form-inline）
一、導航容器一般使用nav標簽來定義：
<nav class="navbar">...</nav>
導航容器可用樣式：
| .navbar | 導航欄基礎樣式 |
| .navbar-expand-{sm | md | xl | lg} | 響應式導航，大屏幕水平鋪開，小屏幕垂直堆疊 |
| .flex-top | 導航欄一直在頂部 |
| .flex-bottom | 導航欄一直在頂部 |
| .bg-{primary | secondary | success | info | danger | warning | dark | light} | 導航欄的背景顏色 |
| .navbar-dark | 導航配色方案。深色背景，加此樣式可以突顯文字 |
| .navbar-light | 導航配色方案。淺色背景，加此樣式可突顯文字 |
二、導航菜單一般使用ul、li來定義：
1 <nav class="navbar navbar-expand-md bg-light nav-light"> 2 <ul class="navbar-nav"> 3 <li class="nav-item active"><a href="#" class="nav-link ">菜單一</a></li>
4 <li class="nav-item"><a href="#" class="nav-link">菜單二</a></li>
5 <li class="nav-item"><a href="#" class="nav-link disabled">菜單三</a></li>
6 </ul>
7 </nav>
導航菜單可用樣式：
| .navbar-nav | 應用於ul標簽 |
| .nav-item 、 .active | 應用於li標簽 |
| .nav-link 、 .disabled | 應用於a標簽 |
三、導航欄中加品牌元素（.navbar-brand）:
1 <nav class="navbar navbar-expand-md bg-dark navbar-dark"> 2 <!-- 品牌 --> 3 <a href="#" class="navbar-brand">品牌LOGO</a> 4 5 <!-- 菜單 --> 6 <ul class="navbar-nav"> 7 <li class="nav-item active"><a href="#" class="nav-link">菜單一</a></li> 8 <li class="nav-item"><a href="#" class="nav-link">菜單二</a></li> 9 <li class="nav-item"><a href="#" class="nav-link disabled">菜單三</a></li> 10 </ul> 11 </nav>
品牌可以是文字，也可以是圖片。
四、導航文本類（.navbar-text），使用該類可以保證文字與導航樣式統一：
1 <nav class="navbar navbar-expand-md bg-dark navbar-dark"> 2 <!-- 品牌 --> 3 <a href="#" class="navbar-brand">品牌LOGO</a> 4 <!-- 菜單 --> 5 <ul class="navbar-nav"> 6 <li class="nav-item active"><a href="#" class="nav-link">菜單一</a></li> 7 <li class="nav-item"><a href="#" class="nav-link">菜單二</a></li> 8 <li class="nav-item"><a href="#" class="nav-link disabled">菜單三</a></li> 9 </ul> 10 <span class="navbar-text">這是一句文字</span> 11 </nav>
五、折疊導航：小屏幕上我們都會折疊導航欄，通過點擊來顯示導航選項：
1 <nav class="navbar navbar-expand-md bg-dark navbar-dark"> 2 <!-- 品牌 --> 3 <a href="#" class="navbar-brand">品牌LOGO</a> 4 5 <!-- 定義折疊按鈕 --> 6 <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#nav-menu"> 7 <span class="navbar-toggler-icon"></span> 8 </button> 9 10 <!-- 把菜單包含在容器內 --> 11 <div class="collapse navbar-collapse" id="nav-menu"> 12 <ul class="navbar-nav"> 13 <li class="nav-item active"><a href="#" class="nav-link">菜單一</a></li> 14 <li class="nav-item"><a href="#" class="nav-link">菜單二</a></li> 15 <li class="nav-item"><a href="#" class="nav-link disabled">菜單三</a></li> 16 </ul> 17 </div> 18 </nav>
折疊導航注意事項：
1、定義折疊按鈕時除了折疊的屬性之外，還必須加上樣式： .navbar-toggler
2、折疊按鈕內加上折疊圖標，樣式： .navbar-toggler-icon
3、菜單要包含一個容器內，容器必須包含樣式： .collapse 和 .navbar-collapse
六、導航內加表單時，一定要把表單加上內聯樣式（.form-inline）