Bootstrap Collapse
Základní skládací
Sbalitelné položky jsou užitečné, když chcete skrýt a zobrazit velké množství obsahu:
Příklad
<button data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
Příklad vysvětlen
Třída .collapseoznačuje sbalitelný prvek (v našem příkladu <div>); toto je obsah, který se zobrazí nebo skryje kliknutím na tlačítko.
Chcete-li ovládat (zobrazit/skrýt) sbalitelný obsah, přidejte data-toggle="collapse"atribut do prvku <a> nebo <button>. Poté přidejte data-target="#id"atribut pro spojení tlačítka se sbalitelným obsahem (<div id="demo">).
Poznámka: Pro prvky <a> můžete hrefmísto atributu použít data-target
atribut:
Příklad
<a href="#demo" data-toggle="collapse">Collapsible</a>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
Ve výchozím nastavení je sbalitelný obsah skrytý. Můžete však přidat .intřídu, aby se obsah ve výchozím nastavení zobrazoval:
Příklad
<div id="demo" class="collapse in">
Lorem ipsum dolor text....
</div>
Skládací panel
Následující příklad ukazuje skládací panel:
Příklad
<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>
Skupina skládacích seznamů
- One
- Two
- Three
Následuje sbalitelný panel se skupinou seznamů uvnitř:
Příklad
<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>
Akordeon
Následující příklad ukazuje jednoduchý akordeon rozšířením panelové komponenty.
Poznámka: Pomocí data-parentatributu se ujistěte, že všechny skládací prvky pod zadaným nadřazeným prvkem budou zavřeny, když se zobrazí jedna ze sbalitelných položek.
Příklad
<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>
Kompletní referenční sbalení bootstrapu
Úplný přehled všech možností sbalení, metod a událostí naleznete v naší Referenční příručce sbalení Bootstrap JS .