加入收藏 | 设为首页
我要投稿

小码哥的IT人生

首页 > Web前端 > Bootstrap

Bootstrap 5 导航栏

Bootstrap 2023-08-10 09:26:54小码哥的IT人生shichen

Bootstrap 5 导航栏

导航栏

导航栏是位于页面顶部的导航页眉：

基础的导航栏

通过使用 Bootstrap，导航栏可以扩展或折叠，具体取决于屏幕大小。

请使用 .navbar 类创建标准导航栏，然后是响应式折叠类：.navbar-expand-xxl|xl|lg|md|sm（在特大、超大、大、中型设备上水平排列，或小屏幕上垂直堆叠导航栏）。

如需在导航栏中添加链接，请使用 class="navbar-nav" 的 <ul> 元素（或 <div>）。然后添加带有 .nav-item 类的 <li> 元素，后跟带有 .nav-link 类的 <a> 元素：

示例代码：

<!-- 灰色的水平导航栏在小型屏幕上变为垂直 -->
<nav class="navbar navbar-expand-sm bg-light">
  <div class="container-fluid">
    <!-- 链接 -->
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">链接 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">链接 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">链接 3</a>
      </li>
    </ul>
  </div>
</nav>

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-light">
  <div class="container-fluid">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">链接 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">链接 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">链接 3</a>
      </li>
    </ul>
  </div>
</nav>
<div class="container-fluid mt-3">
  <h3>基础的导航栏</h3>
  <p>导航栏是位于页面顶部的导航标题。</p>
  <p>navbar-expand-xxl|xl|lg|md|sm 类确定导航栏何时应垂直堆叠（在特大、超大、大、中或小屏幕上）。</p>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

垂直导航栏

删除 .navbar-expand-* 类可创建始终垂直的导航栏：

示例代码：

<!-- 灰色的垂直导航栏 -->
<nav class="navbar bg-light">
  ...
</nav>

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/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="#">链接 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">链接 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">链接 3</a>
      </li>
    </ul>
  </div>
</nav>
<div class="container-fluid mt-3">
  <h3>垂直导航栏</h3>
  <p>导航栏是位于页面顶部的导航标题。</p>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

居中的导航栏

添加 .justify-content-center 类可将导航栏居中：

示例代码：

<nav class="navbar navbar-expand-sm bg-light justify-content-center">
  ...
</nav>

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/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="#">链接 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">链接 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">链接 3</a>
    </li>
  </ul>
</nav>
<div class="container-fluid mt-3">
  <h3>居中的导航栏</h3>
  <p>请使用 .justify-content-center 类将导航栏居中。</p>
  <p>在这个例子中，导航栏将在中、大和超大屏幕上居中。在小屏幕上，它将垂直和左对齐显示（由于 .navbar-expand-sm 类）。</p>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

彩色导航栏

请使用任何 .bg-color 类来更改导航栏的背景颜色：

  1. .bg-primary
  2. .bg-success
  3. .bg-info
  4. .bg-warning
  5. .bg-danger
  6. .bg-secondary
  7. .bg-dark
  8. .bg-light

提示：请使用 .navbar-dark 类为导航栏中的所有链接添加白色文本颜色，或使用 .navbar-light 类添加黑色文本颜色。

示例代码：

<!-- 灰色背景，白色文本 -->
<nav class="navbar navbar-expand-sm bg-light navbar-light">
  <div class="container-fluid">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link active" href="#">活动</a>
      </li>
     <li class="nav-item">
        <a class="nav-link" href="#">链接</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">链接</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">禁用</a>
      </li>
    </ul>
  </div>
</nav>
<!-- 黑色背景，白色文本 -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav>
<!-- 蓝色背景，白色文本 -->
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">...</nav>

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
  <h3>彩色导航栏</h3>
  <p>请使用任何 .bg-color 类来更改导航栏的背景颜色：</p>
  <p>提示：请使用 .navbar-dark 类为导航栏中的所有链接添加白色文本颜色，或使用 .navbar-light 类添加黑色文本颜色。</p>
</div>
<nav class="navbar navbar-expand-sm bg-light navbar-light">
  <div class="container-fluid">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link active" href="#">活动</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">链接</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">链接</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">禁用</a>
      </li>
    </ul>
  </div>
