bootstrap4 侧边导航栏

如何实现？

Bootstrap 4 提供了一个侧边栏的组件，可以通过以下方式实现：

1.在 HTML 文件中添加一个带有类 "navbar" 的 "nav" 元素，以及一个 id 为 "sidebar" 的 "ul" 元素。

2.在 CSS 文件中定义 "sidebar" 的样式，包括宽度、背景颜色、字体大小等。

3.添加 JavaScript 代码，以便在单击“导航栏切换”按钮时切换侧边栏的可见性。

例如：

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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="#">Link</a>
      </li>
      ...
    </ul>
  </div>
</nav>

<ul id="sidebar">
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
</ul>

<style>
#sidebar {
  width: 250px;
  background-color: #f8f9fa;
  font-size: 18px;
}

#sidebar li {
  padding: 10px;
}

.navbar-toggler-icon {
  background-image: url(https://cdn.jsdelivr.net/npm/bootstrap@4.1.0@@bootstrap%2Fdist%2F
  js%2Fvendor%2Fbootstrap%2Ficons.svg);
}

@media (max-width: 991.98px) {
  #sidebar {
    display: none;
  }
}
</style>

<script>
$(document).ready(function() {
  $('.navbar-toggler').click(function() {
    $('#sidebar').toggle();
  });
});
</script>

然后尝试打开页面并单击导航栏切换按钮，应该可以看到侧边栏的切换效果。