折疊

基礎(chǔ)的折疊

當(dāng)您想要隱藏和顯示大量?jī)?nèi)容時(shí)，可折疊組件非常有用：

實(shí)例

<button data-bs-toggle="collapse" data-bs-target="#demo">春日</button>

<div id="demo" class="collapse">
  <p>勝日尋芳泗水濱，無(wú)邊光景一時(shí)新。</p>
  <p>等閑識(shí)得東風(fēng)面，萬(wàn)紫千紅總是春。</p>
</div>

例子解釋

.collapse 類(lèi)指示可折疊元素（在我們的例子中為 <div>）；通過(guò)單擊按鈕，可顯示或隱藏的內(nèi)容。

如需控制（顯示/隱藏）可折疊內(nèi)容，請(qǐng)將 data-bs-toggle="collapse" 屬性添加到 <a> 或 <button> 元素。然后添加 data-bs-target="#id" 屬性來(lái)連接按鈕和可折疊內(nèi)容（<div id="demo">）。

注釋?zhuān)?/span>對(duì)于 <a> 元素，您可以使用 href 屬性代替 data-bs-target 屬性：

實(shí)例

<a href="#demo" data-bs-toggle="collapse">春日</a>

<div id="demo" class="collapse">
  <p>勝日尋芳泗水濱，無(wú)邊光景一時(shí)新。</p>
  <p>等閑識(shí)得東風(fēng)面，萬(wàn)紫千紅總是春。</p>
</div>

默認(rèn)情況下，可折疊內(nèi)容是隱藏的。但是，您可以添加 .show 類(lèi)來(lái)默認(rèn)顯示內(nèi)容：

實(shí)例

<div id="demo" class="collapse show">
  <p>勝日尋芳泗水濱，無(wú)邊光景一時(shí)新。</p>
  <p>等閑識(shí)得東風(fēng)面，萬(wàn)紫千紅總是春。</p>
</div>

Accordion（手風(fēng)琴）

下例通過(guò)對(duì) card 組件進(jìn)行擴(kuò)展，顯示一個(gè)簡(jiǎn)單的手風(fēng)琴。

注釋?zhuān)?/span>使用 data-bs-parent 屬性確保當(dāng)顯示可折疊項(xiàng)目之一時(shí)，會(huì)關(guān)閉指定父項(xiàng)下的所有可折疊元素。

實(shí)例

<div id="accordion">

  <div class="card">
    <div class="card-header">
      <a class="btn" data-bs-toggle="collapse" href="#collapseOne">
        可折疊組項(xiàng)目 #1
      </a>
    </div>
    <div id="collapseOne" class="collapse show" data-bs-parent="#accordion">
      <div class="card-body">
        <h3>春日</h3>
        <p>勝日尋芳泗水濱，無(wú)邊光景一時(shí)新。</p>
        <p>等閑識(shí)得東風(fēng)面，萬(wàn)紫千紅總是春。</p>
      </div>
    </div>
  </div>

  <div class="card">
    <div class="card-header">
      <a class="collapsed btn" data-bs-toggle="collapse" href="#collapseTwo">
        可折疊組項(xiàng)目 #2
      </a>
    </div>
    <div id="collapseTwo" class="collapse" data-bs-parent="#accordion">
      <div class="card-body">
        <h3>初夏絕句</h3>
        <p>紛紛紅紫已成塵，布谷聲中夏令新。</p>
        <p>夾路桑麻行不盡，始知身是太平人。</p>
      </div>
    </div>
  </div>

  <div class="card">
    <div class="card-header">
      <a class="collapsed btn" data-bs-toggle="collapse" href="#collapseThree">
        可折疊組項(xiàng)目 #3
      </a>
    </div>
    <div id="collapseThree" class="collapse" data-bs-parent="#accordion">
      <div class="card-body">
        <h3>山行</h3>
        <p>遠(yuǎn)上寒山石徑斜，白云生處有人家。</p>
        <p>停車(chē)坐愛(ài)楓林晚，霜葉紅于二月花。</p>
      </div>
    </div>
  </div>

</div>