Bootstrap - 导航栏

本章将讨论 Bootstrap 导航栏。Bootstrap 的导航栏是一个功能强大且响应灵敏的导航标题。导航栏是位于页面顶部的导航标题。

怎么运行的

  • 基本导航栏是使用.navbar类构建的。对于响应式折叠，请使用.navbar -expand{-sm|-md|-lg|-xl|-xxl}包装 .navbar 类（在小型、中型、大型、超大或 xxlarge 屏幕上垂直排列导航栏）。

  • 使用aria-current="page"指示当前项目或aria-current="true"指示集合中的当前项目。

  • 通过使用<nav>元素来确保可用性，或者在使用更通用的元素（例如<div>）的情况下，为每个导航栏包含一个role="navigation"，以明确区分它作为辅助进展客户的兴趣点区域设置。

  • v5.2.0 中的新增功能：导航栏可以使用 CSS 变量进行主题化，使用仅限于 .navbar基类的 CSS 变量进行主题化。.navbar-light已被谴责，.navbar-dark已被重写以废除 CSS 因素而不是包含额外的样式。

基本导航栏

支持的内容

使用导航栏时，内置类会派上用场，如下所示：

  • 使用.navbar-brand 类作为公司、产品或项目名称。

  • 使用.navbar-nav进行全高、轻量级导航（包括对下拉菜单的支持）。

  • 使用带有折叠插件的.navbar-toggler类来实现导航切换Behave。

  • 使用.navbar-text 类添加垂直居中的文本字符串。

  • 对组使用.collapse.navbar-collapse并通过父断点折叠导航栏内容。

  • 使用.navbar-scroll设置最大高度并滚动 navbar 的展开内容。

您可以使用编辑和运行选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Navbar</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg bg-primary">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">Tutorialspoint</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#">Home</a>
            </li>

            <li class="nav-item">
              <a class="nav-link disabled">About us</a>
            </li>

            <li class="nav-item">
              <a class="nav-link" href="#">Services</a>
            </li>

            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                Blog
              </a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Blog 1</a></li>
                <li><a class="dropdown-item" href="#">Blog 2</a></li>
              </ul>
            </li>

          </ul>
          <form class="d-flex" role="search">
            <input class="form-control me-2" type="search" placeholder="Search Here" aria-label="Search">
            <button class="btn btn-outline-warning" type="submit">Search</button>
          </form>
        </div>
      </div>
    </nav>
  </body>
  </html>

垂直导航栏

要创建始终垂直的导航栏，请删除.navbar-expand-*类。

您可以使用编辑和运行选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Navbar</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <nav class="navbar bg-light">
      <div class="container-fluid">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="#"> Item 1</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Item 2</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Item 3</a>
          </li>
        </ul>
      </div>
    </nav>

    <div class="container-fluid mt-3">
      <h3>Vertical Navbar</h3>
    </div>
  </body>
  </html>

居中导航栏

添加.justify-content-center类以显示中心导航栏

您可以使用编辑和运行选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Navbar</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>

    <nav class="navbar navbar-expand-sm bg-light justify-content-center">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#">Item 1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Item 2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Item 3</a>
        </li>
      </ul>
    </nav>

    <div class="container-fluid mt-3">
      <h3>Centered Navbar</h3>
    </div>
  </body>
  </html>

品牌

添加类.navbar-brand用于获取项目名称的品牌。

文本

通过添加类.navbar-brand在元素内添加文本。

您可以使用编辑和运行选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Navbar</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <nav class="navbar bg-primary mt-2">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">Tutorialspoint</a>
      </div>
    </nav>

    <nav class="navbar bg-light mt-2">
      <div class="container-fluid">
        <span class="navbar-brand mb-0 h1">Tutorialspoint</span>
      </div>
    </nav>
  </body>
  </html>

图片

将.navbar-brand中的文本替换为<img>标记。

您可以使用编辑和运行选项编辑并尝试运行此代码。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Navbar</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <nav class="navbar bg-body-tertiary">
        <div class="container">
          <a class="navbar-brand" href="#">
            <img src="\bootstrap\images\tutimg.png" alt="Bootstrap" width="100" height="65">
          </a>
        </div>
      </nav>
    </body>
    </html>

图片和文字

您还可以添加一些额外的实用程序，以在<img>元素上使用类.d-inline-block和.align-text-top同时添加图像和文本。

