20.Bootstrap(中文教程)元件：折叠-切换内容的可见性

ㄧ.折叠-切换内容的可见性

<div class="component demo">  <a href="#collapse-demo" class="btn btn-primary" data-toggle="collapse">    action link  </a>  <button class="btn btn-primary" data-toggle="collapse" data-target="#collapse-demo">    action button  </button>    <div class="collapse" id="collapse-demo">    <div class="card card-body">      hello~    </div>  </div></div>

重点：
1.先创一个卡片，只採用card-body。另在.collapse加入#collapse-demo，在使用摺叠的时候可以呼叫这个#collapse-demo
2.a连结就採用btn的样式btn-primary，加入data-toggle="collapse"代表使用折叠的功能以及href="#collapse-demo"呼叫卡片的id
3.button部分跟a连结差别就在于a连结有href="#collapse-demo"，button则另外加入data-target="#collapse-demo"
4.这个功能为折叠，也就是滑动的效果将内容呼叫出来。关闭的时候滑动效果隐藏

codepen
参考：bootstrap4