Bootstrap4 導航欄

<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>