JavaScript

Erwecken Sie Bootstrap-Komponenten zum Leben – jetzt mit 13 benutzerdefinierten jQuery-Plug-ins.

Einzeln oder zusammengestellt

Plugins können einzeln (obwohl einige erforderliche Abhängigkeiten haben) oder alle auf einmal enthalten sein. Sowohl bootstrap.js als auch bootstrap.min.js enthalten alle Plugins in einer einzigen Datei.

Datenattribute

Sie können alle Bootstrap-Plug-ins rein über die Markup-API verwenden, ohne eine einzige Zeile JavaScript zu schreiben. Dies ist die erstklassige API von Bootstrap und sollte Ihre erste Überlegung sein, wenn Sie ein Plugin verwenden.

Allerdings kann es in manchen Situationen wünschenswert sein, diese Funktion auszuschalten. Daher bieten wir auch die Möglichkeit, die Datenattribut-API zu deaktivieren, indem wir alle Ereignisse im Body-Namespace mit „data-api“ entbinden. Das sieht so aus:

  1. $ ( 'Körper' ). aus ( '.data-api' )

Um alternativ auf ein bestimmtes Plugin abzuzielen, fügen Sie einfach den Namen des Plugins als Namensraum zusammen mit dem Daten-API-Namensraum wie folgt ein:

  1. $ ( 'Körper' ). aus ( '.alert.data-api' )

Programmatische API

Wir glauben auch, dass Sie in der Lage sein sollten, alle Bootstrap-Plugins ausschließlich über die JavaScript-API zu verwenden. Alle öffentlichen APIs sind einzelne, verkettbare Methoden und geben die Sammlung zurück, auf die gehandelt wird.

  1. $ ( ".btn.Gefahr" ). Schaltfläche ( "Umschalten" ). addClass ( "fett" )

Alle Methoden sollten ein optionales Optionsobjekt akzeptieren, eine Zeichenfolge, die auf eine bestimmte Methode abzielt, oder nichts (was ein Plugin mit Standardverhalten initiiert):

  1. $ ( "#meinModal" ). modal () // mit Standardwerten initialisiert
  2. $ ( "#meinModal" ). modal ({ keyboard : false }) // ohne Tastatur initialisiert
  3. $ ( "#meinModal" ). modal ( 'show' ) // initialisiert und ruft show sofort auf

Jedes Plugin legt auch seinen Rohkonstruktor in einer `Constructor`-Eigenschaft offen: $.fn.popover.Constructor. Wenn Sie eine bestimmte Plugin-Instanz erhalten möchten, rufen Sie sie direkt von einem Element ab: $('[rel=popover]').data('popover').

Kein Konflikt

Manchmal ist es notwendig, Bootstrap-Plugins mit anderen UI-Frameworks zu verwenden. Unter diesen Umständen kann es gelegentlich zu Namespace-Kollisionen kommen. In diesem Fall können Sie .noConflictdas Plugin aufrufen, dessen Wert Sie zurücksetzen möchten.

  1. var bootstrapButton = $ . fn . Schaltfläche . noConflict () // gibt $.fn.button auf den zuvor zugewiesenen Wert zurück
  2. $ . fn . bootstrapBtn = bootstrapButton // gib $().bootstrapBtn die Bootstrap-Funktionalität

Veranstaltungen

Bootstrap bietet benutzerdefinierte Ereignisse für die einzigartigen Aktionen der meisten Plugins. Im Allgemeinen kommen diese in einer Infinitiv- und Partizipform vor – wobei der Infinitiv (z. B. show) zu Beginn eines Ereignisses ausgelöst wird und seine Partizipform (z. B. shown) beim Abschluss einer Aktion ausgelöst wird.

Alle Infinitivereignisse bieten die PreventDefault-Funktionalität. Dies bietet die Möglichkeit, die Ausführung einer Aktion zu stoppen, bevor sie beginnt.

  1. $ ( '#myModal' ). on ( 'show' , function ( e ) {
  2. if (! data ) return e . preventDefault () // verhindert, dass modal angezeigt wird
  3. })

Über Übergänge

Fügen Sie für einfache Übergangseffekte bootstrap-transition.js einmal zusammen mit den anderen JS-Dateien hinzu. Wenn Sie die kompilierte (oder minimierte) bootstrap.js verwenden , müssen Sie diese nicht einschließen – sie ist bereits vorhanden.

Anwendungsfälle

Ein paar Beispiele für das Übergangs-Plugin:

  • Gleiten oder Einblenden von Modalen
  • Registerkarten ausblenden
  • Warnungen ausblenden
  • Verschiebbare Karussellscheiben

Beispiele

Modale sind optimierte, aber flexible Dialogaufforderungen mit der minimal erforderlichen Funktionalität und intelligenten Standardeinstellungen.

Statisches Beispiel

Ein gerendertes Modal mit Header, Body und einer Reihe von Aktionen in der Fußzeile.

  1. <div class = "modal hide fade" >
  2. <div class = "modal-header" >
  3. <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>
  4. <h3> Modaler Header </h3>
  5. </div>
  6. <div class = "modal-body" >
  7. <p> Ein schöner Körper… </p>
  8. </div>
  9. <div class = "modal-footer" >
  10. <a href = "#" class = "btn" > Schließen </a>
  11. <a href = "#" class = "btn btn-primary" > Änderungen speichern </a>
  12. </div>
  13. </div>

