Grund Collapsible
Collapsibles sind nützlich, wenn Sie ausblenden möchten und zeigen große Menge an Inhalt:
Beispiel
<button data-toggle="collapse"
data-target="#demo">Collapsible</button>
<div id="demo"
class="collapse">
Lorem ipsum dolor text....
</div> Versuch es selber " Beispiel erklärt
Die .collapse Klasse zeigt einen zusammenklappbaren Element (a <div> in unserem Beispiel); Dies ist der Inhalt, der mit einem Klick auf eine Schaltfläche angezeigt oder ausgeblendet werden.
Zur Steuerung (Ein- / Ausblenden) , um den zusammenklappbaren Inhalt, fügen Sie die data-toggle="collapse" Attribut zu einer <a> oder ein <button> Element. Dann fügen Sie die data-target="#id" Attribut die Schaltfläche mit dem zusammenklappbaren Inhalt zu verbinden (<div id="demo">) .
Hinweis: Für <a> Elemente, die Sie verwenden können href Attribut anstelle des data-target
Beispiel
<a href="#demo" data-toggle="collapse">Collapsible</a>
<div id="demo"
class="collapse">
Lorem ipsum dolor text....
</div> Versuch es selber " Standardmäßig ist der zusammenklappbare Inhalt versteckt. Sie können jedoch die hinzufügen .in Klasse den Inhalt automatisch zeigt:
Reduzierbare Palette
Das folgende Beispiel zeigt einen zusammenklappbaren Platte:
Beispiel
<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> Versuch es selber " Reduzierbare Liste Gruppe
- Eins
- Zwei
- Drei
Im Folgenden wird ein zusammenklappbares Panel mit einer Liste Gruppe innen:
Beispiel
<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> Versuch es selber " Akkordeon
Das folgende Beispiel zeigt ein einfaches Akkordeon durch die Panel-Komponente erstreckt.
Hinweis: Verwenden Sie die data-parent - Attribut , um sicherzustellen , dass alle zusammenklappbare Elemente unter dem angegebenen Eltern geschlossen wird, wenn einer der zusammenklappbare Element dargestellt ist.
Beispiel
<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> Versuch es selber " Komplette Bootstrap Collapse Referenz
Eine vollständige Referenz aller Zusammenbruch Optionen, Methoden und Ereignisse finden Sie auf unserer Bootstrap JS Collapse Referenz .