Bootstrap von Twitter ist derzeit das beliebteste Front-End-Frontwork. Bootstrap basiert auf HTML, CSS und JavaScript. Es ist einfach und flexibel und macht die Webentwicklung schneller. Als nächstes werde ich Ihnen durch diesen Artikel das Beispiel für die Verwendung des Startstrap-Falten-Plug-Ins vorstellen. Schauen wir uns an!
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 separat verweisen möchten, müssen Sie Collapse.js verweisen. Gleichzeitig müssen Sie auch das Transition -Plugin in Ihrer Bootstrap -Version verweisen. Oder, wie im Kapitel "Bootstrap Plugin" erwähnt, können Sie unter Bootstrap.js oder komprimierten Versionen von Bootstrap.min.js verweisen.
Sie können das Zusammenbruch -Plugin verwenden:
Erstellen Sie wie folgt ein faltbares Gruppierungs- oder Klappfeld:
<! DocType html> <html> <Head> <title> Bootstrap -Instanz - Falten -Panel </title> <link href = "/bootstrap/css/bootstrap.min.css" rel = "styleSheet"> <script Src = "/scripts/jquery.min src = "/bootstrap/js/bootstrap.min.js"> </script> <body> <divion id = "akkorion"> <div> <h4> <a data-toggle = "collapse" data-parent = "#ornion" href = "#collapseone"> klicken, klicken Sie auf, um mich erneut zu kollapieren. Teil 1 </a> </h4> </div> <div id = "collapseone"> <div> Nihil Anim Keffiyeh Helvetica, Craft Beer Labour Wes Anderson Cred Nesciunt Sapiente EA Provident. Ad vegan außereur Butcher Vice lomo. Teil 2 </a> </h4> </div> <div id = "collapsetwo"> <div> nihil Anim Keffiyeh Helvetica, Craft Beer Labour Wes Anderson Cred Nesciunt Sapiente EA Produz. Ad vegan außereur Butcher Vice Lomo. Teil 3 </a> </h4> </div> <div id = "collapeTheRe"> <div> Nihil Anim Keffiyeh Helvetica, Craft Beer Labour Wes Anderson Cred Nesciunt Sapiente EA Provident. Ad vegan außereur Butcher Vice Lomo. </Div> </div> </div> </div> </body> </html>
Die Ergebnisse sind wie folgt:
Data-Toggle = "Collapse" wird der Link zu der Komponente hinzugefügt, die Sie erweitern oder zusammenbrechen möchten.
Die Eigenschaft HREF oder Data-Target wird der übergeordneten Komponente hinzugefügt, und ihr Wert ist die ID der untergeordneten Komponente.
Die Daten-Eltern- Eigenschaft fügt die ID des zusammengebrochenen Panels zur Verknüpfung der zu erweiterten oder kollabierten Komponente hinzu.
Erstellen Sie eine einfache zusammenklappbare Komponente ohne das Akkordeon -Tag, wie unten gezeigt:
<! DocType html> <html> <kopf> <titels> bootstrap-Instanz- einfache faltbare Komponente </title> <link href = "/bootstrap/css/bootstrap.min src = "/bootstrap/js/bootstrap.min.js"> </script> <body> <button type = "button" data-toggle = "collapse" data-target = "#Demo"> einfache faltbare Komponente </button> <diviD = "Demo"> Nihil Anim Keffiyeh Helvetica, Craft-Bier-Labor-Wes-Wes-Wes-Sapient-Profis. Ad vegan außereur Butcher Vice Lomo. </Div> </body> </html>
Die Ergebnisse sind wie folgt:
Wie Sie in der Instanz sehen können, haben wir im Gegensatz zum gefalteten Panel eine faltbare Komponente erstellt, die wir die Eigenschaftsdaten-Eltern nicht hinzugefügt haben.
Verwendung
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 ()Optionen
Es gibt einige Optionen, die Dateneigenschaften oder JavaScript übergeben werden. In der folgenden Tabelle werden folgende Optionen aufgeführt:
Verfahren
Hier sind einige nützliche Methoden in Collapse -Plugins:
Beispiel
Das folgende Beispiel zeigt die Verwendung der Methode:
<! DocType html> <html> <Head> <title> Bootstrap -Instanz - Collapse -Plug -in -Methode </title> <link href = "/bootstrap/css/bootstrap.min src = "/bootstrap/js/bootstrap.min.js"> </script> <body> <divion id = "akkorion"> <div> <h4> <a data-toggle = "collapse" data-parent = "#ornion" href = "#collapseone"> klicken, klicken Sie auf, um mich erneut zu kollapieren. Teil 1-Hide-Methode </a> </h4> </div> <div id = "collapseone"> <div> nihil Anim Keffiyeh Helvetica, Craft Beer Labour Wes Anderson Cred Nesciunt Sapiente EA Provident. Ad vegan außereur Butcher Vice lomo. Teil 2 --how -Methode </a> </h4> </div> <divs id = "collapsetwo"> <div> nihil Anim Keffiyeh Helvetica, Craft Beer Labour Wes Anderson Cred Nesciunt Sapiente EA Provident. AD Vegan außereur Butcher Vice Lomo. Teil 3--Toggle-Methode </a> </h4> </div> <div id = "collapeTheRe"> <div> Nihil Anim Keffiyeh Helvetica, Craft Beer Labour Wes Anderson Cred Nesciunt Sapiente EA Provident. Ad vegan außereur Butcher Vice Lomo. Teil 4-Optionen Methode </a> </h4> </div> <div id = "collapsefour"> <div> nihil Anim Keffiyeh Helvetica, Craft Beer Labour Wes Anderson Cred Nesciunt Sapiente EA Proident. Ad vegan außereur Butcher Vice Lomo. </Div> </div> </div> <script type = "text/javaScript"> $ (function () {$ ('#collapsefour'). Collapse ({Toggle: false})}); $ ('#collapeTheSe'). Collapse ('Toggle')});Die Ergebnisse sind wie folgt:
Ereignis
In der folgenden Tabelle werden die Ereignisse aufgeführt, die im Zusammenbruchs-Plug-In verwendet werden sollen. Diese Ereignisse können als Haken in Funktionen verwendet werden.
Beispiel
Das folgende Beispiel zeigt die Verwendung von Ereignissen:
<! DocType html> <html> <kopf> <titels> bootstrap -Instanz - Collapse -Plugin -Ereignis </title> <link href = "/bootstrap/css/bootstrap.min src = "/bootstrap/js/bootstrap.min.js"> </script> <body> <divion id = "akkorion"> <div> <h4> <a data-toggle = "collapse" collapse "data-parent ="#ornion "href ="#collapseExampion "> klicken, klicken Sie mir, um mich zu erweitern. --hown Ereignis </a> </h4> </div> <div id = "collapseExample"> <div> nihil anim Keffiyeh Helvetica, Craft Beer Labour Wes Anderson Cred Nesciunt Sapiente EA Provident. Ad vegan außereur Butcher Vice Lomo.
Die Ergebnisse sind wie folgt:
Das obige ist die detaillierte Erläuterung des vom Editors eingeführten Beispiel-Plug-in-Beispiels für die Startstrap Folding (Collapse). Ich hoffe, es wird für alle hilfreich sein!