Bootstrap 4 - 導航欄

上一頁
下一頁

描述

導航欄為您的應用程式或網站提供導航標題。導航欄在移動檢視中會摺疊，並且隨著可用視口寬度的增加而變為水平。

基本導航欄

要建立一個基本的導航欄，請新增.navbar 類和響應式摺疊類.navbar-expand-xl|lg|md|sm（在超大、大、中或小螢幕上提供導航欄）。要嚮導航欄新增連結，只需新增一個具有.navbar-nav 類的無序列表即可。要定義每個單獨的列表項，請向<li>元素新增.nav-item 類，併為各個連結向<a>元素使用.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>Basic Navbar</h2>
         <nav class = "navbar navbar-expand-sm navbar-dark bg-secondary">
            <a class = "navbar-brand" href = "#">Navbar</a>
            <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>
            
            <div class = "collapse navbar-collapse" id = "navbarSupportedContent">
               <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 = "#">About Us</a>
                  </li>
                  <li class = "nav-item">
                     <a class = "nav-link" href = "#">Contact</a>
                  </li>
               </ul>
               
            </div>
         </nav>
      </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>

它將產生以下結果：

輸出

品牌/徽標

可以使用.navbar-brand 類突出顯示頁面的品牌或徽標，如下例所示：

示例

線上演示 
<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>Brand</h2>
         <nav class = "navbar navbar-expand-sm bg-secondary navbar-dark">
            <a class = "navbar-brand" href = "#">Logo</a>
            <ul class = "navbar-nav">
               <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 = "#">About Us</a>
               </li>
               <li class = "nav-item">
                  <a class = "nav-link" href = "#">Contact</a>
               </li>
            </ul>
         </nav>
         <br>
         
         <h2>Image Logo</h2>
         <nav class = "navbar navbar-expand-sm bg-secondary navbar-dark">
            <a class = "navbar-brand" href = "#">
               <img src = "https://tutorialspoint.tw/bootstrap/images/logo.png" 
                  style = "width:120px;" alt = "">
            </a>
            <ul class = "navbar-nav">
               <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 = "#">About Us</a>
               </li>
               <li class = "nav-item">
                  <a class = "nav-link" href = "#">Contact</a>
               </li>
            </ul>
            
         </nav>
      </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>

它將產生以下結果：

輸出

帶有下拉選單的導航欄

導航欄可以透過使用.dropdown 類將下拉程式碼新增到<li>元素來包含下拉選單。下面的示例演示了這一點：

示例

線上演示 
<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>Navbar With Dropdown</h2>
         <nav class = "navbar navbar-expand-sm bg-secondary navbar-dark">
            <a class = "navbar-brand" href = "#">Navbar</a>
            <button class = "navbar-toggler" type = "button" data-toggle = "collapse" 
               data-target = "#navbarNavDropdown" aria-controls = "navbarNavDropdown" 
               aria-expanded = "false" aria-label = "Toggle navigation">
               
               <span class="navbar-toggler-icon"></span>
            </button>
            
            <div class = "collapse navbar-collapse" id = "navbarNavDropdown">
               <ul class = "navbar-nav">
                  <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 = "#">About Us</a>
                  </li>
                  <li class = "nav-item">
                     <a class = "nav-link" href = "#">Contact</a>
                  </li>
                  <li class = "nav-item dropdown">
                     <a class = "nav-link dropdown-toggle" href = "#" 
                        id = "navbarDropdownMenuLink" role = "button" data-toggle = "dropdown" 
                        aria-haspopup = "true" aria-expanded = "false">
                        
                        Library
                     </a>
                     
                     <div class = "dropdown-menu" aria-labelledby = "navbarDropdownMenuLink">
                        <a class = "dropdown-item" href = "#">HTML-5</a>
                        <a class = "dropdown-item" href = "#">CSS-3</a>
                        <a class = "dropdown-item" href = "#">Bootstrap-4</a>
                     </div>
                  </li>
               </ul>
               
            </div>
         </nav>
      </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>

它將產生以下結果：

輸出

帶有表單和按鈕的導航欄

您可以使用form-inline 類新增到<form>元素來在導航欄中建立表單控制元件和按鈕，如下例所示：

示例

線上演示 
<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>Navbar with Form and Button</h2>
         <nav class = "navbar navbar-expand-sm bg-secondary navbar-dark">
            <form class = "form-inline">
               <input class = "form-control mr-sm-2" type = "text" placeholder = "Search your product">
               <button class = "btn btn-info" type = "submit">Search</button>
            </form>
         </nav>
      </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>

它將產生以下結果：

輸出

彩色導航欄

使用背景顏色 (.bg-*) 實用程式（例如bg-primary、bg-dark 等）更改導航欄背景的顏色。下面的示例演示了這一點：

示例

