bootstrap侧边栏收缩

Bootstrap 提供了一个侧边栏组件 `navbar`，可以通过设置 `data-toggle="collapse"` 和 `data-target="#id"` 来实现侧边栏的收缩。

具体步骤如下：

1. 在 HTML 文件中添加 `navbar` 和 `navbar-toggler` 组件，设置 `data-toggle` 和 `data-target` 属性。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Brand</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

2. 在 CSS 文件中定义侧边栏收缩时的样式。

@media (max-width: 768px) {
  .navbar-collapse {
    position: fixed;
    top: 56px;
    bottom: 0;
    left: -100%;
    width: 100%;
    height: calc(100vh - 56px);
    padding-top: .5rem;
    z-index: 1;
    overflow-y: auto;
    transition: all .3s ease-in-out;
  }
  .navbar-collapse.show {
    left: 0;
  }
}

3. 在 JavaScript 文件中添加侧边栏收缩时的事件。

$('.navbar-toggler').click(function() {
  $('body').toggleClass('noscroll');
  $('.navbar-collapse').toggleClass('show');
});

这样就可以实现 Bootstrap 侧边栏的收缩效果了。