默认情况下如何使用Bootstrap关闭侧边栏？

在使用Bootstrap开发响应式网站时，有时需要使用一个侧边栏来展示一些额外的导航或内容。在某些情况下，我们需要让这个侧边栏默认是关闭状态，只有当用户点击某个按钮或链接时才会展开。Bootstrap提供了一些内置的组件来实现这一功能。

使用Collapse组件

Bootstrap的Collapse组件是一个很方便的解决方案。它会根据传入的元素ID自动为其添加展开/折叠的功能。

下面是一个示例：

<!-- Button trigger collapsible content -->
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#sidebar" aria-expanded="false" aria-controls="sidebar">
  Toggle Sidebar
</button>

<!-- Collapsible content -->
<div class="collapse" id="sidebar">
  <div class="card card-body">
    Sidebar content goes here
  </div>
</div>

在这个示例中，我们先创建了一个按钮，并为其添加了data-toggle和data-target属性，以打开或关闭一个ID为sidebar的元素。接下来，我们创建了一个div，并为其添加了一个collapse类和一个与按钮data-target属性相同的ID值。这个div中的内容就是我们想要展示的侧边栏内容。

自定义Collapse组件

如果您想要自定义Collapse组件，可以使用Bootstrap的JavaScript API。

下面是一个示例：

<!-- Button trigger custom collapsible content -->
<button class="btn btn-primary" type="button" id="toggle-sidebar">
  Toggle Sidebar
</button>

<!-- Custom collapsible content -->
<div class="custom-collapse" id="sidebarCustom">
  <div class="card card-body">
    Sidebar content goes here
  </div>
</div>

<!-- Include Bootstrap's JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js"></script>
<script>
  // Using Bootstrap's JavaScript API to toggle collapse on button click
  var myCollapse = document.getElementById('sidebarCustom')
  var toggleButton = document.getElementById('toggle-sidebar')

  toggleButton.addEventListener('click', function() {
    if (myCollapse.classList.contains('show')) {
      // hide the collapse
      bootstrap.Collapse.getInstance(myCollapse).hide()
    } else {
      // show the collapse
      bootstrap.Collapse.getInstance(myCollapse).show()
    }
  })
</script>

在这个示例中，我们创建了一个自定义的collapse组件，并为其添加了一个与ID值相同的custom-collapse类名。我们还创建了一个按钮，并为其添加了一个ID。接下来，我们使用Bootstrap的JavaScript API来创建一个collapse实例，并在按钮点击时打开或关闭它。

需要注意的是，Bootstrap的JavaScript API需要引入Bootstrap的JavaScript文件。此外，我们的JavaScript代码必须在页面加载完成后运行，否则可能导致无法找到相应的元素。

总结

通过使用Bootstrap的Collapse组件和JavaScript API，我们可以轻松地实现一个默认情况下关闭的侧边栏。无论采用内置的Collapse组件还是自定义Collapse组件，我们都可以根据自己的需要来选择最合适的方案。