Bootstrap 如何显示一个黑色导航栏

在本文中，我们将学习如何使用不同的Bootstrap类（如“navbar-dark”或“bg-dark”）在Bootstrap中显示一个黑色导航栏。

导航栏在网站中非常有用，它们为平台上的主要内容提供更容易的导航，提高整个网站的可访问性，以及增强用户体验。

在这里，我们将使用Bootstrap及其类创建一个黑色导航栏。在下面的示例中，我们将使用Bootstrap CDN将Bootstrap引入到项目中。

让我们通过一些示例来理解这个问题 –

示例1

在这个示例中，我们将使用Bootstrap创建一个基本的导航栏，并且给它添加“navbar-dark”和“bg-dark”类使其变为黑色。

<html lang="en">
  <head>
      <title>How to display black navigation bar in Bootstrap?</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
   <h3>How to display black navigation bar in Bootstrap?</h3>

   <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <a class="navbar-brand" href="#">Your Logo</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
         <ul class="navbar-nav ml-auto">
            <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="#">Services</a>
            </li>
            <li class="nav-item">
               <a class="nav-link" href="#">Contact Us</a>
            </li>
         </ul>
      </div>
   </nav>
</body>
</html>

示例2

在这个例子中，我们将使用Bootstrap的内置类来创建一个固定顶部导航栏。

文件名：index.html

<html lang="en">
<head>
   <title>How to display black navigation bar in Bootstrap?</title>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
   </script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
   </script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
   </script>
</head>
<body>
   <h3>How to display black navigation bar in Bootstrap?</h3>

   <!-- Example 1: Bootstrap's built-in classes -->
   <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
      <a class="navbar-brand" href="#">Your Logo</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav mr-auto">
         <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="#">Services</a>
         </li>
         <li class="nav-item">
            <a class="nav-link" href="#">Contact Us</a>
         </li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
         <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
         <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
      </form>
      </div>
   </nav>

  </body>
</html>

示例3

在这个示例中，我们将使用Bootstrap的Sass创建一个固定顶部导航栏

文件名：index.html

<html lang="en">
<head>
   <title>How to display black navigation bar in Bootstrap?</title>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/>

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
   <h3>How to display black navigation bar in Bootstrap?</h3>

   <nav class="navbar navbar-expand-lg navbar-dark fixed-top" style="background-color: #000000;">
   <a class="navbar-brand" href="#">Your Logo</a>
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
   </button>
   <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav mr-auto">
         <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="#">Services</a>
         </li>
         <li class="nav-item">
            <a class="nav-link" href="#">Contact Us</a>
         </li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
         <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
         <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
      </form>
   </div>
   </nav>
</body>
</html>