Bootstrap折叠文本装饰

基础概念

Bootstrap 折叠文本装饰（Collapse）是一种用于创建可折叠内容区域的组件。它允许用户通过点击标题来展开或折叠内容。这种组件在网页设计中非常常见，用于节省空间并提高用户体验。

类型

Bootstrap 折叠组件主要有以下几种类型：

手风琴（Accordion）：多个折叠面板，每次只能展开一个。
折叠面板（Collapse Panel）：单个折叠面板，可以独立展开和折叠。
导航栏（Navbar）：折叠导航栏，适用于移动设备。

应用场景

FAQ 页面：常见问题解答页面，用户可以点击问题展开答案。
导航菜单：在移动设备上，导航菜单可以折叠起来，节省屏幕空间。
详细信息展示：在列表或表格中，用户可以点击某一项展开详细信息。

示例代码

以下是一个简单的 Bootstrap 折叠面板示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Collapse Example</title>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container">
    <h2>Collapse Example</h2>
    <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">
      Click to expand/collapse
    </button>
    <div id="demo" class="collapse">
      <p>This is the content that will be expanded or collapsed.</p>
    </div>
  </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>
</body>
</html>