Live-Demo

Schalten Sie ein Modal über JavaScript um, indem Sie auf die Schaltfläche unten klicken. Es gleitet nach unten und wird vom oberen Rand der Seite eingeblendet.

  1. <!-- Schaltfläche zum Auslösen von modal -->
  2. <a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Demo-Modal starten </a>
  3.  
  4. <!-- Modal -->
  5. <div id = "myModal" class = "modal hide fade" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true" >
  6. <div class = "modal-header" >
  7. <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>
  8. <h3 id = "myModalLabel" > modaler Header </h3>
  9. </div>
  10. <div class = "modal-body" >
  11. <p> Ein schöner Körper… </p>
  12. </div>
  13. <div class = "modal-footer" >
  14. <button class = "btn" data- dismiss = "modal" aria-hidden = "true" > Schließen </button>
  15. <button class = "btn btn-primary" > Änderungen speichern </button>
  16. </div>
  17. </div>

Verwendungszweck

Über Datenattribute

Aktivieren Sie ein Modal, ohne JavaScript zu schreiben. Setzen Sie data-toggle="modal"es auf ein Controller-Element, wie eine Schaltfläche, zusammen mit einem data-target="#foo"oder href="#foo", um ein bestimmtes Modal zum Umschalten auszuwählen.

  1. <button type = "button" data-toggle = "modal" data-target = "#myModal" > Modal starten </button>

Über JavaScript

Rufen Sie ein Modal mit id myModalmit einer einzigen JavaScript-Zeile auf:

  1. $ ( '#myModal' ). modal ( Optionen )

Optionen

Optionen können über Datenattribute oder JavaScript übergeben werden. Hängen Sie für Datenattribute den Optionsnamen an data-, wie in data-backdrop="".

Name Typ Ursprünglich Bezeichnung
Hintergrund boolesch Stimmt Enthält ein modales Hintergrundelement. Geben Sie alternativ staticeinen Hintergrund an, der das Modal beim Klicken nicht schließt.
Klaviatur boolesch Stimmt Schließt das Modal, wenn die Escape-Taste gedrückt wird
Show boolesch Stimmt Zeigt das Modal bei der Initialisierung an.
Fernbedienung Weg FALSCH

Wenn eine Remote-URL bereitgestellt wird, werden Inhalte über die loadMethode von jQuery geladen und in die .modal-body. Wenn Sie die Daten-API verwenden, können Sie alternativ das hrefTag verwenden, um die Remote-Quelle anzugeben. Ein Beispiel dafür ist unten dargestellt:

  1. <a data-toggle="modal" href="remote.html" data-target="#modal">click me</a>

Methoden

.modal (Optionen)

Aktiviert Ihren Inhalt als Modal. Akzeptiert optionale Optionen object.

  1. $ ( '#myModal' ). modal ({
  2. Tastatur : falsch
  3. })

.modal('umschalten')

Schaltet ein Modal manuell um.

  1. $ ( '#myModal' ). modal ( 'umschalten' )

.modal('zeigen')

Öffnet manuell ein Modal.

  1. $ ( '#myModal' ). modal ( 'zeigen' )

.modal('ausblenden')

Blendet ein Modal manuell aus.

  1. $ ( '#myModal' ). modal ( 'ausblenden' )

Veranstaltungen

Die modale Klasse von Bootstrap macht einige Ereignisse verfügbar, um sich in die modale Funktionalität einzuklinken.

Vorfall Beschreibung
Show Dieses Ereignis wird sofort ausgelöst, wenn die showInstanzmethode aufgerufen wird.
gezeigt Dieses Ereignis wird ausgelöst, wenn das Modal für den Benutzer sichtbar gemacht wurde (wartet auf den Abschluss der CSS-Übergänge).
ausblenden Dieses Ereignis wird sofort ausgelöst, wenn die hideInstanzmethode aufgerufen wurde.
versteckt Dieses Ereignis wird ausgelöst, wenn das Modal vollständig vor dem Benutzer ausgeblendet wurde (wartet auf den Abschluss der CSS-Übergänge).
  1. $ ( '#myModal' ). on ( 'versteckt' , function () {
  2. // etwas tun…
  3. })

Beispiel in der Navigationsleiste

Das ScrollSpy-Plugin dient zum automatischen Aktualisieren von Navigationszielen basierend auf der Scroll-Position. Scrollen Sie im Bereich unterhalb der Navigationsleiste und beobachten Sie, wie sich die aktive Klasse ändert. Die Dropdown-Unterelemente werden ebenfalls hervorgehoben.

@fett

Anzeigen-Leggings Keytar, Brunch-ID-Kunstparty Dolor Labore. Pitchfork yr enim lo-fi, bevor sie ausverkauft sind. Tumblr Farm-to-Table-Fahrradrechte was auch immer. Anim Keffiyeh Carles Strickjacke. Velit Seitan Mcsweeneys Fotoautomat 3 Wolfsmond irure. Cosby-Pullover Lomo-Jeans-Shorts, Williamsburg-Hoodie-Minim, von denen Sie wahrscheinlich noch nichts gehört haben, und Cardigan Trust Fund Culpa Biodiesel Wes Anderson-Ästhetik. Nihil tätowiert Accusamus, Cred Ironie Biodiesel Keffiyeh Handwerker Ullamco Consequat.

