Bootstrap 4 Invou
Basiese opvoubaar
Opvoubare items is nuttig wanneer jy groot hoeveelhede inhoud wil versteek en wys:
Voorbeeld
<button data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
Voorbeeld Verduidelik
Die .collapseklas dui 'n opvoubare element aan ('n <div> in ons voorbeeld); dit is die inhoud wat met 'n klik van 'n knoppie gewys of versteek sal word.
Om die opvoubare inhoud te beheer (wys/versteek), voeg die data-toggle="collapse"kenmerk by 'n <a>- of 'n <button>-element. Voeg dan die data-target="#id"kenmerk by om die knoppie te verbind met die opvoubare inhoud (<div id="demo">).
Let wel: Vir <a>-elemente kan jy die hrefkenmerk gebruik in plaas van die data-target
kenmerk:
Voorbeeld
<a href="#demo" data-toggle="collapse">Collapsible</a>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
By verstek is die opvoubare inhoud versteek. Jy kan egter die .showklas byvoeg om die inhoud by verstek te wys:
Voorbeeld
<div id="demo" class="collapse show">
Lorem ipsum dolor text....
</div>
Trekklavier
Die volgende voorbeeld toon 'n eenvoudige trekklavier deur die kaartkomponent uit te brei.
Let wel: Gebruik die data-parentkenmerk om seker te maak dat alle opvoubare elemente onder die gespesifiseerde ouer gesluit sal wees wanneer een van die opvoubare items gewys word.
Voorbeeld
<div id="accordion">
<div class="card">
<div
class="card-header">
<a class="card-link"
data-toggle="collapse" href="#collapseOne">
Collapsible
Group Item #1
</a>
</div>
<div id="collapseOne" class="collapse show"
data-parent="#accordion">
<div class="card-body">
Lorem
ipsum..
</div>
</div>
</div>
<div class="card">
<div
class="card-header">
<a class="collapsed card-link"
data-toggle="collapse" href="#collapseTwo">
Collapsible
Group Item #2
</a>
</div>
<div id="collapseTwo" class="collapse"
data-parent="#accordion">
<div class="card-body">
Lorem
ipsum..
</div>
</div>
</div>
<div class="card">
<div
class="card-header">
<a class="collapsed card-link"
data-toggle="collapse" href="#collapseThree">
Collapsible
Group Item #3
</a>
</div>
<div id="collapseThree" class="collapse"
data-parent="#accordion">
<div class="card-body">
Lorem
ipsum..
</div>
</div>
</div>
</div>
Voltooi Bootstrap 4 Collapse Reference
Vir 'n volledige verwysing van alle ineenstortingsopsies, metodes en gebeure, gaan na ons Bootstrap 4 JS Collapse Reference .