Bootstrap 5-kääntyvät

Peruslasku

Kun haluat piilottaa ja näyttää suuren määrän sisältöä，taivuteltava komponentti on erittäin hyödyllinen：

Esimerkki

<button data-bs-toggle="collapse" data-bs-target="#demo">Keväät</button>
<div id="demo" class="collapse">
  <p>Voitteellinen päivä etsii ruusua, rajattomissa maisemissa, kaikki uutta.</p>
  <p>Helposti tunnetaan tuulen ilme, tuhat väriä ja tuhat kukkaa ovat kevättä.</p>
</div>

Kokeile itse

Esimerkki selitys

.collapse Luokka viittaa taivuteltavaan elementtiin（esimerkiksi <div>-elementtiin）；napsauttamalla painiketta näytettävää tai piilotettavaa sisältöä voidaan näyttää tai piilottaa.

Jos haluat hallita（näyttää/piilottaa）taivuteltavaa sisältöä，lisää data-bs-toggle="collapse" Atribuutti lisätään <a> tai <button>-elementtiin. Sitten lisää data-bs-target="#id" Atribuuttia yhdistääksesi painikkeen ja taivuteltavan sisällön（<div id="demo">）。

Huomautus：A <a>-elementissä voit käyttää href Atribuutti korvaa data-bs-target Atribuutti：

Esimerkki

<a href="#demo" data-bs-toggle="collapse">Keväät</a>
<div id="demo" class="collapse">
  <p>Voitteellinen päivä etsii ruusua, rajattomissa maisemissa, kaikki uutta.</p>
  <p>Helposti tunnetaan tuulen ilme, tuhat väriä ja tuhat kukkaa ovat kevättä.</p>
</div>

Kokeile itse

Oletusarvoisesti, taivuteltava sisältö on piilotettu. Mutta voit lisätä .show Luokka näyttää oletusarvoisesti sisällön：

Esimerkki

<div id="demo" class="collapse show">
  <p>Voitteellinen päivä etsii ruusua, rajattomissa maisemissa, kaikki uutta.</p>
  <p>Helposti tunnetaan tuulen ilme, tuhat väriä ja tuhat kukkaa ovat kevättä.</p>
</div>

Kokeile itse

Harmonikka

Esimerkissä laajennetaan card-komponenttia ja näytetään yksinkertainen harmonikka.

Huomautus：Käyttö data-bs-parent Ominaisuus varmistaa, että kun yksi käsiteltävästä kääntämisestä näkyy, kaikki muut käännöksistä sille määritetyt elementit suljetaan.

Esimerkki

<div id="accordion">
  <div class="card">
    <div class="card-header">
      <a class="btn" data-bs-toggle="collapse" href="#collapseOne">
        Kiinnittyvä ryhmäprojekti #1
      </a>
    </div>
    <div id="collapseOne" class="collapse show" data-bs-parent="#accordion">
      <div class="card-body">
        <h3>Keväällä</h3>
        <p>Voitteellinen päivä etsii ruusua, rajattomissa maisemissa, kaikki uutta.</p>
        <p>Helposti tunnetaan tuulen ilme, tuhat väriä ja tuhat kukkaa ovat kevättä.</p>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header">
      <a class="collapsed btn" data-bs-toggle="collapse" href="#collapseTwo">
        Kiinnittyvä ryhmäprojekti #2
      </a>
    </div>
    <div id="collapseTwo" class="collapse" data-bs-parent="#accordion">
      <div class="card-body">
        <h3>Kesäkuun lause</h3>
        <p>Rouset ovat pölyiksi muuttuneet, kutsuu kevätlintu, uusi kausi alkaa.</p>
        <p>Savisiideri loppuu, tiedän, että olen rauhanmies.</p>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header">
      <a class="collapsed btn" data-bs-toggle="collapse" href="#collapseThree">
        Kiinnittyvä ryhmäprojekti #3
      </a>
    </div>
    <div id="collapseThree" class="collapse" data-bs-parent="#accordion">
      <div class="card-body">
        <h3>Montaa</h3>
        <p>Tuulen tuvin korkealle, kiviselle polulle, pilvet syntyvät paikassa, jossa on talo.</p>
        <p>Lepäämään autolla, rakkauden vuoksi syksyn ajan, lumilehdet ovat punaisempia kuin kaksi kukkaa maaliskuussa.</p>
      </div>
    </div>
  </div>
</div>

Kokeile itse