Bootstrap -默认情况下折叠的侧边栏

基础概念

Bootstrap 是一个流行的前端框架，用于快速开发响应式和移动优先的网站。它提供了一系列预定义的 CSS 类和 JavaScript 插件，简化了网页设计和开发过程。

折叠的侧边栏（Collapsed Sidebar）是 Bootstrap 中常见的一种布局方式，通常用于导航菜单。默认情况下，侧边栏是折叠的，用户可以通过点击某个按钮（如汉堡图标）来展开或折叠侧边栏。

类型

Bootstrap 的折叠侧边栏通常有以下几种类型：

左侧折叠侧边栏：侧边栏位于页面左侧，折叠后显示一个图标，点击图标展开侧边栏。
右侧折叠侧边栏：侧边栏位于页面右侧，折叠和展开方式与左侧类似。
顶部折叠导航栏：导航栏位于页面顶部，折叠后显示一个下拉菜单，点击下拉菜单展开导航项。

应用场景

折叠侧边栏广泛应用于各种网站和应用中，特别是需要节省屏幕空间、提供简洁导航的场景，如：

管理后台系统
移动端应用
博客和新闻网站

示例代码

以下是一个简单的 Bootstrap 折叠侧边栏示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Collapsed Sidebar Example</title>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .sidebar {
      height: 100vh;
      position: sticky;
      top: 0;
      z-index: 100;
      padding-top: 20px;
    }
  </style>
</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#sidebar" aria-controls="sidebar" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </nav>

  <div class="collapse navbar-collapse" id="sidebar">
    <div class="sidebar">
      <ul class="nav flex-column">
        <li class="nav-item">
          <a class="nav-link active" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Profile</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Settings</a>
        </li>
      </ul>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>