@mdo

Veniam Marfa Schnurrbart-Skateboard, Adipisicing Fugiat Velit Mistgabelbart. Freegan Bart aliqua cupidatat mcsweeney's vero. Cupidatat vier loko nisi, ea helvetica nulla carles. Tätowierter Cosby Pullover Food Truck, Mcsweeney's Quis Non Freegan Vinyl. Lo-fi wes anderson +1 sartorial. Carles nicht ästhetische Übung quis gentrify. Brooklyn Adipising Craft Beer Vice Keytar Deserunt.

eines

Occaecat commodo aliqua delectus. Fap Craft Beer Deserunt Skateboard Ea. Lomo-Fahrradrechte adipisicing banh mi, velit ea sunt Next Level Locavore Single-Origin-Kaffee in Magna Veniam. High Life id Vinyl, Echo Park consequat quis aliquip banh mi Pitchfork. Vero VHS est adipising. Consectetur nisi Mini-Umhängetasche zum Selbermachen. Cred ex in, nachhaltige Bauchtasche von delectus consectetur iphone.

zwei

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee blog, culpa Umhängetasche marfa was auch immer delectus Imbisswagen. Sapiente synth id angenommen. Locavore sed helvetica Klischee-Ironie, Thundercats, von denen Sie wahrscheinlich noch nichts gehört haben, consequat Hoodie glutenfrei lo-fi fap aliquip. Labore elit placeat bevor sie ausverkauft sind, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan Craft Beer Seitan Fertig Velit. VHS Chambray Laboris Tempor Veniam. Anim Mollit Minim Commodo Ullamco Donnerkatzen.


Verwendungszweck

Über Datenattribute

Um Ihrer Topbar-Navigation ganz einfach Scrollspy-Verhalten hinzuzufügen, fügen data-spy="scroll"Sie einfach das Element hinzu, das Sie ausspionieren möchten (normalerweise ist dies der Körper) und data-target=".navbar"wählen Sie aus, welches Navi verwendet werden soll. Sie möchten Scrollspy mit einer .navKomponente verwenden.

  1. <body data-spy = "scroll" data-target = ".navbar" > ... </body>

Über JavaScript

Rufen Sie den Scrollspy über JavaScript auf:

  1. $ ( '#Navigationsleiste' ). scrollspy ()
Kopf hoch! Navbar-Links müssen auflösbare ID-Ziele haben. Zum Beispiel <a href="#home">home</a>muss a etwas im Dom entsprechen wie <div id="home"></div>.

Methoden

.scrollspy('aktualisieren')

Wenn Sie scrollspy in Verbindung mit dem Hinzufügen oder Entfernen von Elementen aus dem DOM verwenden, müssen Sie die Aktualisierungsmethode wie folgt aufrufen:

  1. $ ( '[data-spy="scroll"]' ). jeweils ( funktion () {
  2. var $spy = $ ( this ). scrollspy ( 'aktualisieren' )
  3. });

Optionen

Optionen können über Datenattribute oder JavaScript übergeben werden. Hängen Sie für Datenattribute den Optionsnamen an data-, wie in data-offset="".

Name Typ Ursprünglich Bezeichnung
versetzt Nummer 10 Pixel, die bei der Berechnung der Bildlaufposition vom oberen Rand versetzt werden sollen.

Veranstaltungen

Vorfall Beschreibung
aktivieren Sie Dieses Ereignis wird immer dann ausgelöst, wenn ein neuer Gegenstand vom Scrollspy aktiviert wird.

Beispiel-Tabs

Fügen Sie schnelle, dynamische Registerkartenfunktionen hinzu, um durch Bereiche mit lokalen Inhalten zu wechseln, sogar über Dropdown-Menüs.

Raw Denim Sie haben wahrscheinlich noch nie von den Jeansshorts Austin gehört. Nesciunt Tofu Stumptown Aliqua, Retro-Synth-Master-Reinigung. Schnurrbartklischee tempor, williamsburg carles vegan helvetica. Reprehenderit Metzger Retro Keffiyeh Dreamcatcher Synth. Cosby-Pullover eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis Strickjacke amerikanische Kleidung, Metzger voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.


Verwendungszweck

Aktivieren Sie Tabs über JavaScript (jede Registerkarte muss einzeln aktiviert werden):

  1. $ ( '#myTab a' ). klick ( Funktion ( e ) {
  2. e . PreventDefault ();
  3. $ ( dies ). tab ( 'zeigen' );
  4. })

Sie können einzelne Registerkarten auf verschiedene Arten aktivieren:

  1. $ ( '#myTab a[href="#profile"]' ). tab ( 'zeigen' ); // Registerkarte nach Name auswählen
  2. $ ( '#myTab a:first' ). tab ( 'zeigen' ); // Erste Registerkarte auswählen
  3. $ ( '#myTab a:last' ). tab ( 'zeigen' ); // Letzten Tab auswählen
  4. $ ( '#myTab li:eq(2) a' ). tab ( 'zeigen' ); // Dritten Tab auswählen (0-indiziert)

Markierung

