Bootstrap 折叠

原创于 2025-11-27 22:04:50 发布 · 199 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#开发语言

Bootstrap 折叠

引言

Bootstrap 是一个流行的前端框架，它提供了一系列的工具和组件，使得开发响应式网站变得更加简单和高效。在 Bootstrap 中，折叠（Collapse）组件是一个强大的工具，它允许用户通过点击来展开或折叠内容。本文将详细介绍 Bootstrap 折叠组件的使用方法、配置选项以及如何与其它组件结合使用。

一、折叠组件概述

折叠组件（Collapse）允许用户通过点击按钮或链接来展开或折叠内容区域。它通常用于显示或隐藏大量的内容，例如侧边栏、面板、模态框等。

1.1 基本用法

要使用折叠组件，首先需要在 HTML 中定义一个折叠面板，并为它添加一个用于触发折叠的按钮或链接。

<div class="collapse" id="collapseExample">
  <div class="card card-body">
    ...
  </div>
</div>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  点击我
</button>

在上面的代码中，<div class="collapse"> 是折叠面板的容器，<button> 是触发折叠的按钮。data-toggle="collapse" 属性用于指定折叠的目标，data-target="#collapseExample" 指定了折叠面板的 ID，aria-expanded 和 aria-controls 属性用于辅助功能。

1.2 配置选项

折叠组件提供了多种配置选项，以下是一些常用的选项：

data-parent="#id"：指定折叠面板的父容器，以便同时折叠多个面板。
data-auto-collapse="true"：当激活一个面板时，自动折叠其他已激活的面板。
data-allow-collapse="true"：允许在激活一个面板的同时，折叠另一个面板。

二、折叠组件与其它组件的结合

折叠组件可以与 Bootstrap 的其它组件结合使用，例如导航栏、模态框等。

2.1 与导航栏结合

折叠组件可以用于隐藏导航栏中的内容，以便在移动设备上更好地显示。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <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="#">首页 <span class="sr-only">(current)</span></a>
      </li>
      ...
    </ul>
  </div>
</nav>

在上面的代码中，折叠组件用于隐藏导航栏中的内容。

2.2 与模态框结合

折叠组件可以用于显示模态框中的内容。

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  打开模态框
</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="myModalLabel">模态框标题</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="collapse" id="collapseModal">
          <div class="card card-body">
            ...
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">保存</button>
      </div>
    </div>
  </div>
</div>

在上面的代码中，折叠组件用于显示模态框中的内容。