折叠组件
<h3>折叠</h3>
<!--<a class="btn btn-info" data-toggle="collapse" href="#d1">折叠按钮</a>-->
<button data-toggle="collapse" data-target="#d1">折叠按钮</button>
<div id="d1" class="collapse">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
data-toggle指以什么事件触发
data-target指事件的目标
collapse ------ 折叠
卡片组件
一个区域，内部内容都是垂直排列，都可以使用卡片
组成结构：
div.card
>div.card-header > 代表直接子元素
+div.card-body + 代表兄弟元素
+div.card-footer
a.card-link
<h3>卡片</h3>
<div class="card">
<div class="card-header">
<h4>卡片的标题</h4>
<a href="" class="card-link">aaaaaa</a>
</div>
<div class="card-body">
<p>卡片的内容</p>
</div>
<div class="card-footer">
<p>版权</p>
</div>
</div>
手风琴效果
**注意事项：
- 类collapse不能和.card-body在同一元素下
-
几个折叠的部分，可以同时打开，而不能开启一个的时候，其他自动隐藏
解决方案：在3个card的外部，添加div#parent，在所有的div.collapse上添加事件，
data-parent="#parent"，这样就保证了，在div#parent中只有一个打开状态**
组成结构：
div#parent
>div.card
>div.card-header
>a.card-link
+div.callapse
>div.card-body
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<!--注意顺序-->
<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">
<h3>手风琴效果</h3>
<div id="parent">
<div class="card">
<div class="card-header">
<a href="#d1" data-toggle="collapse" class="card-link">8月22号</a>
</div>
<div id="d1" class="collapse" data-parent="#parent">
<div class="card-body">
郑爽生日
</div>
</div>
<div class="card">
<div class="card-header">
<a href="#d2" data-toggle="collapse" class="card-link">8月24号</a>
</div>
<div id="d2" class="collapse" data-parent="#parent">
<div class="card-body">
林彦俊生日
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a href="#d3" data-toggle="collapse" class="card-link">10月3号</a>
</div>
<div id="d3" class="collapse" data-parent="#parent">
<div class="card-body">
陈立农生日
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>