Über Modale

Eine optimierte, aber flexible Version des traditionellen Javascript-Modal-Plugins mit nur der minimal erforderlichen Funktionalität und intelligenten Standardeinstellungen.

Statisches Beispiel

Unten ist ein statisch gerendertes Modal.

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.

Verwenden von Bootstrap-Modal

Rufen Sie das Modal über Javascript auf:

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

Optionen

Markierung

Sie können Modals auf Ihrer Seite einfach aktivieren, ohne eine einzige Zeile Javascript schreiben zu müssen. Legen Sie einfach data-toggle="modal"ein Controller-Element mit einem data-target="#foo"oder fest href="#foo", das einer modalen Element-ID entspricht, und wenn Sie darauf klicken, wird Ihr Modal gestartet.

Um Optionen zu Ihrer modalen Instanz hinzuzufügen, fügen Sie diese einfach als zusätzliche Datenattribute entweder in das Steuerelement oder in das modale Markup selbst ein.

<a class = "btn" data-toggle = "modal" href = "#myModal" > Starte Modal </a>    

<div class = "modal hide" id = "myModal" >  
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" > × </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" data-dismiss = "modal" > Schließen </a>   
    <a href = "#" class = "btn btn-primary" > Änderungen speichern </a>  
  </div>
</div>

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…
})

Über Dropdowns

Fügen Sie mit diesem einfachen Plugin Dropdown-Menüs zu fast allem in Bootstrap hinzu. Bootstrap bietet vollständige Unterstützung für Dropdown-Menüs in der Navigationsleiste, Registerkarten und Pillen.

Beispiele

Klicken Sie auf die Dropdown-Navigationslinks in der Navigationsleiste und den Pillen unten, um Dropdowns zu testen.

• Normaler Link
• Dropdown-Liste
  • Action
  • Another action
  • Something else here
  • Separated link
• Dropdown 2
  • Action
  • Another action
  • Something else here
  • Separated link
• Dropdown 3
  • Action
  • Another action
  • Something else here
  • Separated link

Verwenden von bootstrap-dropdown.js

Rufen Sie die Dropdowns über Javascript auf:

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

Markierung

Um jedem Element schnell eine Dropdown-Funktion hinzuzufügen, fügen Sie einfach hinzu, data-toggle="dropdown"und jedes gültige Bootstrap-Dropdown wird automatisch aktiviert.

<ul class = "nav nav-pillen" > 
  <li class = "active" ><a href = "#" > Normaler Link </a></li>  
  <li class = "Dropdown" id = "Menü1" >  
    <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#menu1" >   
      Dropdown-Liste
      <b class = "caret" ></b> 
    </a>
    <ul class = "Dropdown-Menü" > 
      <li><a href = "#" > Aktion </a></li> 
      <li><a href = "#" > Eine weitere Aktion </a></li> 
      <li><a href = "#" > Etwas anderes hier </a></li> 
      <li class = "Teiler" ></li> 
      <li><a href = "#" > Getrennter Link </a></li> 
    </ul>
  </li>
  ...
</ul>

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

<ul class = "nav nav-pillen" > 
  <li class = "Dropdown" > 
    <a class = "dropdown-toggle" data-toggle = "dropdown" data-target = "#" href = "path/to/page.html" >    
      Dropdown-Liste
      <b class = "caret" ></b> 
    </a>
    <ul class = "Dropdown-Menü" > 
      ...
    </ul>
  </li>
</ul>

Methoden

$().dropdown()

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

Das ScrollSpy-Plugin dient zum automatischen Aktualisieren von Navigationszielen basierend auf der Scroll-Position.

Beispiel-Navigationsleiste mit Scrollspy

Scrollen Sie im unteren Bereich und sehen Sie sich das Navigations-Update an. Die Dropdown-Unterelemente werden ebenfalls hervorgehoben. Versuch es!

Verwenden von bootstrap-scrollspy.js

Rufen Sie den Scrollspy über Javascript auf:

$ ( '#Navigationsleiste' ). scrollspy ()

Markierung

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

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

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

Veranstaltungen

Dieses Plugin fügt schnelle, dynamische Tab- und Pill-Funktionen für den Übergang durch lokale Inhalte hinzu.

Beispiel-Tabs