</nav>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link active" href="#">活动</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">链接</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">链接</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">禁用</a>
      </li>
    </ul>
  </div>
</nav>
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">
  <div class="container-fluid">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link active" href="#">活动</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">链接</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">链接</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">禁用</a>
      </li>
    </ul>
  </div>
</nav>
<nav class="navbar navbar-expand-sm bg-success navbar-dark">
  <div class="container-fluid">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link active" href="#">活动</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">链接</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">链接</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">禁用</a>
      </li>
    </ul>
  </div>
</nav>
<nav class="navbar navbar-expand-sm bg-info navbar-dark">
  <div class="container-fluid">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link active" href="#">活动</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">链接</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">链接</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">禁用</a>
      </li>
    </ul>
  </div>
</nav>
<nav class="navbar navbar-expand-sm bg-warning navbar-dark">
  <div class="container-fluid">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link active" href="#">活动</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">链接</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">链接</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">禁用</a>
      </li>
    </ul>
  </div>
</nav>
<nav class="navbar navbar-expand-sm bg-danger navbar-dark">
  <div class="container-fluid">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link active" href="#">活动</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">链接</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">链接</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">禁用</a>
      </li>
    </ul>
  </div>
</nav>
<nav class="navbar navbar-expand-sm bg-secondary navbar-dark">
  <div class="container-fluid">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link active" href="#">活动</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">链接</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">链接</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">禁用</a>
      </li>
    </ul>
  </div>
</nav>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

活动/禁用状态：将 .active 类添加到 <a> 元素可突出显示当前链接，或添加 .disabled 类来指示链接不可点击。

品牌 / 标志

.navbar-brand 类用于突出显示页面的品牌/标志/项目名称：

示例代码：

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Logo</a>
  </div>
</nav>

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Logo</a>
  </div>
</nav>
<div class="container-fluid mt-3">
  <h3>品牌 / 标志</h3>
  <p>.navbar-brand 类用于突出显示页面的品牌/标志/项目名称。</p>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

如果将 .navbar-brand 类与图像一起使用时，Bootstrap 5 将自动设置图像样式，在垂直方向适应导航栏。

示例代码：

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="logo.png" alt="Avatar Logo" style="width:40px;" class="rounded-pill">
    </a>
  </div>
</nav>

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="/i/css/avatar.png" alt="Logo" style="width:40px;" class="rounded-pill">
    </a>
  </div>
</nav>
<div class="container-fluid mt-3">
  <h3>品牌 / 标志</h3>
  <p>如果将 .navbar-brand 类与图像一起使用时，Bootstrap 5 将自动设置图像样式，在垂直方向适应导航栏。</p>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

导航栏文本

请使用 .navbar-text 类垂直对齐导航栏中非链接的任何元素（确保正确的内边距和文本颜色）。

示例代码：

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <span class="navbar-text">导航栏文本</span>
  </div>
</nav>

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
     <span class="navbar-text">导航栏文本</span>
  </div>
</nav>
<div class="container-fluid mt-3">
  <h3>导航栏文本</h3>
  <p>U请使用 .navbar-text 类垂直对齐导航栏中非链接的任何元素（确保正确的内边距和文本颜色）。</p>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

很多时候，尤其是在小屏幕上，您希望隐藏导航链接并用一个按钮替代它们，并在单击该按钮时显示它们。

如需创建可折叠导航栏，请使用已设置 class="navbar-toggler"、data-bs-toggle="collapse" 和 data-bs-target="#thetarget" 的按钮。然后将导航栏内容（链接等）包裹在 class="collapse navbar-collapse" 的 <div> 元素中，后跟与按钮的 data-bs-target 匹配的 id："thetarget"。

示例代码：

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Logo</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#">链接</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">链接</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">链接</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Logo</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#">链接</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">链接</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">链接</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
<div class="container-fluid mt-3">
  <h3>可折叠导航栏</h3>
  <p>在此例中，导航栏在小屏幕上隐藏，并由右上角的按钮替换（请尝试重新调整此窗口的大小）。</p>
  <p>只有当按钮被点击时，导航栏才会显示。</p>
  <p>提示：您还可以删除 .navbar-expand-md 类以始终隐藏导航栏链接并显示切换按钮。</p>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

