pieghevole di base
Collapsibles sono utili quando si vuole nascondere e mostrare grande quantità di contenuti:
Esempio
<button data-toggle="collapse"
data-target="#demo">Collapsible</button>
<div id="demo"
class="collapse">
Lorem ipsum dolor text....
</div> Prova tu stesso " esempio spiegato
Il .collapse classe indica un elemento pieghevole (un <div> nel nostro esempio); Questo è il contenuto che verrà mostrato o nascosto con un clic di un pulsante.
Per controllare (mostra / nascondi) il contenuto pieghevole, aggiungere il data-toggle="collapse" attributo a un <a> o <button> elemento. Quindi aggiungere il data-target="#id" attributo per collegare il pulsante con il contenuto pieghevole (<div id="demo">) .
Nota: Per <a> elementi, è possibile utilizzare l' href attributo invece del data-target attributi:
Esempio
<a href="#demo" data-toggle="collapse">Collapsible</a>
<div id="demo"
class="collapse">
Lorem ipsum dolor text....
</div> Prova tu stesso " Per impostazione predefinita, il contenuto pieghevole è nascosto. Tuttavia, è possibile aggiungere il .in classe per mostrare il contenuto di default:
Pannello comprimibile
L'esempio seguente mostra un pannello pieghevole:
Esempio
<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> Prova tu stesso " Pieghevole List Group
- Uno
- Due
- Tre
Quanto segue mostra un pannello pieghevole con un gruppo lista all'interno:
Esempio
<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> Prova tu stesso " Fisarmonica
L'esempio seguente mostra una semplice fisarmonica estendendo componente del pannello.
Nota: utilizzare il data-parent attributo per fare in modo che tutti gli elementi pieghevoli sotto il genitore specificato saranno chiusi quando viene visualizzato uno dei voce pieghevole.
Esempio
<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> Prova tu stesso " Completa Bootstrap Collapse Riferimento
Per un riferimento completo di tutte le opzioni di collasso, metodi ed eventi, vai alla nostra Bootstrap JS Collapse riferimento .