Sie können eine Tab- oder Pill-Navigation aktivieren, ohne JavaScript zu schreiben, indem Sie einfach data-toggle="tab"oder data-toggle="pill"für ein Element angeben. Durch das Hinzufügen der Klassen navund nav-tabszur Registerkarte ulwird das Styling der Registerkarte Bootstrap angewendet.

  1. <ul class = "nav nav-tabs" >
  2. <li><a href = "#home" data-toggle = "tab" > Startseite </a></li>
  3. <li><a href = "#profile" data-toggle = "tab" > Profil </a></li>
  4. <li><a href = "#messages" data-toggle = "tab" > Nachrichten </a></li>
  5. <li><a href = "#settings" data-toggle = "tab" > Einstellungen </a></li>
  6. </ul>

Methoden

$().tab

Aktiviert ein Registerkartenelement und einen Inhaltscontainer. Tab sollte entweder ein data-targetoder ein haben href, das auf einen Container-Knoten im DOM abzielt.

  1. <ul class = "nav nav-tabs" id = "myTab" >
  2. <li class = "active" ><a href = "#home" > Startseite </a></li>
  3. <li><a href = "#profile" > Profil </a></li>
  4. <li><a href = "#messages" > Nachrichten </a></li>
  5. <li><a href = "#settings" > Einstellungen </a></li>
  6. </ul>
  7.  
  8. <div class = "tab-content" >
  9. <div class = "tab-pane active" id = "home" > ... </div>
  10. <div class = "tab-pane" id = "profile" > ... </div>
  11. <div class = "tab-pane" id = "messages" > ... </div>
  12. <div class = "tab-pane" id = "settings" > ... </div>
  13. </div>
  14.  
  15. <Skript>
  16. $ ( Funktion () {
  17. $ ( '#myTab a:last' ). tab ( 'zeigen' );
  18. })
  19. </script>

Veranstaltungen

Vorfall Beschreibung
Show Dieses Ereignis wird bei der Registerkartenanzeige ausgelöst, aber bevor die neue Registerkarte angezeigt wurde. Verwenden Sie event.targetund event.relatedTarget, um auf die aktive Registerkarte bzw. die vorherige aktive Registerkarte (falls verfügbar) abzuzielen.
gezeigt Dieses Ereignis wird beim Anzeigen von Registerkarten ausgelöst, nachdem eine Registerkarte angezeigt wurde. Verwenden Sie event.targetund event.relatedTarget, um auf die aktive Registerkarte bzw. die vorherige aktive Registerkarte (falls verfügbar) abzuzielen.
  1. $ ( 'a[data-toggle="tab"]' ). on ( 'angezeigt' , function ( e ) {
  2. e . Ziel // aktivierte Registerkarte
  3. e . relatedTarget // vorheriger Tab
  4. })

Beispiele

Inspiriert von dem exzellenten jQuery.tipsy-Plugin, das von Jason Frame geschrieben wurde; Tooltips sind eine aktualisierte Version, die nicht auf Bilder angewiesen ist, CSS3 für Animationen und Datenattribute für die lokale Titelspeicherung verwendet.

Aus Leistungsgründen sind die Tooltip- und Popover-Daten-APIs optional, d. h . Sie müssen sie selbst initialisieren .

Bewegen Sie den Mauszeiger über die folgenden Links, um QuickInfos anzuzeigen:

Enge Hosen der nächsten Stufe, keffiyeh , von denen hast du wahrscheinlich noch nie gehört. Photo Booth Beard Raw Denim Buchdruck vegane Umhängetasche stumptown. Farm-to-Table-Seitan, Mcsweeney's Fixie Sustainable Quinoa 8-Bit American Apparel haben einen Frottee-Richardson-Vinyl-Chabray. Bart Stumptown, Cardigans banh mi lomo Thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chabray. Ein wirklich ironischer Handwerker wie auch immer Keytar , Scenester Farm-to-Table Banksy Austin Twitter-Handle Freegan Cred Raw Denim Single-Origin-Kaffee viral.

Vier Richtungen

Tooltips in Eingabegruppen

Wenn Sie Tooltips und Popovers mit den Bootstrap-Eingabegruppen verwenden, müssen Sie die containerOption (unten dokumentiert) festlegen, um unerwünschte Nebeneffekte zu vermeiden.


Verwendungszweck

Lösen Sie den Tooltip über JavaScript aus:

  1. $ ( '#beispiel' ). Kurzinfo ( Optionen )

Optionen

Optionen können über Datenattribute oder JavaScript übergeben werden. Hängen Sie für Datenattribute den Optionsnamen an data-, wie in data-animation="".

Name Typ Ursprünglich Bezeichnung
Animation boolesch Stimmt Wenden Sie einen CSS-Fade-Übergang auf den Tooltip an
html boolesch FALSCH HTML in den Tooltip einfügen. Bei „false“ wird die Methode von jquery textverwendet, um Inhalte in den Dom einzufügen. Verwenden Sie Text, wenn Sie sich Sorgen über XSS-Angriffe machen.
Platzierung Zeichenfolge | Funktion 'oben' So positionieren Sie den Tooltip - oben | unten | links | Rechts
Wähler Schnur FALSCH Wenn ein Selektor bereitgestellt wird, werden QuickInfo-Objekte an die angegebenen Ziele delegiert.
Titel Zeichenfolge | Funktion '' Standardwert für den Titel, wenn das `title`-Tag nicht vorhanden ist
Abzug Schnur "Hover-Fokus" wie der Tooltip ausgelöst wird - klicken Sie auf | schweben | Fokus | Handbuch. Beachten Sie, dass Sie mehrere, durch Leerzeichen getrennte, Triggertypen übergeben.
Verzögerung Zahl | Objekt 0

