Bootstrap 元件案例---手風琴：摺疊和卡片
<!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>手風琴：摺疊和卡片</h1>
<div id="accordion">
<!--卡片1-->
<div class="card">
<!--卡片頭部-->
<div class="card-header">
<a href="#collapseOne" class="card-link" data-toggle="collapse">選項內容一</a>
</div>
<!--卡片主要內容-->
<div id="collapseOne" class="collapse" data-parent="#accordion">
<div class="card-body">
內容1：努力實現夢想，加油！！！
</div>
</div>
</div>
<!--卡片2-->
<div class="card">
<!--卡片頭部-->
<div class="card-header">
<a href="#collapseTwo" class="card-link" data-toggle="collapse">選項內容二</a>
</div>
<!--卡片主要內容-->
<div id="collapseTwo" class="collapse" data-parent="#accordion">
<div class="card-body">
內容2：學習改變命運！！！
</div>
</div>
</div>
<div class="card">
<!--卡片頭部-->
<div class="card-header">
<a href="#collapseThree" class="card-link" data-toggle="collapse">選項內容三</a>
</div>
<!--卡片主要內容-->
<div id="collapseThree" class="collapse" data-parent="#accordion">
<div class="card-body">
內容3：好好學習，學習改變命運！！！
</div>
</div>
</div>
</div>
</div>
<br/><br/><br/><br/><br/><br/>
</body>
</html>