Bootstrap4 導航欄
目錄
簡單的水平導航欄，可以在 <ul> 元素上添加 .nav類，在每個 <li> 選項上添加 .nav-item 類，在每個鏈接上添加 .nav-link 類:
.nav-tabs 類可以將導航轉化為選項卡。
.nav-pills 類可以將導航項設置成膠囊形狀。
.nav-justified 類可以設置導航項齊行等寬顯示。
動態選項卡
如果你要設置選項卡是動態可切換的，可以在每個鏈接上添加 data-toggle="tab" 屬性。 然后在每個選項對應的內容的上添加 .tab-pane類。
如果你希望有淡入效果可以在 .tab-pane 后添加 .fade類:
<div class="container">
<h2>選項卡切換</h2>
<br>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="home" class="container tab-pane active"><br>
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="menu1" class="container tab-pane fade"><br>
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="menu2" class="container tab-pane fade"><br>
<h3>Menu 2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
</div>
</div>標准的導航欄
nav元素中用 .navbar 類來創建一個標准的導航欄
導航對齊方式
.justify-content-center 類設置導航居中顯示， .justify-content-end 類設置導航右對齊。
導航欄的組成
nav元素中包含 .navbar 導航欄垂直 、響應式的、 導航欄顏色、 導航欄適應 等類
nav元素中包含 ul
ul 元素中包含navbar-nav 類 表示導航欄中ul
li元素中包含nav-item類 表示導航欄中ul中li 的元素
結構如下：
nav -> a或者a->img 或者ul->->li->a等
li-> a 中class="nav-link”表示元素是連接
下拉菜單
.dropdown 類用來指定一個下拉菜單。
.dropdown-divider 類用於在下拉菜單中創建一個水平的分割線;
.dropdown-header 類用於在下拉菜單中添加標題;
.disabled 類禁用下拉菜單;
.dropdown-menu 類后添加 .dropdown-menu-right 類 讓下拉菜單右對齊
向上彈出的下拉菜單.dropup類:
垂直導航
.flex-column 類用於創建垂直導航：
垂直導航欄
刪除 .navbar-expand-xl|lg|md|sm 類 變化為 ->垂直導航欄；
不同顏色導航欄
.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark和 .bg-light類 創建不同顏色導航欄
品牌/Logo
.navbar-brand 類用於高亮顯示品牌/Logo；
<a class="navbar-brand" href="#"> <img src="*.jpg" alt="Logo" style="width:40px;"> </a>導航欄的表單與按鈕
導航欄的表單 <form> 元素使用 class="form-inline" 類來排版輸入框與按鈕;
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<form class="form-inline">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-success" type="submit">Search</button>
</form>
</nav>導航欄使用下拉菜單
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Dropdown link
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</li>導航欄文本
使用 .navbar-text 類來設置導航欄上非鏈接文本，可以保證水平對齊，顏色與內邊距一樣。
<span class="navbar-text">
Navbar text
</span>
固定導航欄
.fixed-top 類來實現導航欄的固定；
.fixed-bottom 類用於設置導航欄固定在底部；
面包屑導航
<nav class="breadcrumb">
<a class="breadcrumb-item" href="#">Home</a>
<a class="breadcrumb-item" href="#">Library</a>
<a class="breadcrumb-item" href="#">Data</a>
<span class="breadcrumb-item active">Bootstrap</span>
</nav>
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active">Data</li>
</ol>