Bootstrap 4 - 導航

上一頁
下一頁

描述

Bootstrap 為您的網站提供水平選單中的導航專案。

帶有停用連結的基本導航

透過向<ul>元素新增.nav類，然後新增導航專案，並新增nav.link類來建立導航專案的連結，來建立導航選單。以下示例演示了這一點：

示例

線上演示 
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Base Nav and Disabled Link</h2>
         <ul class = "nav">
            <li class = "nav-item">
               <a class = "nav-link active" href = "#">Home</a>
            </li>
            <li class = "nav-item">
               <a class = "nav-link" href = "#">About Us</a>
            </li>
            <li class = "nav-item">
               <a class = "nav-link" href = "#">Contact</a>
            </li>
            <li class = "nav-item">
               <a class = "nav-link disabled" href = "#">Sign-In (Disabled)</a>
            </li>
         </ul>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

它將產生以下結果：

輸出

對齊導航

透過新增.justify-content-center類可以將導航對齊到中心，並透過新增.justify-content-end類可以將其對齊到右側，如下例所示：

示例

線上演示 
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class="container">
         <h2>Center Aligned Nav</h2>
         <ul class = "nav justify-content-center">
            <li class = "nav-item">
               <a class = "nav-link active" href = "#">Home</a>
            </li>
            <li class = "nav-item">
               <a class = "nav-link" href = "#">About Us</a>
            </li>
            <li class = "nav-item">
               <a class = "nav-link" href = "#">Contact</a>
            </li>
            <li class = "nav-item">
               <a class = "nav-link" href = "#">Sign-In</a>
            </li>
         </ul>
         
         <h2>Right Aligned Nav</h2>
         <ul class = "nav justify-content-end">
            <li class = "nav-item">
               <a class = "nav-link active" href = "#">Home</a>
            </li>
            <li class = "nav-item">
               <a class = "nav-link" href = "#">About Us</a>
            </li>
            <li class = "nav-item">
               <a class = "nav-link" href = "#">Contact</a>
            </li>
            <li class = "nav-item">
               <a class = "nav-link" href = "#">Sign-In</a>
            </li>
         </ul>
      </div>
      
      <!-- jQuery library -->
      <script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" 
         integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
         crossorigin = "anonymous"></script>
      
      <!-- Popper -->
      <script src =" https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
         integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
         crossorigin = "anonymous"></script>
      
      <!-- Latest compiled and minified Bootstrap JavaScript -->
      <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
         integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
         crossorigin = "anonymous"></script>
   </body>
</html>

它將產生以下結果：

輸出

垂直對齊

您可以透過向.nav元素新增.flex-column類來建立垂直導航，如下例所示：

示例

線上演示 
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Vertical Alignment</h2>
         <ul class = "nav flex-column">
            <li class = "nav-item">
               <a class = "nav-link active" href = "#">Home</a>
            </li>
            <li class = "nav-item">
               <a class = "nav-link" href = "#">About Us</a>
            </li>
            <li class = "nav-item">
               <a class = "nav-link" href = "#">Contact</a>
            </li>
            <li class = "nav-item">
               <a class = "nav-link" href = "#">Sign-In</a>
            </li>
         </ul>
      </div>
      
      <!-- jQuery library -->
      <script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" 
         integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
         crossorigin = "anonymous"></script>
      
      <!-- Popper -->
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
         integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
         crossorigin="anonymous"></script>
      
      <!-- Latest compiled and minified Bootstrap JavaScript -->
      <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
         integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
         crossorigin = "anonymous"></script>
   </body>
</html>

它將產生以下結果：

輸出

選項卡、藥丸、帶下拉選單的選項卡和藥丸

您可以使用.nav-tabs類建立選項卡式介面導航，並使用.nav-pills類建立導航藥丸。您還可以透過在<li>元素中使用.dropdown類，向選項卡或藥丸新增下拉選單，如下例所示：

示例