Verzögerung beim Anzeigen und Ausblenden des Tooltips (ms) - gilt nicht für den manuellen Triggertyp

Wenn eine Nummer angegeben wird, wird die Verzögerung sowohl auf das Ausblenden als auch auf das Anzeigen angewendet

Objektstruktur ist:delay: { show: 500, hide: 100 }

Container Zeichenfolge | FALSCH FALSCH

Hängt den Tooltip an ein bestimmtes Element ancontainer: 'body'

Kopf hoch! Optionen für individuelle Tooltips können alternativ durch die Verwendung von Datenattributen angegeben werden.

Markierung

  1. <a href = "#" data-toggle = "tooltip" title = "first tooltip" > Bewegen Sie den Mauszeiger über mich </a>

Methoden

$().tooltip(Optionen)

Fügt einen Tooltip-Handler an eine Elementsammlung an.

.tooltip('zeigen')

Zeigt den Tooltip eines Elements an.

  1. $ ( '#element' ). Tooltip ( 'zeigen' )

.tooltip('ausblenden')

Blendet den Tooltip eines Elements aus.

  1. $ ( '#element' ). Tooltip ( 'ausblenden' )

.tooltip('umschalten')

Schaltet den Tooltip eines Elements um.

  1. $ ( '#element' ). Tooltip ( 'umschalten' )

.tooltip('zerstören')

Versteckt und zerstört den Tooltip eines Elements.

  1. $ ( '#element' ). Tooltip ( 'zerstören' )

Beispiele

Fügen Sie jedem Element kleine Inhaltsüberlagerungen wie auf dem iPad hinzu, um sekundäre Informationen aufzunehmen. Bewegen Sie den Mauszeiger über die Schaltfläche, um das Popover auszulösen. Erfordert , dass ein Tooltip eingefügt wird.

Statisches Popover

Vier Optionen sind verfügbar: oben, rechts, unten und links ausgerichtet.

Popover-Oberteil

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover richtig

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover unten

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover ist gegangen

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Kein als Popover angezeigtes Markup wird aus JavaScript und Inhalt innerhalb eines dataAttributs generiert.

Live-Demo

Vier Richtungen


Verwendungszweck

Popover über JavaScript aktivieren:

  1. $ ( '#beispiel' ). Popover ( Optionen )

Optionen

Optionen können über Datenattribute oder JavaScript übergeben werden. Hängen Sie für Datenattribute den Optionsnamen an data-, wie in data-animation="".

Name Typ Ursprünglich Bezeichnung
Animation boolesch Stimmt Wenden Sie einen CSS-Fade-Übergang auf den Tooltip an
html boolesch FALSCH HTML in das Popover einfügen. Bei „false“ wird die Methode von jquery textverwendet, um Inhalte in den Dom einzufügen. Verwenden Sie Text, wenn Sie sich Sorgen über XSS-Angriffe machen.
Platzierung Zeichenfolge | Funktion 'Rechts' So positionieren Sie das Popover - top | unten | links | Rechts
Wähler Schnur FALSCH Wenn ein Selektor bereitgestellt wird, werden QuickInfo-Objekte an die angegebenen Ziele delegiert
Abzug Schnur 'klicken' wie Popover ausgelöst wird - klicken Sie auf | schweben | Fokus | Handbuch
Titel Zeichenfolge | Funktion '' Standardwert für den Titel, wenn das Attribut "Titel" nicht vorhanden ist
Inhalt Zeichenfolge | Funktion '' Standardwert für den Inhalt, wenn das Attribut "data-content" nicht vorhanden ist
Verzögerung Zahl | Objekt 0

Verzögerung beim Anzeigen und Ausblenden des Popovers (ms) – gilt nicht für den manuellen Triggertyp

Wenn eine Nummer angegeben wird, wird die Verzögerung sowohl auf das Ausblenden als auch auf das Anzeigen angewendet

Objektstruktur ist:delay: { show: 500, hide: 100 }

Container Zeichenfolge | FALSCH FALSCH

Hängt das Popover an ein bestimmtes Element ancontainer: 'body'

Kopf hoch! Optionen für einzelne Popover können alternativ durch die Verwendung von Datenattributen angegeben werden.

Markierung

Aus Leistungsgründen sind die Tooltip- und Popover-Daten-APIs optional. Wenn Sie sie verwenden möchten, geben Sie einfach eine Auswahloption an.

Methoden

$().popover(Optionen)

Initialisiert Popover für eine Elementsammlung.

.popover('zeigen')

Zeigt ein Elemente-Popover an.

  1. $ ( '#element' ). popover ( 'zeigen' )

.popover('ausblenden')

Blendet ein Elemente-Popover aus.

  1. $ ( '#element' ). popover ( 'ausblenden' )

.popover('umschalten')

Schaltet ein Elemente-Popover um.

  1. $ ( '#element' ). popover ( 'umschalten' )

.popover('zerstören')

Verbirgt und zerstört das Popover eines Elements.

  1. $ ( '#element' ). popover ( 'zerstören' )

Beispielwarnungen

Fügen Sie mit diesem Plugin allen Warnmeldungen die Funktion zum Schließen hinzu.

Heilige Guacamole! Überprüfe am besten dich selbst, du siehst nicht allzu gut aus.

