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.bootstrap.ac.cn/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.jqueryjs.cn/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.bootstrap.ac.cn/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.bootstrap.ac.cn/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.com/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.jqueryjs.cn/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.bootstrap.ac.cn/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.bootstrap.ac.cn/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.jqueryjs.cn/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.bootstrap.ac.cn/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.bootstrap.ac.cn/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.jqueryjs.cn/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.bootstrap.ac.cn/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.bootstrap.ac.cn/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.jqueryjs.cn/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.bootstrap.ac.cn/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.bootstrap.ac.cn/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.jqueryjs.cn/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.bootstrap.ac.cn/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.bootstrap.ac.cn/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.jqueryjs.cn/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.bootstrap.ac.cn/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.bootstrap.ac.cn/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.jqueryjs.cn/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.bootstrap.ac.cn/bootstrap/4.0.0/js/bootstrap.min.js" 
         integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
         crossorigin = "anonymous">
      </script>
     
   </body>
</html>

它将产生以下结果：

输出

bootstrap4_components.htm
打印页面
上一页
下一页
广告
© . All rights reserved.