Klicken Sie auf die Registerkarten unten, um zwischen ausgeblendeten Fenstern umzuschalten, sogar über Dropdown-Menüs.

• Heim
• Profil
• Dropdown-Liste
  • @fat
  • @mdo

Verwenden von bootstrap-tab.js

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 Registerkarten- oder Pillennavigation 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 Bootstrap-Registerkarte 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
})

Über QuickInfos

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.

Beispiel für die Verwendung von Tooltips

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

Verwenden von bootstrap-tooltip.js

Lösen Sie den Tooltip über Javascript aus:

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

Optionen

Markierung

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

<a href = "#" rel = "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' )

Über Popover

Fügen Sie jedem Element kleine Inhaltsüberlagerungen wie auf dem iPad hinzu, um sekundäre Informationen aufzunehmen.

* Tooltip muss enthalten sein

Beispiel Hover-Popover

Bewegen Sie den Mauszeiger über die Schaltfläche, um das Popover auszulösen.

Bootstrap-popover.js verwenden

Popover über Javascript aktivieren:

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

Optionen

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.

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

.popover('ausblenden')

Blendet ein Elemente-Popover aus.

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

.popover('umschalten')

Schaltet ein Elemente-Popover um.

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

Über Benachrichtigungen

Das Alert-Plugin ist eine winzige Klasse, um Alerts eine Close-Funktionalität hinzuzufügen.

Beispielwarnungen

Das Alerts-Plug-in funktioniert mit regulären Warnmeldungen und Blockmeldungen.

Verwenden von bootstrap-alert.js

Ablehnen einer Warnung per Javascript aktivieren:

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

<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' , function () {   
  // etwas tun…
})

Um

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

Beispielanwendungen

Verwenden Sie das Schaltflächen-Plugin für Zustände und Schalter.

Verwenden von bootstrap-button.js

Schaltflächen per 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.

<!-- Fügen Sie data-toggle="button" hinzu, um das Umschalten auf einer einzelnen Schaltfläche zu aktivieren -->
<button class = "btn" data-toggle = "button" > Einzelner Schalter </button>  
 
<!-- Data-toggle="buttons-checkbox" zum Umschalten des Kontrollkästchenstils in der btn-Gruppe hinzufügen -->
<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button class = "btn" > Links </button> 
  <button class = "btn" > Mittel </button> 
  <button class = "btn" > Rechts </button> 
</div>
 
<!-- Data-toggle="buttons-radio" zum Umschalten des Radiostils auf btn-group hinzufügen -->
<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button class = "btn" > Links </button> 
  <button class = "btn" > Mittel </button> 
  <button class = "btn" > Rechts </button> 
</div>

Methoden

$().button('umschalten')

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

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

Verwenden von bootstrap-collapse.js

Per Javascript aktivieren:

$ ( ".collapse" ). zusammenbrechen ()

Optionen

Markierung

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.

<button class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >   
  einfach zusammenklappbar
</button>
 
<div id = "demo" class = "collapse in" > … </div>  

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 Collapse-Klasse von Bootstrap macht einige Ereignisse verfügbar, um sich in die Collapse-Funktionalität einzuklinken.

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

Um

Ein generisches Plugin zum Durchlaufen von Elementen. Ein Karussell.

Beispiel Karussell

Sehen Sie sich die Diashow unten an.

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.

‹ ›

Verwenden von bootstrap-carousel.js

Anruf per Javascript:

$ ( '.Karussell' ). Karussell ()

Optionen

Markierung

Datenattribute werden für die vorherigen und nächsten Kontrollen verwendet. Sehen Sie sich das Beispiel-Markup unten an.

<div id = "myCarousel" class = "Karussellrutsche" >  
  <!-- 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>

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(Nummer)

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

Um

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

Beispiel

Beginnen Sie mit der Eingabe in das Feld unten, um die Ergebnisse der Schnellvervollständigung anzuzeigen.

Verwenden von bootstrap-typeahead.js

Rufen Sie die Vervollständigung per Javascript auf:

$ ( '.tippen' ). tippen ()

Optionen

Markierung

Fügen Sie Datenattribute hinzu, um ein Element mit der Schnellvervollständigungsfunktion zu registrieren.

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

Methoden

.typeahead (Optionen)

Initialisiert eine Eingabe mit einer Schnellvervollständigung.