線上演示 
<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>Colored Navbars</h2>
         <nav class = "navbar navbar-expand-sm bg-light navbar-light">
            <a class = "navbar-brand" href = "#">Navbar</a>
            <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>
            
            <div class = "collapse navbar-collapse" id = "navbarSupportedContent">
               <ul class = "navbar-nav">
                  <li class = "nav-item active">
                     <a class =" nav-link" 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>
               </ul>
            </div>
            
         </nav>
         <br>
         
         <nav class = "navbar navbar-expand-sm bg-secondary navbar-light">
            <a class = "navbar-brand" href = "#">Secondary Navbar</a>
            <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>
            
            <div class = "collapse navbar-collapse" id = "navbarSupportedContent">
               <ul class = "navbar-nav">
                  <li class = "nav-item active">
                     <a class = "nav-link" 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>
               </ul>
            </div>
         </nav>
         <br>
         
         <nav class = "navbar navbar-expand-sm bg-dark navbar-light">
            <a class = "navbar-brand" href = "#">Dark Navbar</a>
            <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>
            <div class = "collapse navbar-collapse" id = "navbarSupportedContent">
               <ul class = "navbar-nav">
                  <li class = "nav-item active">
                     <a class = "nav-link" 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>
               </ul>
            </div>
         </nav>
         <br>
         
         <nav class = "navbar navbar-expand-sm bg-primary navbar-light">
            <a class = "navbar-brand" href = "#">Primary Navbar</a>
            <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>
            <div class = "collapse navbar-collapse" id = "navbarSupportedContent">
               <ul class = "navbar-nav">
                  <li class = "nav-item active">
                     <a class = "nav-link" 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>
               </ul>
            </div>
         </nav>
         <br>
         
         <nav class = "navbar navbar-expand-sm bg-success navbar-light">
            <a class = "navbar-brand" href = "#">Success Navbar</a>
            <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>
            <div class = "collapse navbar-collapse" id = "navbarSupportedContent">
               <ul class = "navbar-nav">
                  <li class = "nav-item active">
                     <a class = "nav-link" 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>
               </ul>
            </div>
         </nav>
         <br>
         
         <nav class = "navbar navbar-expand-sm bg-info navbar-light">
            <a class = "navbar-brand" href = "#">Info Navbar</a>
            <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>
            <div class = "collapse navbar-collapse" id = "navbarSupportedContent">
               <ul class = "navbar-nav">
                  <li class = "nav-item active">
                     <a class = "nav-link" 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>
               </ul>
            </div>
         </nav>
         <br>
         
         <nav class = "navbar navbar-expand-sm bg-warning navbar-light">
            <a class = "navbar-brand" href = "#">Warning Navbar</a>
            <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>
            <div class = "collapse navbar-collapse" id = "navbarSupportedContent">
               <ul class = "navbar-nav">
                  <li class = "nav-item active">
                     <a class = "nav-link" 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>
               </ul>
            </div>
         </nav>
         <br>
         
         <nav class = "navbar navbar-expand-sm bg-danger navbar-light">
            <a class = "navbar-brand" href = "#">Danger Navbar</a>
            <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>
            <div class = "collapse navbar-collapse" id = "navbarSupportedContent">
               <ul class = "navbar-nav">
                  <li class = "nav-item active">
                     <a class = "nav-link" 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>
               </ul>
            </div>
            
         </nav>
      </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>

它將產生以下結果：

輸出

固定導航欄

Bootstrap 導航欄的定位可以是動態的。您可以透過向.navbar 類新增.fixed-top 類將其放置在頂部。下面的示例演示了這一點：

示例

線上演示 
<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 style = "height:2000px">
      <div class = "container">
         <nav class = "navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
            <a class = "navbar-brand" href = "#">Fixed Top</a>
            <ul class = "navbar-nav">
               <li class = "nav-item active">
                  <a class = "nav-link" 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>
            </ul>
         </nav>
         <div class = "container-fluid" style = "margin-top:80px">
            <h4>This is Fixed Navigation Bar...Scroll this page to see the effect</h4>
         </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>

它將產生以下結果：

輸出

底部導航欄

如果要將導航欄固定在頁面底部，則向.navbar 類新增.fixed-bottom 類。下面的示例演示了這一點：

示例

線上演示 
<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 style = "height:2000px">
      <div class = "container">
         <nav class = "navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
            <a class = "navbar-brand" href = "#">Fixed Bottom</a>
            <ul class = "navbar-nav">
               <li class = "nav-item active">
                  <a class = "nav-link" 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>
            </ul>
         </nav>
         
         <div class = "container-fluid" style = "margin-top:80px">
            <h4>This is Bottom Fixed Navigation Bar...Scroll this page to see the effect</h4>
         </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>

它將產生以下結果：

輸出

粘性導航欄

您可以透過使用.sticky-top 類（將新增到.navbar 類）使導航欄在滾動頁面時固定在頁面頂部。下面的示例演示了這一點：

示例

線上演示 
<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 style = "height:2000px">
      <div class = "container-fluid">
         <div class = "container-fluid" style = "margin-top:80px">
            <h4>This is Sticky Navigation Bar...Scroll this page to see the effect</h4>
         </div>
      </div>
      
      <nav class = "navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
         <a class = "navbar-brand" href = "#">Sticky Top</a>
         <ul class = "navbar-nav">
            <li class = "nav-item active">
               <a class = "nav-link" 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>
         </ul>
      </nav>
      
      <!-- 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
列印頁面
上一頁
下一頁
廣告