Bootstrap 4 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 .showtřídu, aby se obsah ve výchozím nastavení zobrazoval:
Příklad
<div id="demo" class="collapse show">
Lorem ipsum dolor text....
</div>
Akordeon
Následující příklad ukazuje jednoduchý akordeon s prodloužením kartového komponentu.
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 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>
Kompletní sbalená referenční příručka Bootstrap 4
Úplnou referenci o všech možnostech, metodách a událostech sbalení najdete v našem Bootstrap 4 JS Collapse Reference .