文章前提

Components 中的 Collapse

Collapse 摺疊

CH7 61
課程練習下載
Bootstrap 路徑 : Components / Collapse

| Collapse 基本架構 | 範例

  • 點擊按鈕透過 Class 更改來顯示即隱藏另一個元素
    • .collapse 隱藏物件
    • .collapsing 套用轉換中的動態效果
    • .collapse.show 顯示內容
  • 按鈕可使用 a 連結 或 button ,但都須 data-toggle=" collapse " 啟用
  • 每個按鈕對應的內容,需設相同的 ID
  • 內容皆以 .card 架構包覆
<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-target</button>
</p>
<div class="collapse" id="collapseExample">
    <div class="card card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
    </div>
</div>

| Multiple Target 多個目標 | 範例

[ˋmʌltəp!]

  • data-target 上除了使用 ID 也可使用 Class name ,就可重複使用。
  • 按鈕們外層用 <p> 包覆
  • 內容如果沒有使用 grid ( .row 與 .col )就會呈現上下排

| Accordion example 手風琴摺疊 | 範例

[əˋkɔrdɪən]

  • 使用卡片元件,可展開預設得折疊行為以創建摺疊功能。一次只能顯示一個內容
  • 最外層使用 #accordion 包覆
    • .card 包覆標題 ( .card-header ) 與內容 ( .card-body ),而 .card-body 需被 .collpase 包覆
      • #accordion
        • .card
          • .card-header
          • .collapse ( 先隱藏 .card-body )
            • .card-body
  • 當內容加上 data-parent="accordion" 會指向外層的 #accordion ,裡面的內容就只能一次顯示一個 ( 按標題顯示顯示內容,再按下一個標題上個內容會隱藏 )
    • 可試試把 data-parent="accordion" 拿掉
<div id="accordion">
    <div class="card">
        <div class="card-header">
            <h5><a href=""></a></h5>
        </div>
        <!--先隱藏 .card-body  -->
        <div class="collapse">
            <div class="card-body"></div>
        </div>
    </div>
</div>

資料來源

最後修改日期: 15 3 月, 2020

作者