Bootstrap 4 Crollo
Base pieghevole
I pieghevoli sono utili quando vuoi nascondere e mostrare grandi quantità di contenuto:
Esempio
<button data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
Esempio spiegato
La .collapseclasse indica un elemento comprimibile (un <div> nel nostro esempio); questo è il contenuto che verrà mostrato o nascosto con un clic di un pulsante.
Per controllare (mostrare/nascondere) il contenuto comprimibile, aggiungi l' data-toggle="collapse"attributo a un elemento <a> o <button>. Quindi aggiungi l' data-target="#id"attributo per collegare il pulsante con il contenuto comprimibile (<div id="demo">).
Nota: per gli elementi <a>, puoi utilizzare l' hrefattributo invece data-target
dell'attributo:
Esempio
<a href="#demo" data-toggle="collapse">Collapsible</a>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
Per impostazione predefinita, il contenuto comprimibile è nascosto. Tuttavia, puoi aggiungere la .showclasse per mostrare il contenuto per impostazione predefinita:
Esempio
<div id="demo" class="collapse show">
Lorem ipsum dolor text....
</div>
Fisarmonica
L'esempio seguente mostra una semplice fisarmonica estendendo il componente della scheda.
Nota: utilizzare l' data-parentattributo per assicurarsi che tutti gli elementi comprimibili sotto il genitore specificato vengano chiusi quando viene mostrato uno degli elementi comprimibili.
Esempio
<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>
Riferimento completo per il collasso di Bootstrap 4
Per un riferimento completo di tutte le opzioni, i metodi e gli eventi di compressione, vai al nostro Bootstrap 4 JS Collapse Reference .