Bootstrap Ineenstorting
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 .inklas byvoeg om die inhoud by verstek te wys:
Voorbeeld
<div id="demo" class="collapse in">
Lorem ipsum dolor text....
</div>
Opvoubare paneel
Die volgende voorbeeld toon 'n opvoubare paneel:
Voorbeeld
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Collapsible panel</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">Panel Body</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
</div>
Opvoubare lysgroep
- One
- Two
- Three
Die volgende wys 'n opvoubare paneel met 'n lysgroep binne:
Voorbeeld
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Collapsible list group</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">One</li>
<li class="list-group-item">Two</li>
<li class="list-group-item">Three</li>
</ul>
<div class="panel-footer">Footer</div>
</div>
</div>
</div>
Trekklavier
Die volgende voorbeeld toon 'n eenvoudige trekklavier deur die paneelkomponent 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 class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
Collapsible Group 1</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
Collapsible Group 2</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
Collapsible Group 3</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</div>
</div>
</div>
</div>
Voltooi Bootstrap Collapse Reference
Vir 'n volledige verwysing van alle ineenstortingsopsies, metodes en gebeure, gaan na ons Bootstrap JS Collapse Reference .