Bootstrap5 侧边栏导航学习笔记

简介

Bootstrap5 能够快速、简单地搭建出美观、响应式的网站。其中侧边栏导航是常用的页面组件之一，本文将介绍如何使用 Bootstrap5 实现一个简单的侧边栏导航。

步骤

1. 引入 Bootstrap5 样式表和脚本文件

在 HTML 文件中引入 Bootstrap5 样式表和脚本文件，代码如下：

htmlCopy Code
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"></script>

2. 添加 HTML 结构

添加一些基本的 HTML 结构，包括顶部导航栏和侧边栏导航，代码如下：

htmlCopy Code
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Brand</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
      <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" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<div class="container-fluid">
  <div class="row">
    <nav class="col-md-3 col-lg-2 d-none d-md-block bg-light sidebar">
      <div class="position-sticky pt-3">
        <ul class="nav flex-column">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Dashboard</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Orders</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Products</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Customers</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Reports</a>
          </li>
        </ul>
      </div>
    </nav>
    <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
      <h1>Dashboard</h1>
      <p class="lead">Welcome to the dashboard!</p>
    </main>
  </div>
</div>

3. 添加 CSS 样式

添加一些 CSS 样式以使页面布局更加美观，代码如下：

cssCopy Code
.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 100; /* 要大于 main 的 z-index */
  padding: 48px 0 0; /* 向下留出空白 */
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}

.nav-link {
  font-weight: 500;
  color: #333;
}

.sidebar .nav-link.active {
  color: #0d6efd;
}

.main {
  padding: 0 24px;
}

实例

以下是一个基于 Bootstrap5 的侧边栏导航实例。

结论

使用 Bootstrap5 能够快速、简单地实现美观且响应式的页面组件。在本文中，我们介绍了如何使用 Bootstrap5 快速搭建一个简单的侧边栏导航。