您可以使用编辑和运行选项编辑并尝试运行此代码。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Navbar</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <nav class="navbar bg-body-tertiary">
        <div class="container-fluid">
          <a class="navbar-brand" href="#">
            <img src="\bootstrap\images\tutimg.png" alt="Logo" width="100" height="75" class="d-inock alline-blign-text-mid">
            Tutorialspoint
          </a>
        </div>
      </nav>
    </body>
    </html>

导航

  • 导航栏导航链接基于.nav选项构建，具有自己的修饰符类，并使用切换器类来实现响应式样式。

  • 导航栏导航也将扩展以占据尽可能多的水平空间，以安全地对齐导航栏内容。

  • 将类.active添加到.nav-link以显示当前页面。

请注意，aria-current属性还应添加到活动的.nav 链接中。

您可以使用编辑和运行选项编辑并尝试运行此代码。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Navbar</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <nav class="navbar navbar-expand-lg bg-body-tertiary">
        <div class="container-fluid">
          <a class="navbar-brand" href="#">Navbar</a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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">
              <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Register here</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Contanct us</a>
              </li>
              <li class="nav-item">
                <a class="nav-link disabled">About us</a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    </body>
    </html>

没有列表的导航栏

由于导航栏使用类进行导航，因此可以完全避免基于列表的方法，如以下示例所示。

您可以使用编辑和运行选项编辑并尝试运行此代码。

  <!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap - Navbar</title>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  <nav class="navbar navbar-expand-lg bg-primary">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Tutorialspoint</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
          <a class="nav-link" href="#">About us</a>
          <a class="nav-link" href="#">Services</a>
          <a class="nav-link disabled">Contanct us</a>
        </div>
      </div>
    </div>
  </nav>
</body>
</html>

带下拉菜单的导航栏

要使用导航栏中的下拉菜单，请添加类.nav-item和.nav-link，如以下示例所示。

您可以使用编辑和运行选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Navbar</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg bg-primary">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">Tutorialspoint</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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">
              <a class="nav-link active" aria-current="page" href="#">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Services</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">About Us</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                Blog
              </a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Blog 1</a></li>
                <li><a class="dropdown-item" href="#">Blog 2</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </body>
  </html>

形式

通过添加.form-control类将各种表单控件放置在导航栏中。

您可以使用编辑和运行选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Navbar</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <nav class="navbar bg-primary">
      <div class="container-fluid">
        <form class="d-flex" role="search">
          <input class="form-control me-2" type="search" placeholder="Search Here.." aria-label="Search">
          <button class="btn btn-outline-warning" type="submit">Search</button>
        </form>
      </div>
    </nav>
  </body>
  </html>

.navbar的子级现在默认使用 flex 布局和justify-content: space- Between 。根据需要使用其他Flex 实用程序来自定义此Behave。

您可以使用编辑和运行选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Navbar</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <nav class="navbar bg-body-tertiary">
      <div class="container-fluid">
        <a class="navbar-brand">Navbar</a>
        <form class="d-flex" role="search">
          <input class="form-control me-2" type="search" placeholder="Search Here..." aria-label="Search">
          <button class="btn btn-outline-info" type="submit">Search</button>
        </form>
      </div>
    </nav>
  </body>
  </html>

当您的导航栏是完整表单或几乎表单时，请使用<form>元素作为容器。

您可以使用编辑和运行选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap - Navbar</title>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  <nav class="navbar bg-body-tertiary">
    <form class="container-fluid">
      <div class="input-group">
        <span class="input-group-text" id="basic-addon1">#</span>
        <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
      </div>
    </form>
  </nav>
</body>
</html>

导航栏表单支持各种按钮。您可以使用垂直对齐实用程序来对齐不同大小的元素。

您可以使用编辑和运行选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Navbar</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <nav class="navbar bg-body-tertiary">
      <form class="container-fluid justify-content-start">
        <button class="btn btn-outline-primary me-2" type="button">Large Button</button>
        <button class="btn btn-sm btn-outline-secondary" type="button">Small Button</button>
      </form>
    </nav>
  </body>
  </html>

文本

添加.navbar-text类来调整文本字符串的垂直对齐和水平间距。

