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技术站
微信扫一扫 
支付宝扫一扫 