Bootstrap 4使用切换按钮连接侧边菜单(响应)

基础概念

Bootstrap 4 是一个流行的前端框架，用于快速开发响应式和移动优先的网站。切换按钮（Toggle Button）通常用于在用户界面中切换状态，例如打开或关闭侧边菜单。

类型

在 Bootstrap 4 中，切换按钮通常是通过 button 元素结合特定的类来实现。常用的类包括：

btn：基本按钮样式。
btn-toggle：用于创建切换按钮。
active：表示按钮处于激活状态。

应用场景

切换按钮常用于以下场景：

侧边菜单：通过点击切换按钮打开或关闭侧边菜单。
选项卡：在不同内容区域之间切换。
开关控件：用于开启或关闭某个功能。

示例代码

以下是一个使用 Bootstrap 4 实现切换按钮连接侧边菜单的示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 4 Toggle Button Example</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <style>
    .sidebar {
      height: 100vh;
      position: fixed;
      top: 0;
      left: 0;
      width: 250px;
      background-color: #f8f9fa;
      transform: translateX(-250px);
      transition: transform 0.3s ease-in-out;
    }
    .sidebar.active {
      transform: translateX(0);
    }
  </style>
</head>
<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-2">
        <button id="toggle-btn" class="btn btn-primary">Toggle Menu</button>
      </div>
      <div class="col-md-10">
        <h1>Main Content</h1>
        <p>This is the main content area.</p>
      </div>
    </div>
  </div>
  <div id="sidebar" class="sidebar">
    <ul class="list-group">
      <li class="list-group-item">Menu Item 1</li>
      <li class="list-group-item">Menu Item 2</li>
      <li class="list-group-item">Menu Item 3</li>
    </ul>
  </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>
  <script>
    $(document).ready(function() {
      $('#toggle-btn').click(function() {
        $('#sidebar').toggleClass('active');
      });
    });
  </script>
</body>
</html>