您可以使用编辑和运行选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Navbar</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <nav class="navbar bg-body-tertiary">
      <div class="container-fluid">
        <span class="navbar-text">
         Welcome to the Tutorialspoint!
        </span>
      </div>
    </nav>
  </body>
  </html>

根据需要使用其他组件和实用程序进行自定义，如下所示。

您可以使用编辑和运行选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Navbar</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg bg-body-tertiary">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar w/ text</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarText">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Register here</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Contanct us</a>
            </li>
          </ul>
          <span class="navbar-text">
            Welcome to Tutorialspoint!
          </span>
        </div>
      </div>
    </nav>
  </body>
  </html>

配色方案

v5.3.0 中的新深色导航栏 — 弃用.navbar-dark，转而使用新的data-bs-theme="dark"。将data-bs-theme="dark"添加到.navbar以启用组件特定的颜色模式。
v5.2.0 中的新增功能 - 导航栏主题目前由 CSS 变量提供支持，并且.navbar-light已弃用。CSS 变量应用于.navbar，默认情况下赋予其“浅色”外观，并且可以在.navbar-dark中覆盖。

  • 默认情况下，导航栏是一个“浅色导航栏”，用于浅色背景颜色。

  • 将data-bs-theme="dark"用于父.navbar类以获得深色背景颜色。

  • Net，使用.bg-*实用程序进行自定义。

您可以使用编辑和运行选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Navbar</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <nav class="navbar bg-dark" data-bs-theme="dark">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Register here</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Contanct us</a>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled">About us</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <nav class="navbar bg-primary" data-bs-theme="dark">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Register here</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Contanct us</a>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled">About us</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <nav class="navbar" style="background-color: #e3f2fd;">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Register here</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Contanct us</a>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled">About us</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </body>
  </html>

集装箱

  • 您可以选择将导航栏包装在.container中并将其置于页面中央。但请注意，内部容器仍然是必需的。

  • 在.navbar内添加一个容器，将固定或静态顶部导航栏内容居中。

您可以使用编辑和运行选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap - Navbar</title>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  <div class="container">
    <nav class="navbar navbar-expand-lg bg-primary">
      <div class="container-fluid">
        <a class="navbar-brand" href="###">Tutorialspoint</a>
      </div>
    </nav>
  </div>
</body>
</html>

要修改导航栏中内容的显示宽度，请使用任何响应式容器。

您可以使用编辑和运行选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Navbar</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg bg-body-tertiary">
      <div class="container-md">
        <a class="navbar-brand" href="#">Tutorialspoint</a>
      </div>
    </nav>
  </body>
  </html>

放置

  • 使用位置助手将导航栏定位在非静态位置。选择固定到顶部、固定到底部、固定到顶部（将页面滚动到顶部并停留在那里）或粘到底部（滚动直到页面到达底部并停在那里）。

  • 固定导航栏使用Position: Fixed。这意味着它是从 DOM 的正常流程中提取的，并且可能需要自定义 CSS（例如 上的 padding-top ）以避免与其他元素重叠。

您可以使用编辑和运行选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Navbar</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <nav class="navbar bg-body-tertiary">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">Default Navbar</a>
      </div>
    </nav>
  </body>
  </html>

固定顶

这是使用.fixed-top类实现的。

您可以使用编辑和运行选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Navbar</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <nav class="navbar fixed-top bg-body-tertiary">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar Fixed at Top</a>
      </div>
    </nav>
  </body>
  </html>

固定底

这是使用.fixed-bottom类实现的。