線上演示 
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Navigation Tabs</h2>
         <ul class = "nav nav-tabs">
            <li class = "nav-item">
               <a class = "nav-link active" href = "#">Home</a>
            </li>
            <li class = "nav-item">
               <a class = "nav-link" href = "#">About Us</a>
            </li>
            <li class = "nav-item">
               <a class = "nav-link" href = "#">Contact</a>
            </li>
            <li class = "nav-item">
               <a class = "nav-link" href = "#">Sign-In</a>
            </li>
         </ul>
         <br>
         
         <h2>Navigation Pills</h2>
         <ul class = "nav nav-pills">
            <li class = "nav-item">
               <a class = "nav-link active" href = "#">Home</a>
            </li>
            <li class = "nav-item">
               <a class = "nav-link" href = "#">About Us</a>
            </li>
            <li class = "nav-item">
               <a class = "nav-link" href = "#">Contact</a>
            </li>
            <li class = "nav-item">
               <a class = "nav-link" href = "#">Sign-In</a>
            </li>
         </ul>
         <br>
         
         <h2>Tabs With Dropdown</h2>
         <ul class = "nav nav-tabs">
            <li class = "nav-item">
               <a class = "nav-link active" href = "#">Home</a>
            </li>
            <li class = "nav-item dropdown">
               <a class = "nav-link dropdown-toggle" data-toggle = "dropdown" 
                  href = "#" role = "button" aria-haspopup = "true" 
                  aria-expanded = "false">Library</a>
               
               <div class = "dropdown-menu">
                  <a class = "dropdown-item" href = "#">HTML-5</a>
                  <a class = "dropdown-item" href = "#">CSS-3</a>
                  <a class = "dropdown-item" href = "#">JavaScript</a>
                  <div class = "dropdown-divider"></div>
                  <a class = "dropdown-item" href = "#">Bootstrap 4</a>
               </div>
            </li>
            <li class = "nav-item">
               <a class = "nav-link" href = "#">About Us</a>
            </li>
            <li class = "nav-item">
               <a class = "nav-link" href = "#">Contact</a>
            </li>
         </ul>
         <br>
         
         <h2>Pills with dropdown</h2>
         <ul class = "nav nav-pills">
            <li class = "nav-item">
               <a class = "nav-link active" href = "#">Home</a>
            </li>
            <li class = "nav-item dropdown">
               <a class = "nav-link dropdown-toggle" data-toggle = "dropdown" 
                  href =" #" role = "button" aria-haspopup = "true" 
                  aria-expanded =" false">Library</a>
               
               <div class = "dropdown-menu">
                  <a class = "dropdown-item" href = "#">HTML-5</a>
                  <a class = "dropdown-item" href = "#">CSS-3</a>
                  <a class = "dropdown-item" href = "#">JavaScript</a>
                  <div class = "dropdown-divider"></div>
                  <a class = "dropdown-item" href = "#">Bootstrap 4</a>
               </div>
            </li>
            <li class = "nav-item">
               <a class = "nav-link" href = "#">About Us</a>
            </li>
            <li class = "nav-item">
               <a class = "nav-link" href = "#">Contact</a>
            </li>
         </ul>
      </div>
      
      <!-- jQuery library -->
      <script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" 
         integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
         crossorigin = "anonymous"></script>
      
      <!-- Popper -->
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
         integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
         crossorigin = "anonymous"></script>
      
      <!-- Latest compiled and minified Bootstrap JavaScript -->
      <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
         integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
         crossorigin = "anonymous"></script>
         
   </body>
</html>

它將產生以下結果：

輸出

可切換的選項卡和藥丸

您可以透過向<a>元素新增data-toggle="tab"或data-toggle="pill"屬性來建立可切換的選項卡或藥丸。對於每個選項卡或藥丸，新增一個帶有唯一ID的.tab-pane類，並在一個帶有.tab-content類的<div>元素中輸入內容。

以下示例演示了這一點：

示例

線上演示 
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Toggleable Tabs</h2>
         <ul class = "nav nav-tabs" id = "myTab" role = "tablist">
            <li class = "nav-item">
               <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">
               <a class = "nav-link" id = "aboutus-tab" data-toggle = "tab" 
                  href = "#aboutus" role = "tab" aria-controls = "aboutus" 
                  aria-selected = "false">About Us</a>
            </li>
            <li class = "nav-item">
               <a class = "nav-link" id = "contact-tab" data-toggle = "tab" 
                  href = "#contact" role = "tab" aria-controls = "contact" 
                  aria-selected = "false">Contact</a>
            </li>
         </ul>
         
         <div class = "tab-content" id = "myTabContent">
            <div class = "tab-pane fade show active" id = "home" role = "tabpanel" 
               aria-labelledby = "home-tab">Content for Home tab</div>
            
            <div class = "tab-pane fade" id = "aboutus" role = "tabpanel" 
               aria-labelledby = "aboutus-tab">Content for About Us tab</div>
            
            <div class = "tab-pane fade" id = "contact" role = "tabpanel" 
               aria-labelledby = "contact-tab">Content for Contact tab</div>
         </div>
         <br>
         
         <h2>Toggleable Pills</h2>
         <ul class = "nav nav-pills mb-3" id = "pills-tab" role = "tablist">
            <li class = "nav-item">
               <a class = "nav-link active" id = "pills-home-tab" 
                  data-toggle = "pill" href = "#pills-home" role = "tab" 
                  aria-controls = "pills-home" aria-selected = "true">Home</a>
            </li>
            <li class = "nav-item">
               <a class = "nav-link" id = "pills-aboutus-tab" data-toggle = "pill" 
                  href = "#pills-aboutus" role = "tab" aria-controls = "pills-aboutus" 
                  aria-selected = "false">About Us</a>
            </li>
            <li class = "nav-item">
               <a class = "nav-link" id = "pills-contact-tab" data-toggle = "pill" 
                  href = "#pills-contact" role = "tab" aria-controls = "pills-contact" 
                  aria-selected = "false">Contact</a>
            </li>
         </ul>
         
         <div class = "tab-content" id = "pills-tabContent">
            <div class = "tab-pane fade show active" id = "pills-home" 
               role = "tabpanel" aria-labelledby = "pills-home-tab">
               
               Content for Home tab
            </div>
            
            <div class = "tab-pane fade" id = "pills-aboutus" role = "tabpanel" 
               aria-labelledby = "pills-aboutus-tab">
               
               Content for About Us tab
            </div>
            
            <div class = "tab-pane fade" id = "pills-contact" role = "tabpanel" 
               aria-labelledby = "pills-contact-tab">
               
               Content for Contact tab
            </div>
         </div>
      
      </div>
      <!-- jQuery library -->
      <script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" 
         integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Popper -->
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
         integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
         crossorigin = "anonymous">
      </script>

      <!-- Latest compiled and minified Bootstrap JavaScript -->
      <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
         integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
         crossorigin="anonymous">
      </script>
         
   </body>
</html>

它將產生以下結果：

輸出

bootstrap4_components.htm
列印頁面
上一頁
下一頁
廣告