<!--控制内容的隐藏和显示,在<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>