您可以使用编辑和运行选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Navbar</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container-fluid"></div>
      <p>Twitter Bootstrap is the most popular front end framework in the recent time. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript. This tutorial will teach you the basics of Bootstrap Framework using which you can create web projects with ease. The tutorial is divided into sections such as Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components and Bootstrap Plugins. Each of these sections contain related topics with simple and useful examples.</p>
      <p>Twitter Bootstrap is the most popular front end framework in the recent time. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript. This tutorial will teach you the basics of Bootstrap Framework using which you can create web projects with ease. The tutorial is divided into sections such as Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components and Bootstrap Plugins. Each of these sections contain related topics with simple and useful examples.</p>
      <p>Twitter Bootstrap is the most popular front end framework in the recent time. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript. This tutorial will teach you the basics of Bootstrap Framework using which you can create web projects with ease. The tutorial is divided into sections such as Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components and Bootstrap Plugins. Each of these sections contain related topics with simple and useful examples.</p>
      <p>Twitter Bootstrap is the most popular front end framework in the recent time. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript. This tutorial will teach you the basics of Bootstrap Framework using which you can create web projects with ease. The tutorial is divided into sections such as Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components and Bootstrap Plugins. Each of these sections contain related topics with simple and useful examples.</p>
      <p>Twitter Bootstrap is the most popular front end framework in the recent time. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript. This tutorial will teach you the basics of Bootstrap Framework using which you can create web projects with ease. The tutorial is divided into sections such as Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components and Bootstrap Plugins. Each of these sections contain related topics with simple and useful examples.</p>
      <p>Twitter Bootstrap is the most popular front end framework in the recent time. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript. This tutorial will teach you the basics of Bootstrap Framework using which you can create web projects with ease. The tutorial is divided into sections such as Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components and Bootstrap Plugins. Each of these sections contain related topics with simple and useful examples.</p>
      <p>Twitter Bootstrap is the most popular front end framework in the recent time. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript. This tutorial will teach you the basics of Bootstrap Framework using which you can create web projects with ease. The tutorial is divided into sections such as Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components and Bootstrap Plugins. Each of these sections contain related topics with simple and useful examples.</p>
      <p>Twitter Bootstrap is the most popular front end framework in the recent time. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript. This tutorial will teach you the basics of Bootstrap Framework using which you can create web projects with ease. The tutorial is divided into sections such as Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components and Bootstrap Plugins. Each of these sections contain related topics with simple and useful examples.</p>
      <p>Twitter Bootstrap is the most popular front end framework in the recent time. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript. This tutorial will teach you the basics of Bootstrap Framework using which you can create web projects with ease. The tutorial is divided into sections such as Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components and Bootstrap Plugins. Each of these sections contain related topics with simple and useful examples.</p>
      <p>Twitter Bootstrap is the most popular front end framework in the recent time. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript. This tutorial will teach you the basics of Bootstrap Framework using which you can create web projects with ease. The tutorial is divided into sections such as Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components and Bootstrap Plugins. Each of these sections contain related topics with simple and useful examples.</p>
      <p>Twitter Bootstrap is the most popular front end framework in the recent time. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript. This tutorial will teach you the basics of Bootstrap Framework using which you can create web projects with ease. The tutorial is divided into sections such as Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components and Bootstrap Plugins. Each of these sections contain related topics with simple and useful examples.</p>
      <nav class="navbar fixed-bottom bg-body-tertiary">
        <div class="container-fluid">
          <a class="navbar-brand" href="#">Navbar Fixed at Bottom</a>
        </div>
      </nav>
    </div>
  </body>
  </html>

粘顶

这是使用.sticky-top类实现的。

您可以使用编辑和运行选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Navbar</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <nav class="navbar sticky-top bg-body-tertiary">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar Stick at Top</a>
      </div>
    </nav>
  </body>
  </html>

粘底

这是使用.sticky-bottom类实现的。