Oh verdammt! Sie haben einen Fehler!

Ändern Sie dies und das und versuchen Sie es erneut. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Führen Sie diese Aktion durch Oder tun Sie dies


Verwendungszweck

Verwerfen einer Warnung über JavaScript aktivieren:

  1. $ ( ".alarm" ). Alarm ()

Markierung

Fügen Sie einfach data-dismiss="alert"Ihre Schließen-Schaltfläche hinzu, um automatisch eine Warnmeldung zum Schließen zu erhalten.

  1. <a class = "close" data-dismiss = "alert" href = "#" > × </a>

Methoden

$().alarm()

Umschließt alle Warnungen mit Schließfunktion. Damit Ihre Benachrichtigungen beim Schließen animiert werden, stellen Sie sicher, dass ihnen die Klasse .fadeund .inbereits zugewiesen wurde.

.alert('Schließen')

Schließt eine Warnung.

  1. $ ( ".alarm" ). Alarm ( 'Schließen' )

Veranstaltungen

Die Alert-Klasse von Bootstrap stellt einige Ereignisse bereit, um sich in die Alert-Funktionalität einzuklinken.

Vorfall Beschreibung
nah dran Dieses Ereignis wird sofort ausgelöst, wenn die closeInstanzmethode aufgerufen wird.
abgeschlossen Dieses Ereignis wird ausgelöst, wenn die Warnung geschlossen wurde (wartet, bis die CSS-Übergänge abgeschlossen sind).
  1. $ ( '#my-alert' ). bind ( 'geschlossen' , function () {
  2. // etwas tun…
  3. })

Beispielanwendungen

Machen Sie mehr mit Tasten. Steuern Sie Schaltflächenzustände oder erstellen Sie Gruppen von Schaltflächen für weitere Komponenten wie Symbolleisten.

Staatsbürgerlich

Hinzufügen data-loading-text="Loading...", um einen Ladezustand auf einer Schaltfläche zu verwenden.

  1. <button type = "button" class = "btn btn-primary" data -loading-text = "Wird geladen ..." > Status wird geladen </button>

Einzelner Schalter

Hinzufügen data-toggle="button", um das Umschalten auf einer einzigen Schaltfläche zu aktivieren.

  1. <button type = "button" class = "btn btn-primary" data-toggle = "button" > Single Toggle </button>

Kontrollkästchen

Hinzufügen data-toggle="buttons-checkbox"zum Umschalten des Kontrollkästchenstils in der BTN-Gruppe.

  1. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  2. <button type = "button" class = "btn btn-primary" > Links </button>
  3. <button type = "button" class = "btn btn-primary" > Mittel </button>
  4. <button type = "button" class = "btn btn-primary" > Rechts </button>
  5. </div>

Radio

Hinzufügen data-toggle="buttons-radio"zum Umschalten des Radiostils in der BTN-Gruppe.

  1. <div class = "btn-group" data-toggle = "buttons-radio" >
  2. <button type = "button" class = "btn btn-primary" > Links </button>
  3. <button type = "button" class = "btn btn-primary" > Mittel </button>
  4. <button type = "button" class = "btn btn-primary" > Rechts </button>
  5. </div>

Verwendungszweck

Schaltflächen über JavaScript aktivieren:

  1. $ ( '.nav-tabs' ). Knopf ()

Markierung

Datenattribute sind integraler Bestandteil des Schaltflächen-Plugins. Sehen Sie sich den Beispielcode unten für die verschiedenen Markup-Typen an.

Optionen

Keiner

Methoden

$().button('umschalten')

Schaltet den Push-Status um. Verleiht der Schaltfläche den Eindruck, dass sie aktiviert wurde.

Kopf hoch! Sie können das automatische Umschalten einer Schaltfläche aktivieren, indem Sie das data-toggleAttribut verwenden.
  1. <button type = "button" class = "btn" data-toggle = "button" > </button>

$().button('Laden')

Setzt den Schaltflächenstatus auf Laden – deaktiviert die Schaltfläche und tauscht Text gegen Ladetext aus. Der Ladetext sollte auf dem Schaltflächenelement mit dem Datenattribut definiert werden data-loading-text.

  1. <button type = "button" class = "btn" data-loading-text = "loading stuff ..." > ... </button>
Kopf hoch! Firefox behält den deaktivierten Zustand über das Laden von Seiten bei . Eine Problemumgehung hierfür ist die Verwendung von autocomplete="off".

$().button('zurücksetzen')

Setzt den Schaltflächenstatus zurück - tauscht den Text gegen den ursprünglichen Text aus.

$().button(Zeichenfolge)

Setzt den Schaltflächenstatus zurück - tauscht den Text in einen beliebigen datendefinierten Textstatus aus.

  1. <button type = "button" class = "btn" data-complete-text = "fertig!" > ... </button>
  2. <Skript>
  3. $ ( '.btn' ). Schaltfläche ( 'Fertig' )
  4. </script>

Um

Holen Sie sich Basisstile und flexible Unterstützung für zusammenklappbare Komponenten wie Akkordeons und Navigation.

* Erfordert die Einbeziehung des Transitions-Plugins.

Beispiel Akkordeon

Mit dem Collapse-Plugin haben wir ein einfaches Akkordeon-Widget erstellt:

