iT邦幫忙

0

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


尚未有邦友留言

立即登入留言