您可以使用编辑和运行选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Card</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
      <div class="container-fluid">
          <p>Twitter Bootstrap is the most popular front end framework in the recent time. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript. This tutorial will teach you the basics of Bootstrap Framework using which you can create web projects with ease. The tutorial is divided into sections such as Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components and Bootstrap Plugins. Each of these sections contain related topics with simple and useful examples.</p>
          <p>Twitter Bootstrap is the most popular front end framework in the recent time. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript. This tutorial will teach you the basics of Bootstrap Framework using which you can create web projects with ease. The tutorial is divided into sections such as Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components and Bootstrap Plugins. Each of these sections contain related topics with simple and useful examples.</p>
          <p>Twitter Bootstrap is the most popular front end framework in the recent time. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript. This tutorial will teach you the basics of Bootstrap Framework using which you can create web projects with ease. The tutorial is divided into sections such as Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components and Bootstrap Plugins. Each of these sections contain related topics with simple and useful examples.</p>
          <p>Twitter Bootstrap is the most popular front end framework in the recent time. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript. This tutorial will teach you the basics of Bootstrap Framework using which you can create web projects with ease. The tutorial is divided into sections such as Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components and Bootstrap Plugins. Each of these sections contain related topics with simple and useful examples.</p>
          <p>Twitter Bootstrap is the most popular front end framework in the recent time. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript. This tutorial will teach you the basics of Bootstrap Framework using which you can create web projects with ease. The tutorial is divided into sections such as Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components and Bootstrap Plugins. Each of these sections contain related topics with simple and useful examples.</p>
          <p>Twitter Bootstrap is the most popular front end framework in the recent time. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript. This tutorial will teach you the basics of Bootstrap Framework using which you can create web projects with ease. The tutorial is divided into sections such as Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components and Bootstrap Plugins. Each of these sections contain related topics with simple and useful examples.</p>
          <p>Twitter Bootstrap is the most popular front end framework in the recent time. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript. This tutorial will teach you the basics of Bootstrap Framework using which you can create web projects with ease. The tutorial is divided into sections such as Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components and Bootstrap Plugins. Each of these sections contain related topics with simple and useful examples.</p>
          <p>Twitter Bootstrap is the most popular front end framework in the recent time. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript. This tutorial will teach you the basics of Bootstrap Framework using which you can create web projects with ease. The tutorial is divided into sections such as Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components and Bootstrap Plugins. Each of these sections contain related topics with simple and useful examples.</p>
          <p>Twitter Bootstrap is the most popular front end framework in the recent time. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript. This tutorial will teach you the basics of Bootstrap Framework using which you can create web projects with ease. The tutorial is divided into sections such as Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components and Bootstrap Plugins. Each of these sections contain related topics with simple and useful examples.</p>
          <p>Twitter Bootstrap is the most popular front end framework in the recent time. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript. This tutorial will teach you the basics of Bootstrap Framework using which you can create web projects with ease. The tutorial is divided into sections such as Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components and Bootstrap Plugins. Each of these sections contain related topics with simple and useful examples.</p>
          <p>Twitter Bootstrap is the most popular front end framework in the recent time. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript. This tutorial will teach you the basics of Bootstrap Framework using which you can create web projects with ease. The tutorial is divided into sections such as Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components and Bootstrap Plugins. Each of these sections contain related topics with simple and useful examples.</p>
      <nav class="navbar sticky-bottom bg-body-tertiary">
          <div class="container-fluid">
            <a class="navbar-brand" href="#">Sticky bottom</a>
          </div>
      </nav>
      </div>
  </body>
  </html>

  • 要允许在折叠导航栏的可切换内容内垂直滚动，请添加类。navbar-nav-滚动到.navbar-nav。

  • 默认情况下，滚动踢的高度为 75vh（视口高度的 75%）。通过使用 css 属性--bs-navbar-height您可以覆盖高度。

  • 导航栏利用.navbar-nav-scroll和style="--bs-scroll-height: 100px;" ，还有一些额外的边距实用程序以实现最佳间距。

您可以使用编辑和运行选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Navbar</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg bg-primary">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">Tutorialspoint</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarScroll">
          <ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Services</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                Blog
              </a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Blog 1</a></li>
                <li><a class="dropdown-item" href="#">Blog 2</a></li>
              </ul>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled">About us</a>
            </li>
          </ul>
          <form class="d-flex" role="search">
            <input class="form-control me-2" type="search" placeholder="Search here..." aria-label="Search">
            <button class="btn btn-outline-warning" type="submit">Search</button>
          </form>
        </div>
      </div>
    </nav>
  </body>
  </html>

反应Behave

  • 导航栏使用.navbar-toggler、.navbar-collapse和.navbar-expand{-sm|-md|-lg|-xl|-xxl} 类来查找按钮后面折叠的内容。

  • 在导航栏上添加.navbar-expand类，以实现永不折叠的导航栏。不要为总是折叠的导航栏添加.navbar-expand类。

切换器

默认情况下，导航栏切换器是左对齐的，但如果它们跟随同级元素（例如 .navbar -brand），它将自动向右对齐。

您可以使用编辑和运行选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Navbar</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg bg-light">
      <div class="container-fluid">
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
          <a class="navbar-expand" href="#">Tutorialspoint</a>
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Services</a>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled">About us</a>
            </li>
          </ul>
          <form class="d-flex" role="search">
            <input class="form-control me-2" type="search" placeholder="Search here" aria-label="Search">
            <button class="btn btn-outline-warning" type="submit">Search</button>
          </form>
        </div>
      </div>
    </nav>
  </body>
  </html>

左侧为品牌名称，右侧为切换开关

您可以编辑并尝试使用E运行此代码