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:

$ ( '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:

$ ( '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.

$ ( ".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):

$ ( "#meinModal" ). modal () // mit Standardwerten initialisiert                       
$ ( "#meinModal" ). modal ({ keyboard : false }) // ohne Tastatur initialisiert     
$ ( "#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.

var bootstrapButton = $ . fn . Schaltfläche . noConflict () // gibt $.fn.button auf den zuvor zugewiesenen Wert zurück 
$ . 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 Partizip-Form vor – wobei der Infinitiv (z. B. show) zu Beginn eines Ereignisses ausgelöst wird und seine Partizip-Form (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.

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

Ü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.

<div class = "modal hide fade" > 
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>    
    <h3> Modaler Header </h3>
  </div>
  <div class = "modal-body" > 
    <p> Ein schöner Körper… </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" > Schließen </a>  
    <a href = "#" class = "btn btn-primary" > Änderungen speichern </a>  
  </div>
</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.

<!-- Schaltfläche zum Auslösen von modal -->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Demo-Modal starten </a>    
 
<!-- Modal -->
<div id = "myModal" class = "modal hide fade" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true" >      
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>    
    <h3 id = "myModalLabel" > modaler Header </h3> 
  </div>
  <div class = "modal-body" > 
    <p> Ein schöner Körper… </p>
  </div>
  <div class = "modal-footer" > 
    <button class = "btn" data- dismiss = "modal" aria-hidden = "true" > Schließen </button>   
    <button class = "btn btn-primary" > Änderungen speichern </button> 
  </div>
</div>

Verwendungszweck

Über Datenattribute

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

<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:

$ ( '#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="".

<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.

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

.modal('umschalten')

Schaltet ein Modal manuell um.

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

.modal('zeigen')

Öffnet manuell ein Modal.

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

.modal('ausblenden')

Blendet ein Modal manuell aus.

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

Veranstaltungen

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

$ ( '#myModal' ). on ( 'versteckt' , function () {   
  // etwas tun…
})

Beispiele

Fügen Sie mit diesem einfachen Plugin Dropdown-Menüs zu fast allem hinzu, einschließlich der Navigationsleiste, Registerkarten und Pillen.

Innerhalb einer Navigationsleiste

Innerhalb von Registerkarten

Verwendungszweck

Über Datenattribute

Zu einem Link oder einer Schaltfläche hinzufügen data-toggle="dropdown", um ein Dropdown-Menü umzuschalten.

<div class = "Dropdown" > 
  <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" > Dropdown-Auslöser </a>   
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

Um URLs intakt zu halten, verwenden Sie das data-targetAttribut anstelle von href="#".

<div class = "Dropdown" > 
  <a class = "dropdown-toggle" id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html" >      
    Dropdown-Liste
    <b class = "caret" ></b> 
  </a>
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

Über JavaScript

Rufen Sie die Dropdowns über JavaScript auf:

$ ( '.dropdown-toggle' ). Dropdown ()

Optionen

Keiner

Methoden

$().dropdown('umschalten')

Eine programmatische API zum Umschalten von Menüs für eine bestimmte Navigationsleiste oder Registerkartennavigation.

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.

Verwendungszweck

Über Datenattribute

Um einfach Scrollspy-Verhalten zu Ihrer Topbar-Navigation hinzuzufügen, fügen data-spy="scroll"Sie einfach das Element hinzu, das Sie ausspionieren möchten (normalerweise wäre 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.

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

Über JavaScript

Rufen Sie den Scrollspy über JavaScript auf:

$ ( '#Navigationsleiste' ). scrollspy ()

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:

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

Optionen

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

Veranstaltungen

Beispiel-Tabs

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

Verwendungszweck

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

$ ( '#myTab a' ). klick ( funktion ( e ) {  
  e . PreventDefault ();
  $ ( dies ). tab ( 'zeigen' );
})

Sie können einzelne Registerkarten auf verschiedene Arten aktivieren:

$ ( '#myTab a[href="#profile"]' ). tab ( 'zeigen' ); // Registerkarte nach Name auswählen 
$ ( '#myTab a:first' ). tab ( 'zeigen' ); // Erste Registerkarte auswählen 
$ ( '#myTab a:last' ). tab ( 'zeigen' ); // Letzten Tab auswählen 
$ ( '#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.

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > Startseite </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > Profil </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > Nachrichten </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > Einstellungen </a></li>  
</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.

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "active" ><a href = "#home" > Startseite </a></li>  
  <li><a href = "#profile" > Profil </a></li> 
  <li><a href = "#messages" > Nachrichten </a></li> 
  <li><a href = "#settings" > Einstellungen </a></li> 
</ul>
 
<div class = "tab-content" > 
  <div class = "tab-pane active" id = "home" > ... </div>  
  <div class = "tab-pane" id = "profile" > ... </div>  
  <div class = "tab-pane" id = "messages" > ... </div>  
  <div class = "tab-pane" id = "settings" > ... </div>  
</div>
 
<Skript>
  $ ( Funktion () {  
    $ ( '#myTab a:last' ). tab ( 'zeigen' );
  })
</script>

Veranstaltungen

$ ( 'a[data-toggle="tab"]' ). on ( 'angezeigt' , function ( e ) {   
  e . Ziel // aktivierte Registerkarte
  e . relatedTarget // vorheriger Tab
})

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:

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:

$ ( '#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="".

Markierung

<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.

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

.tooltip('ausblenden')

Blendet den Tooltip eines Elements aus.

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

.tooltip('umschalten')

Schaltet den Tooltip eines Elements um.

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

.tooltip('zerstören')

Versteckt und zerstört den Tooltip eines Elements.

$ ( '#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 das Einfügen eines Tooltips .

Statisches Popover

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

Es wird kein Markup angezeigt, da Popover aus JavaScript und Inhalt innerhalb eines dataAttributs generiert werden.

Live-Demo

Vier Richtungen

Verwendungszweck

Popover über JavaScript aktivieren:

$ ( '#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="".

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 Element-Popover an.

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

.popover('ausblenden')

Blendet ein Elemente-Popover aus.

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

.popover('umschalten')

Schaltet ein Elemente-Popover um.

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

.popover('zerstören')

Verbirgt und zerstört das Popover eines Elements.

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

Beispielwarnungen

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

Verwendungszweck

Verwerfen einer Warnung über JavaScript aktivieren:

$ ( ".alarm" ). Alarm ()

Markierung

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

<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.

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

Veranstaltungen

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

$ ( '#my-alert' ). bind ( 'geschlossen' , Funktion () {   
  // etwas tun…
})

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.

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

Einzelschalter

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

<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.

<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button type = "button" class = "btn btn-primary" > Links </button>  
  <button type = "button" class = "btn btn-primary" > Mittel </button>  
  <button type = "button" class = "btn btn-primary" > Rechts </button>  
</div>

Radio

Fügen Sie data-toggle="buttons-radio"hinzu, um den Radiostil in der BTN-Gruppe umzuschalten.

<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button type = "button" class = "btn btn-primary" > Links </button>  
  <button type = "button" class = "btn btn-primary" > Mittel </button>  
  <button type = "button" class = "btn btn-primary" > Rechts </button>  
</div>

Verwendungszweck

Schaltflächen über JavaScript aktivieren:

$ ( '.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.

<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.

<button type = "button" class = "btn" data-loading-text = "loading stuff ..." > ... </button>    

$().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.

<button type = "button" class = "btn" data-complete-text = "fertig!" > ... </button>    
<Skript>
  $ ( '.btn' ). Schaltfläche ( 'Fertig' )
</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:

<div class = "akkordeon" id = "akkordeon2" >  
  <div class = "akkordeongruppe" > 
    <div class = "akkordeon-überschrift" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >    
        Reduzierbares Gruppenelement Nr. 1
      </a>
    </div>
    <div id = "collapseOne" class = "akkordeonkörper einklappen" >  
      <div class = "akkordeon-inner" > 
        Anim Pariatur Klischee...
      </div>
    </div>
  </div>
  <div class = "akkordeongruppe" > 
    <div class = "akkordeon-überschrift" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >    
        Reduzierbares Gruppenelement Nr. 2
      </a>
    </div>
    <div id = "collapseTwo" class = "akkordeon-körper zusammenbruch" >  
      <div class = "akkordeon-inner" > 
        Anim Pariatur Klischee...
      </div>
    </div>
  </div>
</div>
...

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.

<button type = "button" class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >    
  einfach zusammenklappbar
</button>
 
<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:

$ ( ".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="".

Methoden

.collapse(Optionen)

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

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

.collapse('umschalten')

Blendet ein reduzierbares Element ein oder aus.

.collapse('zeigen')

Zeigt ein zusammenklappbares Element.

.collapse('ausblenden')

Blendet ein zusammenklappbares Element aus.

Veranstaltungen

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

$ ( '#myCollapsible' ). on ( 'versteckt' , function () {   
  // etwas tun…
})

Beispiel Karussell

Die Diashow unten zeigt ein generisches Plugin und eine Komponente zum Durchlaufen von Elementen wie einem Karussell.

Erstes Thumbnail-Label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida bei eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Zweites Thumbnail-Label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida bei eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Drittes Thumbnail-Label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida bei eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

‹ ›

<div id = "myCarousel" class = "carousel slide" >  
  <ol class = "Karussell-Indikatoren" > 
    <li data-target = "#myCarousel" data-slide-to = "0" class = "active" ></li>   
    <li data-target = "#myCarousel" data-slide-to = "1" ></li>  
    <li data-target = "#myCarousel" data-slide-to = "2" ></li>  
  </ol>
  <!-- Karussellartikel -->
  <div class = "carousel-inner" > 
    <div class = "aktives Element" > … </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <!-- Karussellnavigation -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "next" > › </a>   
</div>

Verwendungszweck

Über Datenattribute

Verwenden Sie Datenattribute, um die Position des Karussells einfach zu steuern. data-slideakzeptiert die Schlüsselwörter prevoder next, wodurch die Folienposition relativ zu ihrer aktuellen Position geändert wird. Verwenden Sie alternativ , data-slide-toum einen rohen Folienindex an das Karussell zu übergeben data-slide-to="2", wodurch die Folienposition zu einem bestimmten Index springt, der mit beginnt 0.

Über JavaScript

Karussell manuell aufrufen mit:

$ ( '.Karussell' ). Karussell ()

Optionen

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

Methoden

.Karussell (Optionen)

Initialisiert das Karussell mit optionalen Optionen objectund beginnt, die Elemente zu durchlaufen.

$ ( '.Karussell' ). Karussell ({
  Intervall : 2000 
})

.Karussell('Zyklus')

Blättert von links nach rechts durch die Karussellelemente.

.Karussell('Pause')

Verhindert, dass das Karussell Artikel durchläuft.

.Karussell(Zahl)

Wechselt das Karussell zu einem bestimmten Frame (0-basiert, ähnlich einem Array).

.karussell('prev')

Wechselt zum vorherigen Element.

.karussell('weiter')

Wechselt zum nächsten Element.

Veranstaltungen

Die Karussellklasse von Bootstrap macht zwei Ereignisse verfügbar, um sich in die Karussellfunktionalität einzuklinken.

Beispiel

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

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

Sie sollten festlegen autocomplete="off", dass Standardbrowsermenü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:

$ ( '.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="".

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.

<div data-spy = "affix" data-offset-top = "200" > ... </div>  

Über JavaScript

Rufen Sie das Affix-Plugin über JavaScript auf:

$ ( '#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".