本文介绍如何使用Bootstrap框架实现页面元素的折叠效果。通过在按钮或链接上添加data-toggle=collapse属性，并设置data-target=#id指向折叠内容的ID，即可轻松实现内容的隐藏与显示。文章提供了两个具体的实例，分别展示了使用按钮和链接触发的折叠效果。
<!--控制内容的隐藏和显示，在<a>或<button>元素上添加data-toggle="collapse"属性。data-target="#id"属性是对应折叠的内容。
注意：<a>元素上可以使用href属性来代替data-target属性。
ex:
<a href="#demo1" class="btn btn-warning" data-toggle="collapse">折叠效果2</a>
<div id="demo1" class="collapse">
这是折叠内容
</div>-->
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<title></title>
<link rel="stylesheet" href="css/bootstrap.css"/>
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>折叠1</h1>
<!--toggle切换键 collapse折叠-->
<button data-toggle="collapse" data-target="#demo">折叠效果</button>
<div id="demo" class="collapse">这是折叠1 Lorem </div>
<h1>折叠2</h1>
<a href="#demo1" class="btn btn-warning" data-toggle="collapse">折叠效果2</a>
<div id="demo1" class="collapse">
这是折叠2：Lorem </div>
</div>
<br/><br/><br/><br/><br/><br/>
</body>
</html>
扫一扫
343
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