提示：您还可以删除 .navbar-expand-md 类以始终隐藏导航栏链接并显示切换按钮。

下拉菜单导航栏

导航栏可容纳下拉菜单：

示例代码：

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">下拉菜单</a>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">链接</a></li>
    <li><a class="dropdown-item" href="#">另一个链接</a></li>
    <li><a class="dropdown-item" href="#">第三个链接</a></li>
  </ul>
</li>

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Logo</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#">链接</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">链接</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">链接</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">下拉菜单</a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">链接</a></li>
            <li><a class="dropdown-item" href="#">另一个链接</a></li>
            <li><a class="dropdown-item" href="#">第三个链接</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>
<div class="container-fluid mt-3">
  <h3>下拉菜单导航栏</h3>
  <p>本例在导航栏中添加了一个下拉菜单。</p>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

导航栏菜单和按钮

您还可以在导航栏中包含表单：

示例代码：

<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="javascript:void(0)">Logo</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mynavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="mynavbar">
      <ul class="navbar-nav me-auto">
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">链接</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">链接</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">链接</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="text" placeholder="Search">
        <button class="btn btn-primary" type="button">Search</button>
      </form>
    </div>
  </div>
</nav>

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="javascript:void(0)">Logo</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mynavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="mynavbar">
      <ul class="navbar-nav me-auto">
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">链接</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">链接</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">链接</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="text" placeholder="Search">
        <button class="btn btn-primary" type="button">Search</button>
      </form>
    </div>
  </div>
</nav>
<div class="container-fluid mt-3">
  <h3>导航栏表单</h3>
  <p>您还可以在导航栏中包含表单。</p>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

位置固定的导航栏

导航栏也可以固定在页面的顶部或底部。

固定导航栏会在独立于页面滚动的固定位置（顶部或底部）保持可见。

.fixed-top 类使导航栏固定在页面的顶部：

示例代码：

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
  ...
</nav>

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body style="height:1500px">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">固定在顶部</a>
  </div>
</nav>
<div class="container-fluid" style="margin-top:80px">
  <h3>固定在顶部的导航栏</h3>
  <p>固定导航栏在独立于页面滚动的固定位置（顶部或底部）保持可见。</p>
  <h1>请滚动此页面来查看效果</h1>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

请使用 .fixed-bottom 类把导航栏停留在页面底部：

示例代码：

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
  ...
</nav>

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body style="height:1500px">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">固定在底部</a>
  </div>
</nav>
<div class="container-fluid"><br>
  <h3>固定在底部的导航栏</h3>
  <p>固定导航栏在独立于页面滚动的固定位置（顶部或底部）保持可见。</p>
  <h1>请滚动此页面来查看效果</h1>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

请使用 .sticky-top 类使导航栏在滚动经过它时固定/停留在页面的顶部。

注释：此类在 IE11 及更早版本中不起作用（将其视为 position:relative）。

示例代码：

<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
  ...
</nav>

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body style="height:1500px">
<div class="container-fluid mt-3">
  <br>
  <h3>粘性导航栏</h3>
  <p>当您滚动浏览时，粘性导航栏会固定在页面顶部。</p>
  <p>请滚动此页面来查看效果。<b>注释：</b>sticky-top 在 IE11 及更早版本中不起作用。</p>
</div>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">粘到顶部</a>
  </div>
</nav>
<div class="container-fluid"><br>
  <p>一些示例文本。一些示例文本。一些示例文本。一些示例文本。一些示例文本。一些示例文本。一些示例文本。一些示例文本。</p>
  <p>一些示例文本。一些示例文本。一些示例文本。一些示例文本。一些示例文本。一些示例文本。一些示例文本。一些示例文本。</p>
  <p>一些示例文本。一些示例文本。一些示例文本。一些示例文本。一些示例文本。一些示例文本。一些示例文本。一些示例文本。</p>
  <p>一些示例文本。一些示例文本。一些示例文本。一些示例文本。一些示例文本。一些示例文本。一些示例文本。一些示例文本。</p>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

相关阅读

版权所有 © 小码哥的IT人生
Copyright © phpcodeweb All Rights Reserved
 ICP备案号：苏ICP备17019232号-2  

苏公网安备 32030202000762号

© 2021-2024