Basic pliabilă
Collapsibles sunt utile atunci când doriți să ascundeți și arată cantitate mare de conținut:
Exemplu
<button data-toggle="collapse"
data-target="#demo">Collapsible</button>
<div id="demo"
class="collapse">
Lorem ipsum dolor text....
</div> Încearcă - l singur » exemplu explicat
.collapse Clasa indică un element pliabil (a <div> in our example) ; Acesta este conținutul care va fi afișat sau ascuns, cu o apasare a unui buton.
Pentru a controla (show/hide) conținutul pliabil, adăugați data-toggle="collapse" de <a> <button> data-toggle="collapse" atribut la un <a> sau un <button> Element. Apoi adăugați data-target="#id" atribut pentru a conecta butonul cu conținutul pliabil (<div id="demo">) .
Notă: Pentru <a> elemente, puteți utiliza href atributul în loc de data-target atribut:
Exemplu
<a href="#demo" data-toggle="collapse">Collapsible</a>
<div id="demo"
class="collapse">
Lorem ipsum dolor text....
</div> Încearcă - l singur » În mod implicit, conținutul pliabil este ascuns. Cu toate acestea, puteți adăuga .in clasa pentru a afișa conținutul în mod implicit:
Panou pliabilă
Exemplul următor prezintă un panou pliabil:
Exemplu
<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> Încearcă - l singur » Pliabilă Lista grupurilor
- unu
- Două
- Trei
Următoarele prezintă un panou pliabil cu un grup listă interior:
Exemplu
<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> Încearcă - l singur » Acordeon
Exemplul următor prezintă un acordeon simplu prin extinderea componentei panoului.
Notă: Utilizați data-parent atribut pentru a se asigura că toate elementele pliabile sub mamă specificată va fi închisă atunci când este afișat unul dintre elementul pliabil.
Exemplu
<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> Încearcă - l singur » Complet Bootstrap Reducere de referință
Pentru o referință completă a tuturor opțiunilor colaps, metode și evenimente, du - te la nostru Bootstrap JS Colaps de referință .