详解bootstrap自定义侧边导航栏的方法

1. Bootstrap自定义侧边导航栏介绍

Bootstrap是一个流行的前端框架，它提供了众多现成的UI组件可以直接使用，同时也支持自定义样式，满足个性化需求。侧边导航栏是一个常见的组件，它可以为网站提供导航和菜单功能。Bootstrap提供了一些默认的侧边导航栏样式，开发者可以在此基础上进行修改，也可以完全自定义。本文将详细介绍如何使用Bootstrap自定义侧边导航栏。

2. 快速搭建一个默认的侧边导航栏

在开始自定义侧边导航栏之前，我们先来快速搭建一个默认的侧边导航栏。使用Bootstrap的步骤如下：

2.1 引入Bootstrap库文件

通过CDN引入Bootstrap库文件，代码如下：

<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" >
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>

2.2 创建侧边导航栏

创建一个基本的结构，包括一个侧边导航栏和一个主要内容区域，代码如下：

<div class="container-fluid">
  <div class="row">
    <nav class="col-md-3 col-xl-2 d-none d-md-block bg-light sidebar">
      <div class="sidebar-sticky">
        <ul class="nav flex-column">
          <li class="nav-item">
            <a class="nav-link active" href="#">
              <span data-feather="home"></span>
              Dashboard <span class="sr-only">(current)</span>
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
              <span data-feather="file"></span>
              Orders
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
              <span data-feather="shopping-cart"></span>
              Products
            </a>
          </li>
        </ul>
      </div>
    </nav>
    <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
      <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
        <h1 class="h2">Dashboard</h1>
        <div class="btn-toolbar mb-2 mb-md-0">
          <div class="btn-group mr-2">
            <button type="button" class="btn btn-sm btn-outline-secondary">Share</button>
            <button type="button" class="btn btn-sm btn-outline-secondary">Export</button>
          </div>
          <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle">
            <span data-feather="calendar"></span>
            This week
          </button>
        </div>
      </div>
      <canvas class="my-4 w-100" id="myChart" width="900" height="380"></canvas>
    </main>
  </div>
</div>

2.3 侧边导航栏效果

此时我们打开网页，就会看到一个默认的侧边导航栏，如下图所示：

图 2.1 默认的侧边导航栏效果

3. 自定义侧边导航栏

现在我们开始自定义侧边导航栏，首先是修改导航栏的颜色和大小，代码如下：

.sidebar{
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  padding: 48px 0 0;
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
  background-color: #f5f6f7;
}
.sidebar-sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 48px; 
  height: calc(100vh - 48px);
  padding-top: .5rem;
  overflow-x: hidden;
  overflow-y: auto;
  }
  @supports ((position: -webkit-sticky) or (position: sticky)) {
    .sidebar-sticky {
      margin-top: 0;
    }
  }

此时侧边导航栏已经变成了灰色，如下图所示：

图 3.1 灰色的侧边导航栏效果

接下来我们来修改导航栏的字体和字号，代码如下：

.sidebar .nav-link {
  font-weight: 500;
  font-size: 16px;
}
.sidebar .nav-link.active,
.sidebar .nav-link:hover {
  color: #007bff;
}

此时字体大小和字体颜色都变了，如下图所示：

图 3.2 修改字体大小和颜色后的侧边导航栏效果

现在我们来添加一个子菜单，代码如下：

<li class="nav-item">
  <a class="nav-link" href="#">
    <span data-feather="file"></span>
    Products
  </a>
  <ul class="nav flex-column pl-3">
    <li class="nav-item">
      <a class="nav-link" href="#">
        <span data-feather="plus-circle"></span>
        Add products
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">
        <span data-feather="edit"></span>
        Edit products
      </a>
    </li>
  </ul>
</li> 

此时导航栏就多了一个子菜单，如图所示：

图 3.3 添加子菜单后的侧边导航栏效果

4. 总结

至此，我们已经学习了如何使用Bootstrap自定义侧边导航栏。通过以上的例子，可以看出Bootstrap不仅能快速搭建出一个页面，而且还可以自定义样式，满足不同的需求。在实际工作中，开发者可以根据具体需求进行修改，搭建出不同风格的导航栏。