Anim pariatur clische reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 Wolfsmond officia aute, non cupidatat skateboard dolor brunch. Foodtruck Quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it tintenfisch sortenreiner kaffee nulla angenommenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Anzeige veganer Ausnahme Metzger Vice Lomo. Leggings occaecat Craft Beer Farm-to-Table, Raw-Denim-Ästhetik-Synth nesciunt Sie haben wahrscheinlich noch nichts von ihnen gehört accusamus labore sustainable VHS.
Anim pariatur clische reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 Wolfsmond officia aute, non cupidatat skateboard dolor brunch. Foodtruck Quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it tintenfisch sortenreiner kaffee nulla angenommenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Anzeige veganer Ausnahme Metzger Vice Lomo. Leggings occaecat Craft Beer Farm-to-Table, Raw-Denim-Ästhetik-Synth nesciunt Sie haben wahrscheinlich noch nichts von ihnen gehört accusamus labore sustainable VHS.
Anim pariatur clische reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 Wolfsmond officia aute, non cupidatat skateboard dolor brunch. Foodtruck Quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it tintenfisch sortenreiner kaffee nulla angenommenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Anzeige veganer Ausnahme Metzger Vice Lomo. Leggings occaecat Craft Beer Farm-to-Table, Raw-Denim-Ästhetik-Synth nesciunt Sie haben wahrscheinlich noch nichts von ihnen gehört accusamus labore sustainable VHS.
  1. <div class = "akkordeon" id = "akkordeon2" >
  2. <div class = "akkordeongruppe" >
  3. <div class = "akkordeon-überschrift" >
  4. <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >
  5. Reduzierbares Gruppenelement Nr. 1
  6. </a>
  7. </div>
  8. <div id = "collapseOne" class = "akkordeonkörper einklappen" >
  9. <div class = "akkordeon-inner" >
  10. Anim Pariatur Klischee...
  11. </div>
  12. </div>
  13. </div>
  14. <div class = "akkordeongruppe" >
  15. <div class = "akkordeon-überschrift" >
  16. <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >
  17. Reduzierbarer Gruppenartikel Nr. 2
  18. </a>
  19. </div>
  20. <div id = "collapseTwo" class = "akkordeon-körper zusammenbruch" >
  21. <div class = "akkordeon-inner" >
  22. Anim Pariatur Klischee...
  23. </div>
  24. </div>
  25. </div>
  26. </div>
  27. ...

Sie können das Plugin auch ohne das Akkordeon-Markup verwenden. Erstellen Sie eine Schaltfläche, um das Erweitern und Reduzieren eines anderen Elements umzuschalten.

  1. <button type = "button" class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >
  2. einfach zusammenklappbar
  3. </button>
  4.  
  5. <div id = "demo" class = "collapse in" > </div>

Verwendungszweck

Über Datenattribute

Fügen Sie einfach data-toggle="collapse"ein und ein data-targetto-Element hinzu, um automatisch die Steuerung eines reduzierbaren Elements zuzuweisen. Das data-targetAttribut akzeptiert einen CSS-Selektor, auf den die Reduzierung angewendet wird. Stellen Sie sicher, dass Sie die Klasse collapsedem zusammenklappbaren Element hinzufügen. Wenn Sie möchten, dass es standardmäßig geöffnet ist, fügen Sie die zusätzliche Klasse hinzu in.

Um einem reduzierbaren Steuerelement eine akkordeonartige Gruppenverwaltung hinzuzufügen, fügen Sie das Datenattribut hinzu data-parent="#selector". Sehen Sie sich die Demo an, um dies in Aktion zu sehen.

Über JavaScript

Manuell aktivieren mit:

  1. $ ( ".collapse" ). zusammenbrechen ()

Optionen

Optionen können über Datenattribute oder JavaScript übergeben werden. Hängen Sie für Datenattribute den Optionsnamen an data-, wie in data-parent="".

Name Typ Ursprünglich Bezeichnung
Elternteil Wähler FALSCH Wenn Selektor, dann werden alle reduzierbaren Elemente unter dem angegebenen übergeordneten Element geschlossen, wenn dieses reduzierbare Element angezeigt wird. (ähnlich dem traditionellen Akkordeonverhalten)
Umschalten boolesch Stimmt Schaltet das reduzierbare Element beim Aufruf um

Methoden

.collapse(Optionen)

Aktiviert Ihren Inhalt als zusammenklappbares Element. Akzeptiert optionale Optionen object.

  1. $ ( '#myCollapsible' ). zusammenbrechen ({
  2. umschalten : falsch
  3. })

.collapse('umschalten')

Blendet ein reduzierbares Element ein oder aus.

.collapse('zeigen')

Zeigt ein zusammenklappbares Element.

.collapse('ausblenden')

Blendet ein zusammenklappbares Element aus.

Veranstaltungen

Die Collapse-Klasse von Bootstrap macht einige Ereignisse verfügbar, um sich in die Collapse-Funktionalität einzuklinken.

Vorfall Beschreibung
Show Dieses Ereignis wird sofort ausgelöst, wenn die showInstanzmethode aufgerufen wird.
gezeigt Dieses Ereignis wird ausgelöst, wenn ein Kollapselement für den Benutzer sichtbar gemacht wurde (wartet, bis die CSS-Übergänge abgeschlossen sind).
ausblenden Dieses Ereignis wird sofort ausgelöst, wenn die hideMethode aufgerufen wurde.
versteckt Dieses Ereignis wird ausgelöst, wenn ein Collapse-Element vor dem Benutzer ausgeblendet wurde (wartet, bis die CSS-Übergänge abgeschlossen sind).
  1. $ ( '#myCollapsible' ). on ( 'versteckt' , function () {
  2. // etwas tun…
  3. })

