Bootstrap 折叠（Collapse）插件用法实例详解

什么是 Bootstrap 折叠（Collapse）插件

Bootstrap 折叠（Collapse）插件是一个 JavaScript 插件，用于折叠和展开内容。它可以用于隐藏或显示大段的文本或其他 HTML 元素，只需要添加一些简单的 HTML 和 JavaScript 代码即可。

如何使用 Bootstrap 折叠（Collapse）插件

要使用 Bootstrap 折叠（Collapse）插件，需要首先引入 Bootstrap 的 JavaScript 文件，然后添加一些 HTML、CSS 和 JavaScript 代码。

引入 Bootstrap 的 JavaScript 文件

在网页的 head 标签中引入 Bootstrap 的 JavaScript 文件：

<head>
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>

添加 HTML 代码

添加需要被折叠的内容，通常使用 <div> 元素来包裹：

<div id="content">
  <p>这是一段需要被折叠的文本。</p>
  <p>这是另外一段需要被折叠的文本。</p>
</div>

在需要折叠的元素外包裹一个容器 <div>，添加 data-toggle="collapse" 和 data-target="#content" 属性，其中 data-target 的值为需要被折叠的元素 id。例如：

<div class="container">
  <button class="btn btn-secondary" type="button" data-toggle="collapse" data-target="#content" aria-expanded="false" aria-controls="content">
    折叠内容
  </button>
  <div id="content" class="collapse">
    <p>这是一段需要被折叠的文本。</p>
    <p>这是另外一段需要被折叠的文本。</p>
  </div>
</div>

在上面的例子中，当用户点击 “折叠内容” 按钮时， content 容器内的 p 元素就会被折叠起来，再次点击按钮，则可将折叠部分展开。

定义折叠内容的状态

我们还可以在标签内添加一些属性来定义折叠内容的状态，如：

aria-expanded="true"：表示默认情况下折叠内容是展开的
aria-controls="content"：表示折叠内容的 id 为 content

示例代码如下：

<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="true" aria-controls="collapseExample">
  展开内容
</button>
<div class="collapse in" id="collapseExample">
  <div class="card card-body">
    这是要折叠的内容
  </div>
</div>

示例说明

示例一：折叠列表

使用 Bootstrap 折叠（Collapse）插件可以方便地折叠和展开列表。

<div class="container">
  <h2>折叠列表</h2>
  <ul class="list-group">
    <li class="list-group-item" data-toggle="collapse" data-target="#item1">条目 1</li>
    <div id="item1" class="collapse">
      <p>这是条目 1 的详细内容。</p>
    </div>
    <li class="list-group-item" data-toggle="collapse" data-target="#item2">条目 2</li>
    <div id="item2" class="collapse">
      <p>这是条目 2 的详细内容。</p>
    </div>
    <li class="list-group-item" data-toggle="collapse" data-target="#item3">条目 3</li>
    <div id="item3" class="collapse">
      <p>这是条目 3 的详细内容。</p>
    </div>
  </ul>
</div>

示例二：折叠图片

使用 Bootstrap 折叠（Collapse）插件可以方便地实现折叠图片效果，只需要将图片放在一个容器中，然后添加 data-toggle="collapse" 和 data-target 属性即可。

<div class="container">
  <h2>折叠图片</h2>
  <div class="card">
    <img class="card-img-top" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg" alt="Card image cap" data-toggle="collapse" data-target="#image">
    <div id="image" class="collapse">
      <div class="card-body">
        <p>这是一张漂亮的图片。</p>
      </div>
    </div>
  </div>
</div>

以上两个示例仅仅是 Bootstrap 折叠（Collapse）插件用法的冰山一角，开发者可以根据实际需求，自由发挥，实现更多出彩的效果。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Bootstrap 折叠（Collapse）插件用法实例详解 - Python技术站

Bootstrap 折叠（Collapse）插件用法实例详解

Bootstrap 折叠（Collapse）插件用法实例详解

什么是 Bootstrap 折叠（Collapse）插件

如何使用 Bootstrap 折叠（Collapse）插件

引入 Bootstrap 的 JavaScript 文件

添加 HTML 代码

定义折叠内容的状态

示例说明

示例一：折叠列表

示例二：折叠图片

相关文章