Bootstrap -Plugin
1. Bootstrap-Übergangs-Plug-In
Das Transition -Plugin bietet einfache Übergangseffekte. Wenn Sie die Funktionalität des Plugins einzeln verweisen möchten, müssen Sie zusätzlich zu anderen JS -Dateien auf wumbum.js verweisen. Oder, wie im Kapitel "Bootstrap Plugin" erwähnt, können Sie unter Bootstrap.js oder komprimierten Versionen von Bootstrap.min.js verweisen.
Transition.js ist die grundlegende Helferklasse für das Übergangsereignis und den CSS -Übergangseffektsimulator. Es wird von anderen Plug-Ins verwendet, um den CSS-Übergangseffektunterstützung zu überprüfen und einen Übergangseffekt zu erhalten.
Anwendungsfälle
Übergangs-Plug-in-Anwendungsfälle:
(1) Modal -Dialogfeld mit Folie oder Verblasung. Für spezifische Beispiele finden Sie im Plug-In des Bootstrap Modal Box (Modal).
(2) Tag -Seite mit verblassendem Effekt. Zu bestimmten Beispielen finden Sie auf der Registerkarte "Bootstrap" (Registerkarte "Registerkarte).
(3) Warnbox mit verblassendem Effekt. Beispiele finden Sie im Warnbox (Alert) Bootstrap-Plug-In.
(4) Karussellbrett mit Folieneffekt. Beispiele finden Sie im Bootstrap Carousel-Plug-In.
2. MODAL-Plug-In Bootstrap Modal Box (Modal)
Ein Modal Box (Modal) ist eine untergeordnete Form, die auf der übergeordneten Form überlagert wird. In der Regel besteht der Zweck darin, Inhalte von einer separaten Quelle anzuzeigen, die eine gewisse Interaktion haben kann, ohne das übergeordnete Formular zu verlassen. Die Unterform kann Informationen, Interaktion usw. liefern
Wenn Sie auf die Funktionalität des Plugins separat verweisen möchten, müssen Sie modal.js verweisen. Oder, wie im Kapitel "Bootstrap Plugin" erwähnt, können Sie unter Bootstrap.js oder komprimierten Versionen von Bootstrap.min.js verweisen.
(1) Verwendung
Sie können den versteckten Inhalt des Modal Box (Modal) Plugin umschalten:
A. durch Datenattribut: Setzen Sie das Attribut data-toggle = "modal" im Controller-Element (z. B. eine Taste oder Link) und setzen Sie Data-target = "#identifier" oder href = "#identifier", um das spezifische Modal-Feld an Switch (mit ID = "Identifier") anzugeben.
B. Durch JavaScript: Mit dieser Technik können Sie ein modales Feld mit ID = "Identifier" über eine einfache JavaScript -Zeile aufrufen:
$ ('#identifier'). Modal (Optionen)
<h2> Erstellen Sie ein modales Box (modal) </h2> <!-Taste löst ein Modal-Box aus-> <Taste data-toggle = "Modal" data-target = "#MyModal"> Beginnen Sie mit dem Vorgang eines Modal-Boxs modal. aria-hidden = "true"> <div> <div> <div> <button type = "button" data-dismiss = "modal" aria-hidden = "true"> × </button> <h4 id = "myModallabel"> modal Box (modal) title </h4> </divish> hier. <button type = "button"> ändert Änderungen </button> </div> </div> </div> <!-/.modal-content-> </div> <!-/.modal-> </div>
Code Erläuterung:
A. Mit modalen Fenstern müssen Sie einen Auslöser haben. Sie können Schaltflächen oder Links verwenden. Hier verwenden wir Tasten.
B. Wenn Sie sich den obigen Code sorgfältig ansehen, werden Sie feststellen, dass in der <tastetagung <taste> data-target = "#myModal" das Ziel des modalen Feldes ist, das Sie auf der Seite laden möchten. Auf der Seite können Sie mehrere modale Felder erstellen und dann verschiedene Auslöser für jedes Modal -Box erstellen. Nun ist es offensichtlich, dass Sie mehrere Module nicht gleichzeitig laden können, aber Sie können mehrere auf der Seite zu unterschiedlichen Zeiten erstellen.
C. Zwei Punkte, die im Modal Box zu beachten sind:
Das erste ist .modal, das verwendet wird, um den Inhalt von <div> als Modalbox zu erkennen.
Der zweite ist. Wenn der Modalbox umgeschaltet ist, verblasst der Inhalt.
D. Aria-labelledBy = "MyModallabel" bezieht sich auf den Titel der Modal Box.
E. Die Eigenschaft aria-versteckt = "True" wird verwendet, um das Modalfenster unsichtbar zu halten, bis der Auslöser ausgelöst wird (z. B. auf die relevante Taste klicken).
F, <Div>, Modal Header ist eine Klasse, die Stile für den Kopf eines Modalfensters definiert.
G, class = "close", close ist eine CSS -Klasse, mit der die Schließung eines modalen Fensters gestylt wird.
H, Data-Dismiss = "Modal", ist ein benutzerdefiniertes HTML5-Datenattribut. Hier wird es verwendet, um das Modalfenster zu schließen.
I, Class = "Modal-Body", ist eine CSS-Klasse von Bootstrap-CSS, die verwendet wird, um den Körper eines Modalfensters zu stylen.
J, Class = "Modal-Footer", ist eine CSS-Klasse von Bootstrap-CSS, die verwendet wird, um die Unterseite des Modalfensters zu stylen.
K, Data-Toggle = "Modal", HTML5 Custom Data Attribut Data-Toggle wird zum Öffnen eines Modalfensters verwendet.
(2) Optionen
Es gibt Optionen, um das Erscheinungsbild und das Gefühl eines modalen Fensters anzupassen, das Dateneigenschaften oder JavaScript übergeben wird. In der folgenden Tabelle werden folgende Optionen aufgeführt:
(3) Methode
Hier sind einige nützliche Methoden, die mit Modal () verwendet werden können.
(4) Ereignis
In der folgenden Tabelle werden die Ereignisse aufgeführt, die in der Modalbox verwendet werden sollen. Diese Ereignisse können als Haken in Funktionen verwendet werden.
3. Bootstrap-Dropdown-Menü (Dropdown) Plug-In
Das Dropdown-Menü Bootstrap-Menü erläutert das Dropdown-Menü, beinhaltet jedoch nicht den Interaktionsteil. In diesem Kapitel wird die Interaktion des Dropdown-Menüs im Detail erläutert. Mit dem Dropdown -Plugin können Sie jeder Komponente Dropdown -Menüs hinzufügen (z. B. Navigationsleisten, Registerkarten, Kapselnavigationsmenüs, Schaltflächen usw.).
Wenn Sie die Funktionalität des Plugins separat verweisen möchten, müssen Sie Dropdown.js verweisen. Oder, wie im Kapitel "Bootstrap Plugin" erwähnt, können Sie unter Bootstrap.js oder komprimierten Versionen von Bootstrap.min.js verweisen.
(1) Verwendung
Sie können den versteckten Inhalt des Dropdown -Menü -Plugins (Dropdown) umschalten:
Schalten Sie das Dropdown-Menü über das Datenattribut um: Daten-Toggle = "Dropdown" zum Link oder der Schaltfläche hinzufügen.
A. Datenattribut verwenden: Data-Toggle = "Dropdown" zum Link oder der Schaltfläche hinzufügen, um das Dropdown-Menü zu wechseln, wie unten gezeigt:
<div> <a data-toggle = "Dropdown" href = "#"> Dropdown-Auslöser </a> <ul rollen = "Menü" Aria-labelledby = "dlabel"> </ul> </div>
B. Wenn Sie den Link intakt halten müssen (nützlich, wenn der Browser JavaScript nicht aktiviert), verwenden Sie die Data-Ziel-Eigenschaft anstelle von href = "#":
<div> <a id="dLabel" role="button"data-toggle="dropdown" data-target="#" href="/page.html"> Dropdown menu (Dropdown) <span></span> </a> <ul role="menu" aria-labelledby="dLabel"> </ul></div>
C. Über JavaScript: Rufen Sie das Dropdown-Menü über JavaScript an, bitte verwenden Sie die folgende Methode: $ ('. Dropdown-Toggle'). Dropdown ()
(2) Methode
Es gibt eine einfache Möglichkeit, das Dropdown-Menü anzuzeigen oder zu verbergen. $ (). Dropdown ('Toggle')
4. Bootstrap ScrollSpy Plug-In
Das Scroll Monitoring (ScrollSpy) Plug-In, dh die automatische Aktualisierung des Navigationsplug-Ins, aktualisiert automatisch das entsprechende Navigationsziel gemäß der Position der Scrollleiste. Seine grundlegende Implementierung besteht darin, die Navigationsleiste auf der Basis der Bildlaufleiste auf dem Scrollen in die Navigationsleiste hinzuzufügen.
(1) Verwendung
Sie können der oberen Navigation das Hörverhalten des Scrolls hinzufügen:
A. Durch das Datenattribut: Datenspy = "Scrollen" zu dem Element hinzufügen, das Sie anhören möchten (normalerweise Körper). Fügen Sie dann das Attributdaten-Ziel mit der ID des übergeordneten Elements der Bootstrap .nav-Komponente oder der Eigenschaft der Klasse hinzu. Damit es ordnungsgemäß funktioniert, müssen Sie sicherstellen, dass es Elemente im Körper der Seite gibt, die der ID des Links übereinstimmen, die Sie hören möchten.
<body data-spy = "scroll" data-target = ". navbar-exampel"> ... <div> <ul> ... </ul> </div> ... </body>
B. Über JavaScript: Sie können die Scroll -Überwachung über JavaScript aufrufen, das zu hörene Element auswählen und dann die Funktion .ScrollSpy () aufrufen:
$ ('body'). scrollspy ({Ziel: '.navbar-example'})
(2) Optionen
Datenattribute oder JavaScript durchlaufen. In der folgenden Tabelle werden folgende Optionen aufgeführt:
(3) Methode
.ScrollSpy ('Aktualisieren'): Beim Aufrufen der ScrollSpy -Methode über JavaScript müssen Sie die .refresh -Methode aufrufen, um die DOM zu aktualisieren. Dies ist nützlich, wenn ein Element des DOM geändert wird (d. H. Sie einige Elemente hinzufügen oder entfernen). Hier ist die Syntax für die Verwendung dieser Methode.
$ ('[data-spy = "scroll"]'). Jede (Funktion () {var $ spy = $ (this) .ScrollSpy ('refresh')})(4) Ereignis
In der folgenden Tabelle werden die Ereignisse aufgeführt, die beim Scrollen -Hören verwendet werden sollen. Diese Ereignisse können als Haken in Funktionen verwendet werden.
5. Bootstrap -Registerkarte (Registerkarte) Plugin
Registerkarten (Registerkarte) werden im Kapitel „Bootstrap Navigation Elements“ eingeführt. Durch die Kombination einiger Dateneigenschaften können Sie problemlos eine Registerkartenschnittstelle erstellen. Mit diesem Plugin können Sie Inhalte auf einer Registerkarte oder einer Registerkartenseite der Kapsel oder sogar einer Registerkarte "Dropdown-Menü" platzieren.
(1) Verwendung
Sie können TAB -Seiten auf zwei Arten aktivieren:
A. Über das Datenattribut: Sie müssen dem Ankertext-Link Data-Toggle = "Tab" oder Data-Toggle = "Pill" hinzufügen. Durch das Hinzufügen von Nav- und Nav-Tabs-Klassen in UL wird der Bootstrap-Tag-Stil angewendet und das Hinzufügen von Nav- und Nav-Pills-Klassen in UL den Bootstrap-Kapselstil angewendet.
<ul>
<li> <a href = "#identifier" data-toggle = "tab"> home </a> </li>
...
</ul>
B. Über JavaScript: Sie können JavaScript verwenden, um Registerkarten -Seiten zu aktivieren, wie unten gezeigt:
$ ('#mytab a'). click (function (e) {e.preventDefault () $ (this) .tab ('show')})Das folgende Beispiel zeigt die Aktivierung einzelner Registerkarten auf unterschiedliche Weise:
// Wählen Sie die Registerkarte Seite $ ('#mytab a [href = "#profil"]'). Tab ('show') // Wählen Sie die erste Registerkarte $ ('#mytab a: First'). Tab ('show') // Wählen a '). Tab (' Show ')(2) Fade -Effekt
Wenn Sie einen Fade-Effekt für die Registerkarte festlegen müssen, fügen Sie. FADE zu jeder .tab-Schleife hinzu. Die erste Registerkarte muss mit einer .in -Klasse hinzugefügt werden, um den Anfangsinhalt anzuzeigen, wie im folgenden Beispiel gezeigt:
<div> <div id = "home"> ... </div> <div id = "svn"> ... </div> </div>
(3) Methode
. Auf der Registerkarte muss ein Daten-Ziel oder ein HREF auf den Containerknoten im DOM zeigen.
<ul id = "mytab"> <li> <a href = "#identifier" data-toggle = "tab"> home </a> </li> ..... </ul> <div> <div id = "home"> ... </div> .... </div> <script> $ () () {$ ('#myTab a: letztes').(4) Ereignis
In der folgenden Tabelle werden die Ereignisse aufgeführt, die im Registerkarte (Registerkarte) verwendet werden sollen. Diese Ereignisse können als Haken in Funktionen verwendet werden.
6. Bootstrap -Eingabeaufforderung -Tool (Tooltip) Plugin
Der Tooltip ist sehr nützlich, wenn Sie einen Link beschreiben möchten. Das Tooltip -Plugin ist von Jquery.Tipsy inspiriert, geschrieben von Jason Frame. Das Tooltip-Plug-In hat viele Verbesserungen vorgenommen, z. B. nicht auf Bilder, sondern auch CSS verwendet, um Animationseffekte zu erzielen und Datenattribute zum Speichern von Titelinformationen zu verwenden.
(1) Verwendung
Das Tooltip-Plug-In generiert Inhalte und Tags basierend auf den Anforderungen. Standardmäßig wird der Tooltip hinter ihren Triggerelementen platziert. Es gibt zwei Möglichkeiten, wie Sie ein Eingabeaufforderungsinstrument (Tooltip) hinzufügen können:
A. Über das Datenattribut: Wenn Sie ein Eingabeaufforderungsinstrument (tOOLTIP) hinzufügen müssen, fügen Sie einfach Data-Toggle = "Tooltip" einem Anker-Tag hinzu. Der Titel des Ankers ist der Text des Eingabeaufforderungstools (Tooltip). Standardmäßig legt das Plug-in den Tooltip oben fest.
<a href = "#" data-toggle = "tooltip" title = "exitle tOoltip"> Bitte schweben Sie über meinen </a>
A. Über JavaScript: Trigger das Eingabeaufforderungstool (Tooltip) über JavaScript: $ ('#Identifier'). Tooltip (Optionen)
Das Tooltip-Plugin ist nicht wie die zuvor diskutierten Dropdown-Menüs und andere Plug-Ins, sondern kein reines CSS-Plug-In. Um das Plugin zu verwenden, müssen Sie es mit JQuery aktivieren (lesen Sie JavaScript). Verwenden Sie das folgende Skript, um alle Eingabeaufforderungen (Tooltips) auf der Seite zu aktivieren:
$ (function () {$ ("[data-toggle = 'tooltip']"). tooltip ();});
<a href = "#" data-toggle = "tooltip" data-placement = "links"> tooltip links </a>. <a href = "#" data-toggle = "tooltip" data-placement = "top"> tooltip oben </a>.
(2) Optionen
Es gibt einige Optionen, die über die Bootstrap -Daten -API (Bootstrap -Daten -API) hinzugefügt oder über JavaScript aufgerufen werden. In der folgenden Tabelle werden folgende Optionen aufgeführt:
(3) Methode
Hier sind einige nützliche Methoden in Tooltip-Plug-Ins:
(4) Ereignis
In der folgenden Tabelle werden die Ereignisse aufgeführt, die im Tooltip-Plug-In verwendet werden sollen. Diese Ereignisse können als Haken in Funktionen verwendet werden.
7. Bootstrap Popover Plug-In
Ein Popover ähnelt einem Tooltip und bietet eine erweiterte Ansicht. Um das Popup-Box zu aktivieren, muss der Benutzer nur über das Element schweben. Der Inhalt der Popup-Box kann mit der Bootstrap-Daten-API (Bootstrap-Daten-API) vollständig besiedelt werden. Diese Methode basiert auf Tooltips. Wenn Sie auf die Funktionalität des Plugins separat verweisen möchten, müssen Sie sich auf popover.js verweisen, das sich auf das Tooltip -Plugin stützt.
(1) Verwendung
Das Popover -Plugin generiert Inhalte und Tags basierend auf den Anforderungen. Standardmäßig werden Popovers hinter ihren Triggerelementen platziert. Sie können Popover auf zwei Arten hinzufügen:
A. Über das Datenattribut: Wenn Sie einen Popover hinzufügen möchten, fügen Sie einfach Data-Toggle = "Popover" zu einer Anker-/Tastendikamik hinzu. Der Titel des Ankers ist der Text des Popovers. Standardmäßig legt das Plugin das Popover oben.
<a href = "#" data-toggle = "popover" title = "Beispiel popover">
Bitte schweben Sie über mir
</a>
B. Durch JavaScript: Popover (Popover) durch JavaScript aktivieren: $ ('#Identifier'). Popover (Optionen)
Das Popover-Plugin ist nicht wie die zuvor diskutierten Dropdown-Menüs und andere Plug-Ins, es ist kein reines CSS-Plug-In. Um das Plugin zu verwenden, müssen Sie es mit JQuery aktivieren (lesen Sie JavaScript). Verwenden Sie das folgende Skript, um alle Popovers auf der Seite zu aktivieren:
$ (function () {$ ("[data-toggle = 'popover']"). popover ();});
<Taste type = "Taste"
Data-container = "Body" data-toggle = "popover" data-placement = "links" data-content = "Einiger Inhalte in Popover links" > Popover links
</button>
(2) Optionen
Es gibt einige Optionen, die über die Bootstrap -Daten -API (Bootstrap -Daten -API) hinzugefügt oder über JavaScript aufgerufen werden. In der folgenden Tabelle werden folgende Optionen aufgeführt:
(3) Methode
Hier sind einige nützliche Methoden in Popover -Plugins:
(4) Ereignis
In der folgenden Tabelle werden die Ereignisse aufgeführt, die im Pop-up-Plug-In (Pop-up) verwendet werden sollen. Diese Ereignisse können als Haken in Funktionen verwendet werden.
8. Bootstrap Warning Box (Alarm) Plug-In
Warnmeldungen werden hauptsächlich verwendet, um den Endbenutzer Informationen wie Warn- oder Bestätigungsmeldungen anzuzeigen. Mit dem Warn -Plugin können Sie allen Warnbox -Nachrichten eine stornierbare Funktion hinzufügen.
(1) Verwendung
Sie können die Entlassungsfunktion des Warnboxs auf die folgenden zwei Arten aktivieren:
A. Durch Datenattribute: Fügen Sie eine stornierbare Funktion über die Daten -API (Daten -API) hinzu. Fügen Sie einfach Data-Dismiss = "Alert" zur Schließschaltfläche hinzu, und die Schließfunktion wird automatisch zum Warnfeld hinzugefügt.
<a data-dismiss = "alert" href = "#" aria-hidden = "true">
×
</a>
B. Durch JavaScript: Fügen Sie stornierte Funktionen über JavaScript hinzu: $ (". Alert"). Alert ()
<div> <a href = "#" data-dismiss = "alert"> × </a> <strong> Warnung! </strong> Ihre Netzwerkverbindung hat ein Problem. </div>
(2) Methode
Hier sind einige nützliche Methoden im Alarm -Plugin:
(3) Ereignis
In der folgenden Tabelle werden die Ereignisse aufgeführt, die im Alarm-Plug-In verwendet werden sollen. Diese Ereignisse können als Haken in Funktionen verwendet werden.
9. Bootstrap -Taste -Plugin
Mit dem Taste -Plugin können Sie einige Interaktionen hinzufügen, z. B. das Steuern des Schaltflächenstatus oder das Erstellen von Schaltflächengruppen für andere Komponenten wie Symbolleisten.
(1) Ladestatus
Um der Schaltfläche zum Ladenstatus hinzuzufügen, fügen Sie einfach Datenlading-Text = "Laden ..." dem Schaltflächenelement als Attribut hinzu.
<button id = "fat-btn" data-loading-text = "laden ..." type = "button"> laden status </button> <skript> $ (function () {$ (". Btn"). click (function () {$ (this) .button ('laden'). Delay (1000) .queue (Funktion () {) {$). </script>(2) Einzelschalter
Um den Schalter einer einzelnen Taste zu aktivieren (d. H. Um den normalen Status der Taste in den Status Drücken zu ändern und umgekehrt), fügen Sie einfach data-toggle = "Taste" zum Tastenelement als Attribut hinzu.
<button type = "button" data-toggle = "button"> einzelner Schalter </button>
(3) Kontrollkästchen
Sie können eine Checkbox-Gruppe erstellen und der Checkbox-Gruppe einen Umschalter hinzufügen, indem Sie die Datenattributdaten-Toggle = "Schaltflächen" zur BTN-Gruppe hinzufügen.
<divdata-toggle = "buttons"> <label> <Eingabe type = "checkBox"> Option 1 </label> <label> <Eingabetyp = "Kontrollkästchen"> Option 3 </Label> </div>
(4) Optionsknopf (Radio)
In ähnlicher Weise können Sie eine Optionsknopfgruppe erstellen und einen Umschalter für die Optionsschaltbuchgruppe hinzufügen, indem Sie die Datenattributdaten-Toggle = "Schaltflächen" zur BTN-Gruppe hinzufügen.
(5) Methode
Hier sind einige nützliche Methoden in Button -Plugins:
10. Bootstrap Collapse Plug-In
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.
(1) Erstellen Sie ein faltbares Gruppierungs- oder Faltplatte, wie unten gezeigt:
<div ID = "Akkordeon"> <div> <div> <h4> <a data-toggle = "collapse" data-parent = "#akcordion" href = "#collapseone"> Klicken Sie auf mich, um zu erweitern, klicken Sie auf mich, um erneut zusammenzubrechen. 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. </div> </div> </div> </div>
A. Data-Toggle = "Collapse" Hinzufügen zur Verbindung der Komponente, die Sie erweitern oder zusammenbrechen möchten.
Der übergeordnete Komponente wird die Eigenschaft B, HREF oder Data-Ziel hinzugefügt, und sein Wert ist die ID der untergeordneten Komponente.
C. Die Eigenschaft der Daten-Eltern fügt die ID des gefalteten Panels zur Verknüpfung der zu erweiterten oder zusammengebrachten Komponente hinzu.
(2) Erstellen Sie eine einfache zusammenklappbare Komponente ohne das Akkordeon -Tag, wie unten gezeigt:
<button type = "button" data-toggle = "collapse" data-target = "#Demo"> einfache faltbare Komponente </button> <div id = "Demo"> Nihil Anim Keffiyeh Helvetica, Craft Beer Labour Wes Anderson Cred Nesciunt Sapiente EA Proident. Ad vegan außereur Butcher Vice Lomo. </Div>
(3) 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:
A. Durch das Datenattribut: Data-Toggle = "Collapse" und das Datenziel zum Element, um faltbare Elemente automatisch Steuerelemente zuzuweisen. 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.
B. Durch JavaScript: Die Kollapsmethode kann über JavaScript aktiviert werden, wie unten gezeigt: $ ('. Zusammenbruch'). Zusammenbruch ()
11. Bootstrap Carousel Plugin
Das Bootstrap-Karussell-Plug-In ist eine flexible und reaktionsschnelle Möglichkeit, Schieberegler zu einer Site hinzuzufügen. Außerdem ist der Inhalt flexibel genug, um ein Bild, ein eingebetteter Rahmen, ein Video oder eine andere Art von Inhalten zu sein, die Sie platzieren möchten.
<div id = "mycarousel"> <!-Karussellanzeige-> <ol> <li data-target = "#mycarousel" data-slide-to = "0"> </li> <li data-target = "#mycarousel" Data-Slide-to = "1"> </li> <li Data-target = "#"#"#"#"#Mycarousel" Data-Slside = "2", "#"#Mycarousel "," Data-Slside "," Data ","#Mycarousel "," data-Slide ". <!-- Carousel project--> <div> <img src="/wp-content/uploads/2014/07/slide1.png"> <div>Title 1</div> </div> <div> <img src="/wp-content/uploads/2014/07/slide2.png"> <div>Title 2</div></div> <div> <img src = "/wp-content/uploads/2014/07/slide3.png"> <div> title 3 </div> </div> </div> <!-Karouselnavigation-> <a href = "#Mycarousel" Data-Slide = "Prev"> ‹</a> <a href = "#"#"#"#"#mycarousel"#"#mycarousel"#"#mycarousel"#"#mycarousel"#"#mycarousel"#"#mycarousel"#"#mycarousel"#"#mycarousel"#"#mycarousel"#"#mycarous
(1) Verwendung
A. Durch Datenattribut: Verwenden von Datenattributen ist es einfach, die Position des Karussells zu steuern.
Die Eigenschaftsdaten-Slide akzeptiert das Schlüsselwort vor oder neben der Änderung der Position der Folie relativ zur aktuellen Position.
Verwenden Sie die Datenklage zu einem rohen Gleitindex am Boden des Karussellbettes. Data-Slide-to = "2" verschiebt den Schieberegler in einen bestimmten Index, und der Index zählt von 0.
Die Eigenschaft data-ride = "Carousel" wird verwendet, um das Karussell zu markieren, das die Animationswiedergabe beginnt, wenn die Seite geladen wird.
B. Durch JavaScript: Karussell kann manuell durch JavaScript aufgerufen werden, wie unten gezeigt: $ ('. Carousel'). Carousel ()
(2) Optionen
Es gibt einige Optionen, die Dateneigenschaften oder JavaScript übergeben werden. In der folgenden Tabelle werden folgende Optionen aufgeführt:
(3) Methode
Hier sind einige nützliche Methoden in Karussell-Plug-Ins:
(4) Ereignis
In der folgenden Tabelle werden die Ereignisse aufgeführt, die im Karussell-Plug-In verwendet werden sollen. Diese Ereignisse können als Haken in Funktionen verwendet werden.
12. Bootstrap Zusätzliche Navigation (Affix) Plug-In
Das zusätzliche Navigation (Affix) Plugin ermöglicht es, irgendwo auf der Seite ein <div> festzuhalten. Sie können auch zwischen dem Ein- oder Ausschalten des Plugins umschalten. Ein häufiges Beispiel sind soziale Ikonen. Sie beginnen irgendwo, aber wenn die Seite auf eine Marke klickt, sperrt der <div> irgendwo ein und scrollt nicht zusammen mit dem Rest der Seite.
(1) Verwendung
Sie können das Affix-Plug-In (beigefügte Navigation) über Dateneigenschaften oder über JavaScript verwenden.
Durch Datenattribute: Wenn Sie dem Element zusätzliches Navigationsverhalten (Affix) hinzufügen müssen, müssen Sie dem Element, das Sie anhören müssen, nur Datenspy = "Affix" hinzufügen. Verwenden Sie Offsets, um zu definieren, wenn die Verriegelung und Bewegung von Elementen umschalten.
(2) Über JavaScript: Sie können ein Element durch JavaScript manuell zusätzliche Navigation (Affix) hinzufügen, wie unten gezeigt:
$ ('#myaffix'). Affix ({Offset: {Top: 100, unten: function () {return (this.bottom = $ ('. BS-Footer'). OuterHeight (true))}}}})(3) Positionierung durch CSS
In beiden oben genannten Möglichkeiten, um das Affix-Plug-In zu verwenden, müssen Sie Inhalte über CSS lokalisieren. Die Plug-In-Plug-In-Plug-In-Switches zwischen drei Klassen, von denen jeweils einen bestimmten Zustand darstellt: .Affix, .Affix-Top und .Affix-Bottom. Bitte befolgen Sie die folgenden Schritte, um Ihr eigenes CSS für diese drei Zustände einzurichten (nicht auf dieses Plugin angewiesen).
A. Zu Beginn fügt das Plug-In .Affix-Top hinzu, um das Element an seiner obersten Position anzuzeigen. Zu diesem Zeitpunkt ist keine CSS -Positionierung erforderlich.
B. beim Scrollen durch das Element, das zusätzliche Navigation (APIP) hinzufügt, sollte ausgelöst werden. Zu diesem Zeitpunkt ersetzt .Affix .Affix-Top und setzen Sie die Position fest: behoben; (bereitgestellt durch den CSS -Code von Bootstrap).
C. Wenn der untere Offset definiert ist, wenn die Schriftrolle diese Position erreicht, ersetzen Sie .Affix durch .AFFIX-BOTTOM. Da der Offset optional ist, muss ein geeigneter CSS zur gleichen Zeit festgelegt werden, wenn der Offset festgelegt ist. In diesem Fall Position hinzufügen: absolut; falls nötig.
(4) Optionen
Es gibt einige Optionen, die Dateneigenschaften oder JavaScript übergeben werden. In der folgenden Tabelle werden folgende Optionen aufgeführt:
Dieser Artikel wurde in das "Bootstrap -Plugin -Nutzungstutorial" zusammengestellt, und jeder kann gerne lernen und lesen.
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.