Beispiel

Ein einfaches, leicht erweiterbares Plug-in zum schnellen Erstellen eleganter Textvervollständigungen mit beliebigen Formulartexteingaben.

  1. <input type = "text" data-provide = "typeahead" >

Sie sollten festlegen autocomplete="off", dass standardmäßige Browsermenüs nicht über dem Bootstrap-Dropdown-Menü angezeigt werden.


Verwendungszweck

Über Datenattribute

Fügen Sie Datenattribute hinzu, um ein Element mit der Schnellvervollständigungsfunktion zu registrieren, wie im obigen Beispiel gezeigt.

Über JavaScript

Rufen Sie die Vervollständigung manuell auf mit:

  1. $ ( '.tippen' ). tippen ()

Optionen

Optionen können über Datenattribute oder JavaScript übergeben werden. Hängen Sie für Datenattribute den Optionsnamen an data-, wie in data-source="".

Name Typ Ursprünglich Bezeichnung
Quelle Array, Funktion [ ] Die abzufragende Datenquelle. Kann ein Array von Strings oder eine Funktion sein. Der Funktion werden zwei Argumente übergeben, der queryWert im Eingabefeld und der processCallback. Die Funktion kann synchron verwendet werden, indem die Datenquelle direkt oder asynchron über das processeinzelne Argument des Rückrufs zurückgegeben wird.
Artikel Nummer 8 Die maximale Anzahl von Elementen, die in der Dropdown-Liste angezeigt werden.
minimale Länge Nummer 1 Die Mindestzeichenlänge, die erforderlich ist, bevor Vorschläge zur automatischen Vervollständigung ausgelöst werden
Matcher Funktion Groß-/Kleinschreibung egal Die Methode, mit der bestimmt wird, ob eine Abfrage mit einem Element übereinstimmt. Akzeptiert ein einzelnes Argument, itemgegen das die Abfrage getestet werden soll. Rufen Sie die aktuelle Abfrage mit auf this.query. Gibt einen booleschen Wert zurück true, wenn die Abfrage eine Übereinstimmung ist.
Sorter Funktion exakte Übereinstimmung,
Groß-/Kleinschreibung beachten, Groß-/
Kleinschreibung nicht beachten
Methode zum Sortieren von Autocomplete-Ergebnissen. Akzeptiert ein einzelnes Argument itemsund hat den Gültigkeitsbereich der Typeahead-Instanz. Referenzieren Sie die aktuelle Abfrage mit this.query.
Updater Funktion gibt das ausgewählte Element zurück Die Methode, die verwendet wird, um das ausgewählte Element zurückzugeben. Akzeptiert ein einzelnes Argument, das itemund hat den Geltungsbereich der typeahead-Instanz.
Textmarker Funktion hebt alle Standardübereinstimmungen hervor Methode zum Hervorheben von Ergebnissen der automatischen Vervollständigung. Akzeptiert ein einzelnes Argument itemund hat den Gültigkeitsbereich der Typeahead-Instanz. Sollte HTML zurückgeben.

Methoden

.typeahead (Optionen)

Initialisiert eine Eingabe mit einer Schnellvervollständigung.

Beispiel

Die Unternavigation auf der linken Seite ist eine Live-Demo des Affix-Plugins.


Verwendungszweck

Über Datenattribute

Um jedem Element ganz einfach Affix-Verhalten hinzuzufügen, fügen Sie es einfach data-spy="affix"zu dem Element hinzu, das Sie ausspionieren möchten. Verwenden Sie dann Offsets, um zu definieren, wann das Fixieren eines Elements ein- und ausgeschaltet werden soll.

  1. <div data-spy = "affix" data-offset-top = "200" > ... </div>
Kopf hoch! Sie müssen die Position eines fixierten Elements und das Verhalten seines unmittelbar übergeordneten Elements verwalten. Die Position wird durch affix, affix-top, und gesteuert affix-bottom. Denken Sie daran, nach einem möglicherweise minimierten übergeordneten Element zu suchen, wenn das Affix aktiviert wird, da es Inhalte aus dem normalen Fluss der Seite entfernt.

Über JavaScript

Rufen Sie das Affix-Plugin über JavaScript auf:

  1. $ ( '#Navigationsleiste' ). anbringen ()

Optionen

Optionen können über Datenattribute oder JavaScript übergeben werden. Hängen Sie für Datenattribute den Optionsnamen an data-, wie in data-offset-top="200".

Name Typ Ursprünglich Bezeichnung
versetzt Zahl | Funktion | Objekt 10 Pixel, die beim Berechnen der Bildlaufposition vom Bildschirm versetzt werden sollen. Wenn eine einzelne Zahl angegeben wird, wird der Versatz sowohl nach oben als auch nach links angewendet. Um auf eine einzelne Richtung oder mehrere eindeutige Offsets zu hören, geben Sie einfach ein Objekt an offset: { x: 10 }. Verwenden Sie eine Funktion, wenn Sie dynamisch einen Offset bereitstellen müssen (nützlich für einige responsive Designs).