Bootstrap 5 Fold

Grundlæggende foldning

Når du vil skjule og vise et stort antal indhold, er en foldet komponent meget nyttig:

Eksempel

<button data-bs-toggle="collapse" data-bs-target="#demo">Forår</button>
<div id="demo" class="collapse">
  <p>På en dejlig dag leder jeg efter skønhed ved Sishui, og scenen er ny og uendelig.</p>
  <p>Det er let at genkende østvinden, og tusindvis af farver er altid forår.</p>
</div>

Prøv det selv

Eksempel forklaring

.collapse Klasse til at indikere foldet element (i vores eksempel <div>); ved at klikke på knappen kan indholdet vises eller skjules.

For at kontrollere (vis/skjul) foldet indhold, skal du bruge data-bs-toggle="collapse" Egenskab tilføjes til <a> eller <button>-element. Derefter tilføjes data-bs-target="#id" Egenskab for at knytte knapper og foldet indhold (<div id="demo">).

Bemærkninger:For <a>-elementer kan du bruge href Egenskab erstatning data-bs-target Egenskaber:

Eksempel

<a href="#demo" data-bs-toggle="collapse">Forår</a>
<div id="demo" class="collapse">
  <p>På en dejlig dag leder jeg efter skønhed ved Sishui, og scenen er ny og uendelig.</p>
  <p>Det er let at genkende østvinden, og tusindvis af farver er altid forår.</p>
</div>

Prøv det selv

Som standard er foldet indholdet skjult. Men du kan tilføje .show Klasse til at vise indhold som standard:

Eksempel

<div id="demo" class="collapse show">
  <p>På en dejlig dag leder jeg efter skønhed ved Sishui, og scenen er ny og uendelig.</p>
  <p>Det er let at genkende østvinden, og tusindvis af farver er altid forår.</p>
</div>

Prøv det selv

Accordion (Accordion)

Følgende eksempel viser en enkel accordion ved at udvide card-komponenten.

Bemærkninger:Brug data-bs-parent Egenskaben sikrer, at når en af de fleksible elementer vises, alle de andre faldelementer under det angivne forældreelement lukkes.

Eksempel

<div id="accordion">
  <div class="card">
    <div class="card-header">
      <a class="btn" data-bs-toggle="collapse" href="#collapseOne">
        Fleksibel gruppemappe #1
      </a>
    </div>
    <div id="collapseOne" class="collapse show" data-bs-parent="#accordion">
      <div class="card-body">
        <h3>Forår</h3>
        <p>På en dejlig dag leder jeg efter skønhed ved Sishui, og scenen er ny og uendelig.</p>
        <p>Det er let at genkende østvinden, og tusindvis af farver er altid forår.</p>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header">
      <a class="collapsed btn" data-bs-toggle="collapse" href="#collapseTwo">
        Fleksibel gruppemappe #2
      </a>
    </div>
    <div id="collapseTwo" class="collapse" data-bs-parent="#accordion">
      <div class="card-body">
        <h3>Før sommerens kort</h3>
        <p>De røde og blå blomster er blevet støv, og sommeren er ny i gøgernes lyde.</p>
        <p>De røde og blå planter langs stien er uendelige, og jeg forstår, at jeg er en menneske i fredstid.</p>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header">
      <a class="collapsed btn" data-bs-toggle="collapse" href="#collapseThree">
        Fleksibel gruppemappe #3
      </a>
    </div>
    <div id="collapseThree" class="collapse" data-bs-parent="#accordion">
      <div class="card-body">
        <h3>Ud i bjergene</h3>
        <p>Langs den kolde bjergs stis, hvor hvide skyer opstår, er der en beboelse.</p>
        <p>At stå stille og nyde egerne om aftenen, er bladene røde som blomsterne i februar.</p>
      </div>
    </div>
  </div>
</div>

Prøv det selv