Mit dem Zusammenbruch -Plugin können Sie den Seitenbereich einfach falten. Unabhängig davon, ob Sie es verwenden, um eine zusammengebrochene Navigation oder ein Inhaltsbereich zu erstellen, ermöglicht es viele Inhaltsoptionen.
Wenn Sie auf die Funktionalität des Plugins einzeln verweisen möchten, müssen Sie Collapse.js verweisen oder, wie im KAPITEL BOOTRAP -Plugin -Überblick erwähnt, auf Bootstrap.js oder komprimierte Versionen von Bootstrap.min.js verweisen.
1. Nutzung
Die folgende Tabelle listet das Zusammenbruchs-Plug-In zum Umgang mit schwerer Skalierung auf:
Sie können das Zusammenbruch -Plugin auf zwei Arten verwenden:
Über das Datenattribut: Daten-Toggle = "Collapse" und das Datenziel zum Element zum automatischen Zuweisen von Steuerelementen an zusammenkapsible Elemente. Die Data-Target-Eigenschaft akzeptiert einen CSS-Selektor und wendet einen Zusammenbrucheffekt an. Stellen Sie sicher, dass Sie dem zusammenklappbaren Element eine Klasse. Collapse hinzufügen. Wenn Sie möchten, dass es standardmäßig eingeschaltet ist, fügen Sie eine zusätzliche Klasse hinzu.
Um der faltbaren Steuerung ein gefaltetes panelartiges Gruppierungsmanagement hinzuzufügen, fügen Sie die Dateneigenschaftsdaten-Eltern = "#Selector" hinzu.
Durch JavaScript : Die Zusammenbruchmethode kann durch JavaScript aktiviert werden, wie unten gezeigt:
$ ('. Zusammenbruch'). Zusammenbruch ()
2. Beispiele
Der Inhalt kann durch Klicken zusammengebrochen werden.
// Basisbeispiel
<button data-toggle = "collapse" data-target = "#content"> stootstrap </button> <div id = "content"> <div> Bootstrap ist ein Open-Source-Toolkit für die von Twitter gestartete Front-End-Entwicklung. Es wurde vom Twitter -Designer Mark Otto und Jacob Thornton entwickelt und ist ein CSS/HTML -Framework. Derzeit ist die neueste Version von Bootstrap 3.0. </div> </div>
// Akkordeonfaltung
<div ID = "Akkordeion"> <div> <div> <h4> <a href = "#collapseone" data-toggle = "collapse" data-parent = "#akworion"> Klicken Sie auf mich, um anzuzeigen, dann klicken Sie auf mich, um zu falten, Teil 1 </a> </h4> </div> <div id = "collapseone"> <Div> <Div> Die erste Teil. </div> </div> </div> <div> <h4> <a href = "#collapsetwo" data-toggle = "collapse" data-parent = "#akkorion"> Klicken Sie auf mich, um anzuzeigen, dann klicken Sie auf mich, um zu falten, Teil 2 </a> </h4> </div> <div> id = "collapsetwo"> Die Second-Parts ist der zweite Teil. </div> </div> </div> <div> <div> <h4> <a href = "#collapeTheSe" data-toggle = "collapse" data-parent = "#akworion"> Klicken Sie auf mich, um anzuzeigen, dann klicken Sie auf mich. </div> </div> </div> </div>
// Akkordeon -Effekt
$ ('#collapseone,#collapSetwo,#collapeThra, #Collapsefour'). Collapse ({parent: '#accordion', Toggle: false,});// manuell anrufen
$ ('Schaltfläche'). On ('Click', function () {$ ('#collapseone'). Zusammenbruch ({Toggle: true,});});// Die Zusammenbruchmethode liefert auch drei Parameter: Ausblenden, Zeigen und Umschalten.
$ ('#collapseone'). collapse ('hide'); $ ('#collapSetwo'). Collapse ('show');Es gibt vier Arten von Ereignissen im Zusammenbruchs Plug-In.
// Ereignisse, andere Ähnlichkeiten
$ ('#collapseone'). on ('show.bs.collapse', function () {alert ('frei, wenn die Show -Methode aufgerufen wird');});Ich hoffe, dieser Artikel wird hilfreich und inspirierend sein, über das Bootstrap Collapse-Plug-In zu erfahren.