Überblick

Einzeln oder kompiliert

Plugins können einzeln (über Bootstraps separate *.js-Dateien) oder alle auf einmal (über bootstrap.js oder das minimierte bootstrap.min.js) eingebunden werden.

Umgang mit dem kompilierten JavaScript

Sowohl bootstrap.js als auch bootstrap.min.js enhalten alle Plugins in einer einzigen Datei. Binde immer nur eine von beiden in deine Dokumente ein.

Plugin-Abhängigkeiten

Einige Plugins und CSS-Komponenten sind von anderen Plugins abhängig. Falls du Plugins einzeln einbindest, musst du mit Hilfe der Dokumentation überprüfen, ob diese Abhängigkeiten erfüllt werden. Beachte außerdem, dass alle Plugins jQuery benötigen (das bedeutet, dass jQuery vor den Plugin-Dateien eingebunden werden muss). Lies unsere bower.json, um herauszufinden, welche Versionen von jQuery unterstützt werden.

Data-Attribute

Du kannst alle Bootstrap-Plugins vollkommen über die Markup-API verwenden, ohne eine einzige Zeile JavaScript zu schreiben. Diese erstklassige API sollte immer deine erste Wahl bei der Verwendung eines Plugins sein.

Es kann allerdings manchmal wünschenswert sein, diese Funktionalität abzuschalten. Daher bieten wir dir die Möglichkeit, die Data-Attribut-API zu deaktivieren, indem alle Ereignisse des Dokuments im Namespace data-api losgebunden werden. Das sieht dann so aus:

$(document).off('.data-api')

Alternativ kannst du ein bestimmtes Plugin anvisieren. Füge einfach den Namen des Plugins zur Namespace-Angabe hinzu, so wie hier:

$(document).off('.alert.data-api')

Nur ein Plugin pro Element über Data-Attribute

Verwende keine Data-Attribute von mehreren unterschiedlichen Plugins bei einem gleichen Element. Zum Beispiel kann ein Button nicht sowohl einen Tooltip haben und ein Modal aktivieren. Um so etwas zu bewerkstelligen, kannst du ein umschließendes Element hinzufügen.

Programmatische API

Wir denken, dass du Bootstraps Plugins auch über eine pure JavaScript-API verwenden können solltest. Alle öffentlichen APIs sind einzelne Methoden, die du aneinander reihen kannst und die die Sammlung zurückgeben, mit der sie gerade interagieren.

$('.btn.danger').button('toggle').addClass('fat')

Alle Methoden sollten ein optionales Objekt mit Optionen annehmen, ein String, der eine bestimmte Methode anvisiert oder einfach nichts (was dazu führt, dass ein Plugin mit Standard-Verhalten initiiert wird:

$('#meinModal').modal()                      // mit Standards initiieren
$('#meinModal').modal({ keyboard: false })   // ohne Tastatur initiieren
$('#meinModal').modal('show')                // initiieren und direkt 'show' aufrufen

Jedes Plugin legt seinen rohen Konstruktor in der Constructor-Eigenschaft offen: $.fn.popover.Constructor. Falls du eine bestimmte Instanz eines Plugins brauchst, ruf sie direkt von einem Element auf: $('[rel="popover"]').data('popover').

Standard-Einstellungen

Du kannst die Standard-Einstellungen für ein Plugin ändern, indem du das Objekt Constructor.DEFAULTS des Plugins bearbeitest:

$.fn.modal.Constructor.DEFAULTS.keyboard = false // setzt die Option `keyboard` des Modal-Plugins standardmäßig auf false

No conflict

Unter Umständen musst du Bootstraps Plugins Seite an Seite mit anderen UI-Frameworks verwenden. In diesen Fällen kann es manchmal dazu kommen, dass sich Namespaces überschneiden. Falls das passiert, rufe .noConflict an einem Plugin auf, um dessen Wert zurückzusetzen.

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

Ereignisse

Bootstrap stellt eigene Ereignisse für die meisten der einmaligen Plugin-Aktionen zur Verfügung. In der Regel sind diese Kombinationen aus Infinitiv und Partizip. Der Infinitiv davon (z.B. show) wird beim Start eines Ereignisses ausgelöst und die Partizip-Form (z.B. shown) wird ausgelöst wenn die Aktion abgeschlossen ist.

Seit v3.0.0 sind alle Bootstrap-Ereignisse in einem eigenen Namespace.

Alle Infinitiv-Ereignisse kommen mit preventDefault-Funktionalität. Diese ermöglicht es, die Ausführung einer Aktion zu verhindern, bevor sie anfängt.

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

Sanitizer

Tooltips und Popovers nutzen unseren eingebauten Sanitizer, um HTML-akzeptierende Optionen vor der Verarbeitung zu säubern.

Die Standardliste mit erlaubten Eingaben (whiteList) ist:

var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
var DefaultWhitelist = {
  // Global attributes allowed on any supplied element below.
  '*': ['class', 'dir', 'id', 'lang', 'role', ARIA_ATTRIBUTE_PATTERN],
  a: ['target', 'href', 'title', 'rel'],
  area: [],
  b: [],
  br: [],
  col: [],
  code: [],
  div: [],
  em: [],
  hr: [],
  h1: [],
  h2: [],
  h3: [],
  h4: [],
  h5: [],
  h6: [],
  i: [],
  img: ['src', 'alt', 'title', 'width', 'height'],
  li: [],
  ol: [],
  p: [],
  pre: [],
  s: [],
  small: [],
  span: [],
  sub: [],
  sup: [],
  strong: [],
  u: [],
  ul: []
}

Wenn du zusätzliche Einträge zur whiteList hinzufügen willst, kannst du das so machen:

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.whiteList

// Um table Elemente zu erlauben
myDefaultWhiteList.table = []

// Um td Elemente inkl. data-option Attribut zu erlauben
myDefaultWhiteList.td = ['data-option']

// Du kannst auch deine eigene Regex pushen, um Attribute zu validieren.
// Pass gut auf, dass deine Regex nicht zu lasch ist.
var myCustomRegex = /^data-my-app-[\w-]+/
myDefaultWhiteList['*'].push(myCustomRegex)

Falls du unseren Sanitizer umgehen willst, etwa weil du ein anderes Paket (z.B. DOMPurify) dafür verwenden willst, musst du so vorgehen:

$('#yourTooltip').tooltip({
  sanitizeFn: function (content) {
    return DOMPurify.sanitize(content)
  }
})

Browser ohne document.implementation.createHTMLDocument

Falls Browser wie Internet Explorer 8 document.implementation.createHTMLDocument nicht unterstützen, gibt der eingebaute Sanitizer das HTML wie eingegeben zurück.

Möchtest du auch in diesem Fall eine Säuberung der Eingabe durchführen willst, leg bitte sanitizeFn fest und nutze eine externe Bibliothek wie DOMPurify.

Versionsnummern

Die Version jedes der Bootstrap-jQuery-Plugins kann über die Eigenschaft VERSION des Plugin-Konstruktors abgerufen werden. Zum Beispiel beim Tooltip-Plugin:

$.fn.tooltip.Constructor.VERSION // => "3.4.1"

Keine besonderen Ersatzfunktionen wenn JavaScript deaktiviert ist

Bootstraps Plugins haben keine ausgesprochen elegante Reserve wenn JavaScript deaktiviert ist. Falls du dich in diesem Fall um das Benutzererlebnis sorgst, verwende <noscript>, um deinen Nutzern die Situation (und die Reaktivierung von JavaScript) zu erklären und/oder füge dein eigenes Reservesystem hinzu.

Drittanbieter-Bibliotheken

Bootstrap unterstützt offiziell keine dritten JavaScript-Bibliotheken wie Prototype oder jQuery UI. Trotz .noConflict und Ereignissen mit Namespace kann es zu Kompatibilitätsproblemen kommen, die du alleine beheben musst.

Übergänge transition.js

Über Übergänge

Für einfache Übergangseffekte kannst du transition.js verwenden. Falls du die kompilierten oder minimierten bootstrap.js-Dateien nutzt, ist diese Datei schon dabei und du musst sie nicht noch einmal einbinden.

Was drin ist

Transition.js ist ein einfacher Helfer für transitionEnd-Ereignisse sowie ein Emulator für CSS-Übergänge. Es wird von den anderen Plugins verwendet, um zu testen, ob CSS-Übergänge verfügbar sind und aufgehängte Übergänge aufzufangen.

Übergänge deaktivieren

Übergangseffekte können mit dem folgenden JavaScript-Code global deaktiviert werden. Der Code muss so platziert werden, dass transition.js (oder bootstrap.js bzw. bootstrap.min.js, je nachdem) zuerst geladen wird.

$.support.transition = false

Modals modal.js

Modals sind schlanke aber flexible Dialog-Fenster mit den minimalen benötigten Funktionen und sinnvollen Standards.

Mehrere geöffnete Modals werden nicht unterstützt

Denk daran, ein Modal niemals zu öffnen, wenn noch ein anderes sichtbar ist. Du musst eigenen Code schreiben, wenn du mehr als ein Modal auf einmal anzeigen möchtest.

Modal-Markup-Platzierung

Damit andere Komponenten das Aussehen und/oder die Funktionen deines Modals nicht beeinträchtigen, solltest du den zugehörigen HTML-Code möglichst weit oben in deinem Dokument platzieren.

Schwierigkeiten auf mobilen Geräten

Es gibt einige Tücken, die du bei der Verwendung von Modals auf mobilen Geräten beachten solltest. Lies unsere Browser-Support-Infos für Details.

Das HTML-Attribut autofocus hat aufgrund von internen Funktionsweisen in HTML5 keinen Effekt in Bootstrap-Modals. Nutze eigenes JavaScript, um einen ähnlichen Effekt zu erlangen:

$('#meinModal').on('shown.bs.modal', function () {
  $('#meinEingabefeld').focus()
})

Beispiele

Statisches Beispiel

Ein manuell generiertes Modal mit Header, Body und einigen Aktionen im Footer.

<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Schließen"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal-Titel</h4>
      </div>
      <div class="modal-body">
        <p>Was für ein Körper&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Schließen</button>
        <button type="button" class="btn btn-primary">Änderungen speichern</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Live-Ansicht

Blende ein Modal mit JavaScript oder über den Button unten ein und aus. Es wird von der oberen Kante der Seite heruntergleiten und mit Einblendeffekt sichtbar werden.

<!-- Button, der das Modal aufruft -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#meinModal">
  Modal-Beispiel anzeigen
</button>

<!-- Modal -->
<div class="modal fade" id="meinModal" tabindex="-1" role="dialog" aria-labelledby="meinModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Schließen"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="meinModalLabel">Modal-Überschrift</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Schließen</button>
        <button type="button" class="btn btn-primary">Änderungen speichern</button>
      </div>
    </div>
  </div>
</div>

Modals barrierefrei machen

Füge unbedingt die Attribute role="dialog" und aria-labelledby="..." mit Bezug auf den Modal-Titel zum .modal und role="document" zum .modal-dialog selbst hinzu.

Außerdem kannst du eine Beschreibung des Modals mit aria-describedby am .modal markieren.

YouTube-Videos einbetten

Zur Einbettung von YouTube-Videos in Modals wird zusätzliches JavaScript benötigt, das nicht in Bootstrap enthalten ist, um die Wiedergabe automatisch zu beenden und mehr. Lies diesen hilfreichen Artikel auf StackOverflow für mehr Informationen.

Größen

Modals verfügen über zwei optionale Größen, die über Veränderungsklassen für .modal-dialog deklariert werden können.

<!-- Großes Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Großes Modal</button>

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="meinGroßesModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Kleines Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Kleines Modal</button>

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="meinKleinesModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

Animation entfernen

Entferne die Klasse .fade von deinem Modal-Markup, wenn du lieber möchtest, dass das Modal einfach erscheint und nicht von oben eingeflogen wird.

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="...">
  ...
</div>

Raster-System verwenden

Um die Vorteile von Bootstraps Raster-System in einem Modal zu nutzen, füge einfach .rows innerhalb von .modal-body hinzu und verwende dann das normale Raster-System.

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="rasterSystemModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Schließen"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="rasterSystemModalLabel">Modal-Titel</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-4">.col-md-4</div>
          <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
          <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
        </div>
        <div class="row">
          <div class="col-sm-9">
            Ebene 1: .col-sm-9
            <div class="row">
              <div class="col-xs-8 col-sm-6">
                Ebene 2: .col-xs-8 .col-sm-6
              </div>
              <div class="col-xs-4 col-sm-6">
                Ebene 2: .col-xs-4 .col-sm-6
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Schließen</button>
        <button type="button" class="btn btn-primary">Änderungen speichern</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Du hast eine Reihe von Buttons, die alle das gleiche Modal auslösen, nur mit etwas anderen Inhalten? Verwende event.relatedTarget und HTML data-*-Attribute (möglicherweise via jQuery), um den Inhalt des Modals abhängig davon, welcher Button geklickt wurde, zu ändern. Siehe die Dokumentation für Modal-Ereignisse für mehr Details zu relatedTarget.

...mehr Buttons...
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#beispielModal" data-whatever="@mdo">Modal für @mdo öffnen</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#beispielModal" data-whatever="@fat">Modal für @fat öffnen</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#beispielModal" data-whatever="@getbootstrap">Modal für @getbootstrap öffnen</button>
...mehr Buttons...

<div class="modal fade" id="beispielModal" tabindex="-1" role="dialog" aria-labelledby="beispielModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Schließen"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="beispielModalLabel">Neue Nachricht</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="empfaenger-name" class="control-label">Empfänger:</label>
            <input type="text" class="form-control" id="empfaenger-name">
          </div>
          <div class="form-group">
            <label for="nachricht-text" class="control-label">Nachricht:</label>
            <textarea class="form-control" id="nachricht-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Schließen</button>
        <button type="button" class="btn btn-primary">Nachricht senden</button>
      </div>
    </div>
  </div>
</div>
$('#beispielModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button, der das Modal ausgelöst hat
  var recipient = button.data('whatever') // Infos aus data-*-Attributen extrahieren
  // Falls notwendig, könntest du an dieser Stelle eine AJAX-Anfrage initiieren (und dann die Aktualisierung in einem Callback erledigen).
  // Modal-Inhalt aktualisieren. Wir verwenden an dieser Stelle jQuery here, aber du könntest auch eine Data-Binding-Bibliothek oder andere Methoden verwenden.
  var modal = $(this)
  modal.find('.modal-title').text('Neue Nachricht an ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

Verwendung

Das Modal-Plugin blendet über Data-Attribute oder JavaScript verborgenen Inhalt bei Bedarf ein und wieder aus. Es fügt außerdem die Klasse .modal-open zum <body>hinzu, um standardmäßiges Scroll-Verhalten zu überschreiben und generiert ein .modal-backdrop-Element, damit Modals durch einen Klick außerhalb des Modals geschlossen werden können.

Über Data-Attribute

Aktiviere ein Modal ohne JavaScript zu schreiben. Statte ein kontrollierendes Element wie einen Button mit data-toggle="modal" aus, zusammen mit data-target="#abc" oder href="#abc", um zu definieren, welches Modal genau geladen werden soll.

<button type="button" data-toggle="modal" data-target="#meinModal">Modal anzeigen</button>

Über JavaScript

Rufe ein Modal über seine ID meinModal mit nur einer Zeile JavaScript auf:

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

Optionen

Optionen können über Data-Attribute oder JavaScript angegeben werden. Für Data-Attribute hängst du den Namen der Option einfach an data-, z.B. data-backdrop="".

Name Typ Standard Beschreibung
backdrop Boolean oder den String 'static' true Fügt eine Hintergrundklickfläche zum Modal hinzu. Alternativ kannst du mit static zwar den Hintergrund abdunkeln aber das Schließen durch Klicken darauf verhindern.
keyboard Boolean true Schließen des Modals über Drücken von ESC ermöglichen
show Boolean true Zeigt das Modal an, sobald es initialisiert wird.
remote Pfad false

Diese Option ist ab v3.3.0 als veraltet markiert und wurde in v4 entfernt. Wir empfehlen stattdessen, mit Client-seitigen Vorlagen oder einem Framework zum Einbinden von Daten zu arbeiten oder jQuery.load selbst aufzurufen.

Falls eine Remote-URL angegeben wird, wird über jQuerys load-Methode Inhalt von dort einmal geladen und in den div-Container .modal-content injiziert. Falls du die Data-API verwendest, kannst du auch das Attribut href nutzen, um die Remote-Quelle anzugeben. Hier ein Beispiel:

<a data-toggle="modal" href="remote.html" data-target="#modal">Klick mich an</a>

Methoden

.modal(Optionen)

Aktiviert deinen Inhalt als ein Modal. Akzeptiert ein optionales object mit Optionen.

$('#meinModal').modal({
  keyboard: false
})

.modal('toggle')

Schaltet ein Modal manuell um. Gibt ein Ergebnis zurück, bevor das Modal tatsächlich angezeigt/verborgen wurde (also vor den Ereignissen shown.bs.modal oder hidden.bs.modal).

$('#meinModal').modal('toggle')

.modal('show')

Öffnet ein Modal manuell. Gibt ein Ergebnis zurück, bevor das Modal tatsächlich angezeigt wurde (also vor dem Ereignis shown.bs.modal).

$('#meinModal').modal('show')

.modal('hide')

Verbirgt ein Modal manuell. Gibt ein Ergebnis zurück, bevor das Modal tatsächlich verborgen wurde (also vor dem Ereignis hidden.bs.modal).

$('#meinModal').modal('hide')

.modal('handleUpdate')

Passt die Positionierung des Modals für den Fall an, dass eine Scrollleiste erscheinen könnte, was zu einem Sprung des Modals nach links führen würde.

Wird nur gebraucht, wenn sich die Höhe des Modals ändert, während es geöffnet ist.

$('#meinModal').modal('handleUpdate')

Ereignisse

Bootstraps Modal-Klasse legt einige wenige Ereignisse offen, um sich in Modal-Funktionalität einzuklinken.

Alle Modal-Ereignisse werden beim Modal selbst ausgelöst (also beim <div class="modal">).

Ereignistyp Beschreibung
show.bs.modal Dieses Ereignis wird sofort ausgelöst, wenn die Methode show aufgerufen wird. Bei Auslösung durch Klick ist das angeklickte Element über die Eigenschaft relatedTarget des Ereignisses verfügbar.
shown.bs.modal Dieses Ereignis wird ausgelöst, wenn das Modal dem Nutzer vollständig angezeigt wurde (wartet auf CSS-Übergänge). Bei Auslösung durch Klick ist das angeklickte Element über die Eigenschaft relatedTarget des Ereignisses verfügbar.
hide.bs.modal Dieses Ereignis wird sofort ausgelöst, wenn die Methode hide aufgerufen wird.
hidden.bs.modal Dieses Ereignis wird ausgelöst, wenn das Modal vor dem Nutzer vollständig verborgen wurde (wartet auf CSS-Übergänge).
loaded.bs.modal Dieses Ereignis wird ausgelöst, wenn das Modal den Inhalt der Remote-Option geladen hat.
$('#meinModal').on('hidden.bs.modal', function (e) {
  // etwas ausführen...
})

Dropdown-Menüs dropdown.js

Füge Dropdown-Menüs zu fast allem, z.B. Navbars, Tabs oder Pills-Navs, mit diesem einfachen Plugin hinzu.

In einer Navbar

In Pills-Navs

Das Dropdown-Plugin, kontrolliert über Data-Attribute oder JavaScript, zeigt verborgenen Inhalt (Dropdown-Menüs) an, indem es die Klasse .open beim übergeordneten Listen-Element hinzufügt.

Auf mobilen Geräten wird beim Öffnen eines Dropdown-Menüs eine Hintergrundfläche (.dropdown-backdrop) hinzugefügt, um das Menü durch Tippen irgendwo außerhalb zu schließen. Dies ist für iOS notwendig und bedeutet, dass zum Wechseln von einem Menü zu einem anderen auf mobilen Geräten ein zusätzliches Tippen erforderlich ist.

Hinweis: Das Attribut data-toggle=dropdown wird auf der Anwendungsebene gebraucht, um die Dropdown-Menüs zu schließen, deshalb ist es immer eine gute Idee, es zu verwenden.

Über Data-Attribute

Füge data-toggle="dropdown" zu einem Link oder Button hinzu, um ein Dropdown-Menü zu kontrollieren.

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown-Auslöser
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

Um URLs mit Link-Buttons nicht zu beeinträchtigen, kannst du das Attribut data-target statt href="#" verwenden.

<div class="dropdown">
  <a id="dLabel" data-target="#" href="http://example.com" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
    Dropdown-Auslöser
    <span class="caret"></span>
  </a>

  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

Über JavaScript

Ruf Dropdowns über JavaScript auf:

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

data-toggle="dropdown" weiterhin notwendig

Unabhängig davon, ob du dein Dropdown-Menü über JavaScript oder die Data-API aufrufst, musst du das auslösende Element (den Schalter) immer mit data-toggle="dropdown" kennzeichnen.

Keine

$().dropdown('toggle')

Blendet das Dropdown-Menü einer angegebenen Navbar oder Tabs-Navigation ein/aus.

Alle Dropdown-Ereignisse haben eine Eigenschaft relatedTarget, deren Wert das auslösende Anchor-Element ist.

Ereignistyp Beschreibung
show.bs.dropdown Dieses Ereignis wird sofort ausgelöst, wenn die Methode show aufgerufen wird.
shown.bs.dropdown Dieses Ereignis wird ausgelöst, wenn das Dropdown-Menü dem Nutzer vollständig angezeigt wurde (wartet auf CSS-Übergänge)..
hide.bs.dropdown Dieses Ereignis wird ausgelöst, wenn die Methode hide aufgerufen wird.
hidden.bs.dropdown Dieses Ereignis wird ausgelöst, wenn das Dropdown-Menü vor dem Nutzer vollständig verborgen wurde (wartet auf CSS-Übergänge).
$('#meinDropdown').on('show.bs.dropdown', function () {
  // etwas ausführen...
})

ScrollSpy scrollspy.js

Beispiel in einer Navbar

Dass ScrollSpy-Plugin ist dazu da, in Navigationselementen automatisch anzuzeigen, wo sich die aktuelle Scroll-Position befindet. Scrolle durch das Beispiel unten und sieh dir an, wie die .active-Klasse nach und nach anderen Einträgen zugeordnet wird. Die Einträge im Dropdown-Menü werden ebenfalls hervorgehoben.

@fat

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.

@mdo

Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.

eins

Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack 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.

drei

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 messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.

Verwendung

Bootstrap-Nav erforderlich

ScrollSpy erfordert zurzeit die Verwendung einer Bootstrap-Nav-Komponente für die richtige Hervorhebung von aktiven Links.

ID-Ziele müssen zuzuordnen sein

Die Links in der navbar müssen einer ID zuzuordnen sein. Zum Beispiel muss <a href="#start">Start</a> mit einem Element im DOM wie <div id="start"></div> korrespondieren.

Zielelemente, die nicht :visible sind, werden ignoriert

Zielelemente, die laut jQuery nicht :visible (sichtbar) sind, werden ignoriert und die zugehörigen Nav-Einträge werden niemals hervorgehoben.

Relative Positionierung notwendig

Unabhängig von der Umsetzung, erfordert ScrollSpy position: relative; beim Element, das beobachtet wird. In den meisten Fällen ist das der <body>. Wenn Scrollspy an Elementen außer dem <body> verwendet wird, solltest du sichergehen, dass eine height und overflow-y: scroll; gesetzt sind.

Über Data-Attribute

Um zu deiner Hauptnavigation ganz leicht ScrollSpy-Funktionen hinzuzufügen, füge data-spy="scroll" zu dem Element hinzu, bei dem du die Scroll-Position beobachten willst (üblicherweise der <body>). Dann fügst du das Attribut data-target mit einer ID oder Klasse des übergeordneten Elements einer Bootstrap-.nav-Komponente hinzu.

body {
  position: relative;
}
<body data-spy="scroll" data-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

Über JavaScript

Ruf den Scroll-Beobachter über JavaScript auf, nachdem du position: relative; in deinem CSS hinzugefügt hast:

$('body').scrollspy({ target: '#navbar-example' })

Methoden

.scrollspy('refresh')

Wenn du ScrollSpy auf Seiten verwendest, auf denen Elemente (aus) dem DOM hinzugefügt oder entfernt werden, musst du die Methode zur Aktualisierung so aufrufen:

$('[data-spy="scroll"]').each(function () {
  var $spy = $(this).scrollspy('refresh')
})

Optionen

Optionen können über Data-Attribute oder JavaScript angegeben werden. Für Data-Attribute hängst du den Namen einer Option einfach an data-, also z.B. data-offset="".

Name Typ Standard Beschreibung
offset Nummer 10 Pixel, die von oben bei der Berechnung der Scroll-Position abgezogen werden sollen.

Ereignisse

Ereignistyp Beschreibung
activate.bs.scrollspy Dieses Ereignis wird ausgelöst, wenn ein neues Objekt vom ScrollSpy aktiviert wird.
$('#meinScrollspy').on('activate.bs.scrollspy', function () {
  // etwas ausführen...
})

Interaktive Tabs tab.js

Beispiel-Tabs

Füge schnelle, dynamische Tab-Funktionalität hinzu, um zwischen verschiedenen Blöcken von Inhalt zu wechseln, auch über Dropdown-Menüs. Verschachtelte Tabs werden nicht unterstützt.

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher 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.

Erweitert die Tab-Navs

Dieses Plugin erweitert die Komponente Tab-Navs, um tatsächliches Tabverhalten hinzuzufügen.

Verwendung

Aktiviere anklickbare Tabs über JavaScript (jeder Tab muss einzeln aktiviert werden):

$('#meineTabs a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})

Du kannst einzelne Tabs auf verschiedene Weise aktivieren:

$('#meineTabs a[href="#profile"]').tab('show') // Einen Tab über seinen Namen auswählen
$('#meineTabs a:first').tab('show') // Ersten Tab auswählen
$('#meineTabs a:last').tab('show') // Letzten Tab auswählen
$('#meineTabs li:eq(2) a').tab('show') // Dritten Tab auswählen (Nummern starten bei 0)

Markup

Du kannst Tab- oder Pills-Navs aktivieren, ohne JavaScript zu schreiben, indem du einfach data-toggle="tab" oder data-toggle="pill" bei einem Element hinzufügst. Durch Hinzufügen der Klassen nav und nav-tabs zur Tab-ul wird Bootstrap Tab-Stile anwenden, während nav und nav-pills für Pills-Stile sorgen.

<div>

  <!-- Tabs-Navs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#start" role="tab" data-toggle="tab">Start</a></li>
    <li role="presentation"><a href="#profil" role="tab" data-toggle="tab">Profil</a></li>
    <li role="presentation"><a href="#nachrichten" role="tab" data-toggle="tab">Nachrichten</a></li>
    <li role="presentation"><a href="#einstellungen" role="tab" data-toggle="tab">Einstellungen</a></li>
  </ul>

  <!-- Tab-Inhalte -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="start">...</div>
    <div role="tabpanel" class="tab-pane" id="profil">...</div>
    <div role="tabpanel" class="tab-pane" id="nachrichten">...</div>
    <div role="tabpanel" class="tab-pane" id="einstellungen">...</div>
  </div>

/div>

Einblendeffekte

Um Tabs mit einem Effekt beim Einblenden zu versehen, füge .fade zu jedem .tab-pane hinzu. Die erste Tab-Inhaltsfläche muss auch mit der Klasse .in versehen werden, damit der erste Inhalt sichtbar ist.

<div class="tab-content">
  <div role="tabpanel" class="tab-pane fade in active" id="start">...</div>
  <div role="tabpanel" class="tab-pane fade" id="profil">...</div>
  <div role="tabpanel" class="tab-pane fade" id="nachrichten">...</div>
  <div role="tabpanel" class="tab-pane fade" id="einstellungen">...</div>
</div>

Methoden

$().tab

Aktiviert ein Tab-Element und seinen Inhalts-Container. Der Tab sollte entweder ein data-target- oder ein href-Attribut haben, um den richtigen Container im DOM anzuvisieren. In den Beispielen oben sind die Tabs die <a>s mit dem Attribut data-toggle="tab".

.tab('show')

Wählt den angegebenen Tab aus und zeigt den damit verbundenen Inhalt an. Wenn vorher ein anderer Tab ausgewählt war, wird dieser deselektiert und der mit diesem Tab verbundene Inhalt wird verborgen. Die Funktion gibt schon an ihren Aufruf zurück bevor der Tab-Inhalt tatsächlich angezeigt wurde (also bevor das Ereignis shown.bs.tab stattfindet).

$('#einTab').tab('show')

Ereignisse

Wenn ein neuer Tab angezeigt wird, werden in der folgenden Reihenfolge Ereignisse ausgelöst:

  1. hide.bs.tab (beim zurzeit aktiven Tab)
  2. show.bs.tab (beim gleich eingeblendeten Tab)
  3. hidden.bs.tab (beim bisher aktiven Tab, dem von hide.bs.tab)
  4. shown.bs.tab (beim jetzt eingeblendeten Tab, dem von show.bs.tab)

Falls zuvor kein Tab aktiv ist, werden die Ereignisse hide.bs.tab und hidden.bs.tab nicht ausgelöst.

Ereignistyp Beschreibung
show.bs.tab Dieses Ereignis wird ausgelöst, wenn die Methode show aufgerufen wird, aber bevor der Tab wirklich vollständig angezeigt wurde. Verwende event.target und event.relatedTarget, um den aktiven Tab und den zuvor aktiven Tab (falls verfügbar) herauszufinden.
shown.bs.tab Dieses Ereignis wird ausgelöst, sobald ein Tab vollständig eingeblendet wurde. Verwende event.target und event.relatedTarget, um den aktiven Tab und den zuvor aktiven Tab (falls verfügbar) herauszufinden.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // neuerdings aktivierter Tab
  e.relatedTarget // bisher aktiver Tab
})

Tooltips tooltip.js

Inspiriert vom hevorragenden Plugin jQuery.tipsy von Jason Frame, bieten Tooltips eine aktualisierte Version, die nicht auf Bildern basiert, CSS3 für Animationen verwendet und Data-Attribute für die Speicherung von Inhalt nutzt.

Tooltips, deren Titel null Charaktere lang ist, werden niemals angezeigt.

Beispiele

Bewege den Mauszeiger über (hover) die Links unten, um Tooltips zu sehen:

Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

Statischer Tooltip

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

Vier Richtungen

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip links">Tooltip links</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip oben">Tooltip oben</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip unten">Tooltip unten</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip rechts">Tooltip rechts</button>

Opt-in-Funktionalität

Aus Gründen der Performance musst du die Data-APIs von Tooltips und Popovers manuell initialisieren bevor du sie verwenden kannst.

Ein Weg, alle Tooltips auf einer Seite zu initialisieren, wäre, sie über ihr Attribut data-toggle auszuwählen:

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

Verwendung

Das Tooltip-Plugin generiert Inhalt und Markup bei Bedarf und platziert diese standardmäßig hinter dem Element, das einen Tooltip auslöst.

Löse den Tooltip über JavaScript aus:

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

Markup

Das benötigte Markup für einen Tooltip ist nur ein data-Attribut und ein title auf dem HTML-Element, das mit einem Tooltip versehen werden soll. Das generierte Markup eines Tooltips ist ziemlich einfach; es braucht allerdings eine Position (standardmäßig vom Plugin auf top gesetzt).

<!-- HTML -->
<a href="#" data-toggle="tooltip" title="Ein bisschen Tooltip-Text!">Mauszeiger hier drüber</a>

<!-- Generiertes Markup -->
<div class="tooltip top" role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Ein bisschen Tooltip-Text!
  </div>
</div>

Mehrzeilige Links

Manchmal willst du einen Tooltip vielleicht zu einem Hyperlink hinzufügen, der über mehrere Zeilen geht. Das Standard-Verhalten in diesem Fall ist, dass der Tooltip horizontal und vertikal zentriert wird. Füge zu deinen Links white-space: nowrap; hinzu, um das zu vermeiden.

Tooltips & Popovers in Button-Gruppen und Input-Gruppen benötigen besondere Einstellung

Wenn du Tooltips oder Popovers an Elementen in einer .btn-group, .input-group oder innerhalb einer Tabelle (<td>, <th>, <tr>, <thead>, <tbody>, <tfoot>) verwendest, musst du die Option container: 'body' festlegen, um unerwünschte Nebeneffekte zu vermeiden (das Element könnte z.B. breiter werden und/oder seine abgerundeten Ecken verlieren, wenn der Tooltip oder das Popover ausgelöst wird).

Versuche nicht, Tooltips an verborgenen Elementen anzuzeigen

Wenn das Zielelement display: none; ist und du trotzdem versuchst, $(...).tooltip('show') aufzurufen, wird der Tooltip falsch positioniert.

Barrierefreie Tooltips für Nutzer von assistiven Technologien und Tastaturen

Für Nutzer, die mit einer Tastatur navigieren und insbesondere für Nutzer von assistiven Technologien, solltest du Tooltips nur zu Elementen hinzufügen, die mit einer Tastatur fokussiert werden können, z.B. Links, Formfelder, oder irgendein Element mit dem Attribut tabindex="0".

Tooltips an deaktivierten Elementen benötigen ein umschließendes Element

Um einen Tooltip zu einem deaktivierten Element mit disabled oder .disabled hinzuzufügen, musst du das Element in einem <div> platzieren und den Tooltip stattdessen darauf anwenden.

Optionen

Optionen können über Data-Attribute oder JavaScript angegeben werden. Für Data-Attribute hängst du den Namen der Option einfach an data-, z.B. data-animation="".

Aus Sicherheitsgründen können die Optionen sanitize, sanitizeFn und whiteList nicht als Data-Attribute übergeben werden.

Name type Standard Beschreibung
animation Boolean true Versieht den Tooltip mit einem CSS-Übergang beim Ein-/Ausblenden
container String | false false

Ordnet den Tooltip einem bestimmten Element unter. Beispiel: container: 'body'. Dies erlaubt es dir, das Popover im Flow des Dokuments in der Nähe des auslösenden Elements zu positionieren, was es daran hindert, bei einer Änderung der Fenstergröße davon wegzudriften.

delay Nummer | Objekt 0

Verzögere das Anzeigen und Verbergen eines Tooltips in ms - wirkt sich nicht auf den manuellen Auslöser aus

Falls eine Nummer angegeben wird, wird die Verzögerung auf hide und show angewendet

Object-Struktur: delay: { "show": 500, "hide": 100 }

html Boolean false Falls du HTML im Tooltip einfügen willst. Beim Standard, false, wird jQuerys text-Methode verwendet, um den Inhalt ins DOM einzufügen. Verwende text, falls du dich wegen XSS-Angriffen sorgst.
placement String | Funktion 'top'

Wie der Tooltip positioniert werden soll - top | bottom | left | right | auto.
Wenn "auto" angegeben wird, wird der Tooltip dynamisch umorientiert. Zum Beispiel wird bei "auto left" der Tooltip nach Möglichkeit links positioniert, aber sonst nach rechts verlegt.

Wenn eine Funktion verwendet wird, um die Positionierung zu bestimmen, wird diese mit dem Tooltip-DOM-Knoten als ihr erstes und dem auslösenden DOM-Element als ihr zweites Argument aufgerufen. Der this-Kontext wird auf die Tooltip-Instanz gesetzt.

selector String false Falls ein Selektor angegeben wird, werden Tooltip-Objekte an die angegebenen Ziele gebunden. In der Praxis wird dies verwendet, um Tooltips zu dynamischem HTML-Inhalt hinzufügen zu können (Support für jQuery.on). Siehe hier und ein informatives Beispiel.
template string '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

Grundlegendes HTML für die Erstellung des Tooltips.

Der title des Tooltips wird in .tooltip-inner injiziert.

.tooltip-arrow wird der Pfeil des Tooltips.

Das äußerste umschließende Element sollte die Klasse .tooltip haben.

title String | Funktion ''

Standard-Titel-Wert, falls kein title-Attribut vorhanden ist

Falls eine Funktion angegeben wird, wird diese mit ihrer this-Referenz gesetzt auf das Element, an das der Tooltip angebunden ist, aufgerufen.

trigger String 'hover focus' Wie der Tooltip ausgelöst wird - click | hover | focus | manual. Du kannst mehrere Auslöser angeben; trenne sie mit einem Leerzeichen. manual kann nicht mit anderen Auslösern kombiniert werden.
viewport String | Objekt | Funktion { selector: 'body', padding: 0 }

Behält den Tooltip innerhalb der Grenzen dieses Elements. Beispiel: viewport: '#viewport' oder { "selector": "#viewport", "padding": 0 }

Wenn eine Funktion angegeben wird, wird diese mit dem auslösenden DOM Node als einziges Argument aufgerufen. Der this-Kontext wird auf die Tooltip-Instanz gesetzt.

sanitize Boolean true Sanitizer (de-)aktivieren. Falls dieser aktiviert ist, werden die Optionen 'template', 'content' und 'title' gesäubert.
whiteList Object Standardliste Objekt mit erlaubten Elementen und Attributen
sanitizeFn null | function null Hier kannst du deine eigene Funktion statt des eingebauten Sanitizers einbinden. Das kann nützlich sein, wenn du eine andere Bibliothek für die Säuberung von Eingaben verwenden willst.

Data-Attribute für einzelne Tooltips

Optionen für individuelle Tooltips kannst du alternativ über Data-Attribute, wie oben erklärt, angeben.

Methoden

$().tooltip(Optionen)

Aktiviert Tooltip-Funktionen bei einer Reihe von Elementen.

.tooltip('show')

Öffnet den Tooltip eines Elements. Gibt das Ergebnis an den Aufruf zurück, bevor der Tooltip tatsächlich angezeigt wurde (also bevor das Ereignis shown.bs.tooltip passiert). Dies wird als "manuelles" Auslösen des Tooltips betrachtet. Tooltips, deren Titel keine Zeichen enthalten, werden niemals angezeigt.

$('#element').tooltip('show')

.tooltip('hide')

Verbirgt den Tooltip eines Elements. Gibt das Ergebnis an den Aufruf zurück, bevor der Tooltip tatsächlich verborgen wurde (also bevor das Ereignis hidden.bs.tooltip passiert). Dies wird als "manuelles" Auslösen des Tooltips betrachtet.

$('#element').tooltip('hide')

.tooltip('toggle')

Schaltet die Sichtbarkeit des Tooltips eines Elements um. Gibt das Ergebnis an den Aufruf zurück, bevor der Tooltip tatsächlich ein-/ausgeblendet wurde (also bevor das Ereignis shown.bs.tooltip oder hidden.bs.tooltip passiert). Dies wird als "manuelles" Auslösen des Tooltips betrachtet.

$('#element').tooltip('toggle')

.tooltip('destroy')

Verbirgt und zerstört den Tooltip eines Elements. Tooltips, die Delegierung verwenden (die mit der selector-Option erstellt werden), können nicht einzeln über untergeordnete Auslöser-Elemente zerstört werden.

$('#element').tooltip('destroy')

Ereignisse

Ereignistyp Beschreibung
show.bs.tooltip Dieses Ereignis wird ausgelöst, wenn die Methode show aufgerufen wird.
shown.bs.tooltip Dieses Ereignis wird ausgelöst, wenn der Tooltip dem Nutzer vollständig angezeigt wurde (wartet auf CSS-Übergänge).
hide.bs.tooltip Dieses Ereignis wird ausgelöst, wenn die Methode hide aufgerufen wird.
hidden.bs.tooltip Dieses Ereignis wird ausgelöst, wenn der Tooltip vor dem Nutzer vollständig verborgen wurde (wartet auf CSS-Übergänge).
inserted.bs.tooltip Dieses Ereignis wird nach dem Ereignis show.bs.tooltip ausgelöst, wenn das Tooltip-Template zum DOM hinzugefügt wurde.
$('#meinTooltip').on('hidden.bs.tooltip', function () {
  // etwas aufrufen...
})

Popovers popover.js

Füge kleine Inhaltsüberlagerungen wie die auf dem iPad zu irgendeinem Element hinzu, um zusätzliche Informationen anzuzeigen.

Popovers, deren Titel und Inhalt beide null Charaktere lang sind, werden niemals angezeigt.

Plugin-Abhängigkeit

Popovers sind eine Erweiterung des Tooltip-Plugins, das daher in deiner Version von Bootstrap vorhanden sein muss.

Opt-in-Funktionalität

Aus Gründen der Performance musst du die Data-APIs von Tooltips und Popovers manuell initialisieren bevor du sie verwenden kannst.

Ein Weg, alle Popovers auf einer Seite zu initialisieren, wäre, sie über ihr Attribut data-toggle auszuwählen:

$(function () {
  $('[data-toggle="popover"]').popover()
})

Tooltips & Popovers in Button-Gruppen und Input-Gruppen benötigen besondere Einstellung

Wenn du Tooltips oder Popovers an Elementen in einer .btn-group, .input-group oder innerhalb einer Tabelle (<td>, <th>, <tr>, <thead>, <tbody>, <tfoot>) verwendest, musst du die Option container: 'body' festlegen, um unerwünschte Nebeneffekte zu vermeiden (das Element könnte z.B. breiter werden und/oder seine abgerundeten Ecken verlieren, wenn der Tooltip oder das Popover ausgelöst wird).

Versuche nicht, Popovers an verborgenen Elementen anzuzeigen

Wenn das Zielelement display: none; ist und du trotzdem versuchst, $(...).popover('show') aufzurufen, wird das Popover falsch positioniert.

Popovers an deaktivierten Elementen benötigen ein umschließendes Element

Um ein Popover zu einem deaktivierten Element mit disabled oder .disabled hinzuzufügen, musst du das Element in einem <div> platzieren und das Popover stattdessen darauf anwenden.

Links über mehrere Zeilen

Manchmal willst du ein Popover zu einem Hyperlink hinzufügen, der über mehrere Zeilen geht. Das Standard-Verhalten des Popover-Plugins in diesem Fall ist, es horizontal und vertikal zu zentrieren. Füge white-space: nowrap; zu deinen Links hinzu, um dies zu vermeiden.

Beispiele

Statisches Popover

Es gibt vier Optionen: Ausrichtung nach oben, rechts, unten und links.

Popover oben

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

Popover rechts

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 links

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

Live-Ansicht

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover-Titel" data-content="Und ein bisschen Inhalt. Ganz schön faszinierend, oder?">Popover anzeigen</button>

Vier Richtungen

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover rechts
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover oben
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover unten
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover links
</button>

Beim nächsten Klick schließen

Verwende den Auslöser focus, um Popovers beim nächsten Klick des Nutzers zu schließen.

Spezifisches Markup für Schließen-beim-nächsten-Klick benötigt

Für vernünftiges Verhalten in allen Browsern und auf allen Plattformen musst du das Tag <a>, nicht <button>, verwenden und außerdem die Attribute role="button" und tabindex hinzufügen.

<a tabindex="0" class="btn btn-lg btn-danger bs-docs-popover" role="button" data-toggle="popover" data-trigger="focus" title="Schließbares Popover" data-content="Und ein bisschen Inhalt. Ganz schön faszinierend, oder?">Schließbares Popover</a>

Verwendung

Aktiviere Popovers über JavaScript:

$('#beispiel').popover(options)

Optionen

Optionen können über Data-Attribute oder JavaScript angegeben werden. Für Data-Attribute hängst du den Namen der Option einfach an data-, z.B. data-animation="".

Aus Sicherheitsgründen können die Optionen sanitize, sanitizeFn und whiteList nicht als Data-Attribute übergeben werden.

Name Typ Standard Beschreibung
animation Boolean true Versieht das Popover mit einem CSS-Übergang beim Ein-/Ausblenden
container String | false false

Ordnet das Popover einem bestimmten Element unter. Beispiel: container: 'body'. Dies erlaubt es dir, das Popover im Flow des Dokuments in der Nähe des auslösenden Elements zu positionieren, was es daran hindert, bei einer Änderung der Fenstergröße davon wegzudriften.

content String | Funktion ''

Standard-Inhalt, falls kein data-content-Attribut vorhanden ist.

Falls eine Funktion angegeben wird, wird diese mit ihrer this-Referenz gesetzt auf das Element, an das das Popover angebunden ist, aufgerufen.

delay Nummer | Objekt 0

Verzögere das Anzeigen und Verbergen eines Popovers in ms - wirkt sich nicht auf den manuellen Auslöser aus

Falls eine Nummer angegeben wird, wird die Verzögerung auf hide und show angewendet

Object-Struktur: delay: { "show": 500, "hide": 100 }

html Boolean false Falls du HTML im Popover einfügen willst. Beim Standard, false, wird jQuerys text-Methode verwendet, um den Inhalt ins DOM einzufügen. Verwende text, falls du dich wegen XSS-Angriffen sorgst.
placement String | Funktion 'top'

Wie das Popover positioniert werden soll - top | bottom | left | right | auto.
Wenn "auto" angegeben wird, wird das Popover dynamisch umorientiert. Zum Beispiel wird bei "auto left" das Popover nach Möglichkeit links positioniert, aber sonst nach rechts verlegt.

Wenn eine Funktion verwendet wird, um die Positionierung zu bestimmen, wird diese mit dem Popover-DOM-Knoten als ihr erstes und dem auslösenden DOM-Element als ihr zweites Argument aufgerufen. Der this-Kontext wird auf die Popover-Instanz gesetzt.

selector String false Falls ein Selektor angegeben wird, werden Popover-Objekte an die angegebenen Ziele gebunden. In der Praxis ist dies nützlich, um dynamischen HTML-Inhalt mit Popovers zu versehen. Sieh dir dies und ein informatives Beispiel an.
template string '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

Grundlegendes HTML für die Erstellung des Popovers.

Der title des Popovers wird in .popover-title injiziert.

Der content des Popovers wird in .popover-content injiziert.

.arrow wird der Pfeil des Popovers.

Das äußerste umschließende Element sollte die Klasse .popover haben.

title String | Funktion ''

Standard-Titel-Wert, falls kein title-Attribut vorhanden ist.

Falls eine Funktion angegeben wird, wird diese mit ihrer this-Referenz gesetzt auf das Element, an das das Popover angebunden ist, aufgerufen.

trigger String 'click' Wie das Popover ausgelöst wird - click | hover | focus | manual. Du kannst mehrere Auslöser angeben; trenne sie mit einem Leerzeichen. manual kann nicht mit anderen Auslösern kombiniert werden.
viewport String | Objekt | Funktion { selector: 'body', padding: 0 }

Hält das Popover innerhalb der Grenzen dieses Elements. Beispiel: viewport: '#viewport' oder { "selector": "#viewport", "padding": 0 }

Wenn eine Funktion angegeben wird, wird diese mit dem auslösenden DOM Node als einziges Argument aufgerufen. Der this-Kontext wird auf die Popover-Instanz gesetzt.

sanitize Boolean true Sanitizer (de-)aktivieren. Falls dieser aktiviert ist, werden die Optionen 'template', 'content' und 'title' gesäubert.
whiteList Object Standardliste Objekt mit erlaubten Elementen und Attributen
sanitizeFn null | function null Hier kannst du deine eigene Funktion statt des eingebauten Sanitizers einbinden. Das kann nützlich sein, wenn du eine andere Bibliothek für die Säuberung von Eingaben verwenden willst.

Data-Attribute für einzelne Popovers

Optionen für individuelle Popovers kannst du alternativ über Data-Attribute, wie oben erklärt, angeben.

Methoden

$().popover(Optionen)

Initialisiert Popovers für eine Reihe von Elementen.

.popover('show')

Öffnet das Popover eines Elements. Gibt das Ergebnis an den Aufruf zurück, bevor das Popover tatsächlich angezeigt wurde (also bevor das Ereignis shown.bs.popover passiert). Dies wird als "manuelles" Auslösen des Popovers betrachtet. Popovers, deren Titel und Inhalt keine Zeichen enthalten, werden niemals angezeigt.

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

.popover('hide')

Verbirgt das Popover eines Elements. Gibt das Ergebnis an den Aufruf zurück, bevor das Popover tatsächlich verborgen wurde (also bevor das Ereignis hidden.bs.popover passiert). Dies wird als "manuelles" Auslösen des Popovers betrachtet.

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

.popover('toggle')

Schaltet die Sichtbarkeit des Popovers eines Elements um. Gibt das Ergebnis an den Aufruf zurück, bevor das Popover tatsächlich ein-/ausgeblendet wurde (also bevor das Ereignis shown.bs.popover oder hidden.bs.popover passiert). Dies wird als "manuelles" Auslösen des Popovers betrachtet.

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

.popover('destroy')

Verbirgt und zerstört das Popover eines Elements. Popovers, die Delegierung verwenden (die mit der selector-Option erstellt werden), können nicht einzeln über untergeordnete Auslöser-Elemente zerstört werden.

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

Ereignisse

Ereignistyp Beschreibung
show.bs.popover Dieses Ereignis wird ausgelöst, wenn die Methode show aufgerufen wird.
shown.bs.popover Dieses Ereignis wird ausgelöst, wenn das Popover dem Nutzer vollständig angezeigt wurde (wartet auf CSS-Übergänge).
hide.bs.popover Dieses Ereignis wird ausgelöst, wenn die Methode hide aufgerufen wird.
hidden.bs.popover Dieses Ereignis wird ausgelöst, wenn das Popover vor dem Nutzer vollständig verborgen wurde (wartet auf CSS-Übergänge).
inserted.bs.popover Dieses Ereignis wird nach dem Ereignis show.bs.popover ausgelöst, wenn das Popover-Template zum DOM hinzugefügt wurde.
$('#meinPopover').on('hidden.bs.popover', function () {
  // etwas ausführen...
})

Warnhinweise alert.js

Beispiel-Warnungen

Ermögliche mit diesem Plugin das Schließen von allen Warnhinweisen.

Wenn du einen .close-Button verwendest, muss dieser das erste untergeordnete Element von .alert-dismissible sein und vor dem Markup darf keinerlei Textinhalt stehen.

Verwendung

Füge einfach data-dismiss="alert" zu deinem Schließen-Button hinzu, um einem Warnhinweis Schließen-Funktionalität hinzuzufügen. Wird ein Warnhinweis geschlossen, wird dieser auch vollständig aus dem DOM entfernt.

<button type="button" class="close" data-dismiss="alert" aria-label="Schließen">
  <span aria-hidden="true">&times;</span>
</button>

Damit deine Warnhinweise beim Schließen animiert werden, achte darauf, dass sie schon die Klassen .fade und .in besitzen.

Methoden

$().alert()

Sorgt dafür, dass ein Warnhinweis nach Klick-Ereignissen horcht, die bei untergeordneten Elementen mit dem Attribut data-dismiss="alert" ausgelöst werden. (Nicht notwendig, wenn die automatische Initialisierung über die Data-API verwendet wird.)

$().alert('close')

Schließt einen Warnhinweis, indem dieser aus dem DOM entfernt wird. Falls die Klassen .fade und .in beim zugehörigen Element vorhanden sind, wird der Warnhinweis langsam ausgeblendet, bevor dieser entfernt wird.

Ereignisse

Bootstraps Warnhinweis-Plugin legt einige Ereignisse offen, mit denen du dich in die Warnhinweise-Funktionen einklinken kannst.

Ereignistyp Beschreibung
close.bs.alert Dieses Ereignis wird sofort ausgelöst, wenn die Methode close aufgerufen wird.
closed.bs.alert Dieses Element wird ausgelöst, wenn der Warnhinweis vollständig geschlossen wurde (wartet auf CSS-Übergänge).
$('#meinWarnhinweis').on('closed.bs.alert', function () {
  // etwas ausführen...
})

Buttons button.js

Mach noch mehr mit Buttons. Kontrolliere den Status von Buttons oder gruppiere sie, um Toolbar-ähnliche Komponenten zu erstellen.

Aussagekräftig

Füge data-loading-text="Wird geladen..." hinzu, um bei einem Button einen Lade-Zustand anzuzeigen.

Diese Funktion ist ab v3.3.5 als veraltet markiert und wurde in v4 entfernt.

Nimm den Zustand, der dir gefällt!

Im Rahmen dieser Demonstration verwenden wir data-loading-text und $().button('loading'); das ist aber nicht der einzige Zustand, den du verwenden kannst. Sieh dir für mehr Informationen dazu die Dokumentation für $().button(string) weiter unten an.

<button type="button" id="meinButton" data-loading-text="Wird geladen..." class="btn btn-primary">
  Ladezustand
</button>

<script>
  $('#meinButton').on('click', function () {
    var $btn = $(this).button('loading')
    // Geschäftslogik...
    $btn.button('reset')
  })
</script>

Einzelner Schalter

Füge data-toggle="button" hinzu, um einen einzelnen Button in einen Schalter zu verwandeln.

Voreingestellte Buttons benötigen .active und aria-pressed="true"

Bei Buttons, die schon als gedrückt markiert sein sollen, musst du die Klasse .active und das Attribut aria-pressed="true" selbst zum button hinzufügen.

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">
  Einzelner Schalter
</button>

Auswahlfelder

Füge data-toggle="buttons" zu einer .btn-group hinzu, die Ankreuzfelder (Checkboxen) oder Radio-Buttons enthält, um sie zusammen mit ihren jeweiligen Stilen in Schalter zu verwandeln.

Vorausgewählte Optionen benötigen .active

Wenn du Optionen vorauswählen möchtest, musst du selbst die Klasse .active zum label einer Schaltfläche hinzufügen.

Optischer "Ausgewählt"-Status wird nur bei Klick aktualisiert

Falls ein Checkbox-Button an- bzw. abgewählt wird, ohne ein click-Ereignis am Button auszulösen (z.B. über <input type="reset"> oder durch Setzen der Eigenschaft checked beim Eingabefeld), musst du die Klasse .active beim label des Eingabefelds selbst hinzufügen bzw. entfernen.

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" checked> Checkbox 1 (vorausgewählt)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Checkbox 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Checkbox 3
  </label>
</div>
<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" checked> Radio-Button 1 (vorausgewählt)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2"> Radio-Button 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3"> Radio-Button 3
  </label>
</div>

Methoden

$().button('toggle')

Schaltet das "Gedrückt"-Aussehen um. Gibt dem Button den Anschein, dass er aktiviert wurde oder entfernt diesen wieder.

$().button('reset')

Setzt den Status des Buttons zurück. Ändert den Text wieder zum Original. Diese Methode ist asynchron und meldet sich zurück, bevor das Zurücksetzen tatsächlich abgeschlossen wurde.

$().button(String)

Ändert den Text zu irgendeinem angegebenen String.

<button type="button" id="meinButtonMitZustand" class="btn btn-primary" data-complete-text="Fertig!">...</button>

<script>
  $('#meinButtonMitZustand').on('click', function () {
    $(this).button('complete') // Button-Text wird "Fertig!" sein
  })
</script>

Collapse collapse.js

Flexibles Plugin, das mit Hilfe von einigen Klassen ein einfaches Ein- und Ausklappen von Komponenten ermöglicht.

Plugin-Abhängigkeit

Collapse benötigt das Übergänge-Plugin in deiner Version von Bootstrap.

Beispiel

Klick auf die buttons unten, um ein anderes Element über veränderte Klassen ein-/auszublenden:

  • .collapse verbirgt Inhalt
  • .collapsing wird während des Übergangs angewendet
  • .collapse.in zeigt Inhalt an

Du kannst einen link mit dem Attribut href oder einen Button mit dem Attribut data-target verwenden. In beiden Fällen ist data-toggle="collapse" unbedingt erforderlich.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseBeispiel" aria-expanded="false" aria-controls="collapseBeispiel">
  Link mit href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseBeispiel" aria-expanded="false" aria-controls="collapseBeispiel">
  Button mit data-target
</button>
<div class="collapse" id="collapseBeispiel">
  <div class="well">
    ...
  </div>
</div>

Beispiel-Accordion

Erweitere den Collapse-Standard, um ein Accordion mit der Panel-Komponente zu erstellen.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="überschriftEins">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseEins" aria-expanded="true" aria-controls="collapseEins">
          Klappbarer Eintrag #1
        </a>
      </h4>
    </div>
    <div id="collapseEins" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="überschriftEins">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="überschriftZwei">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseZwei" aria-expanded="false" aria-controls="collapseZwei">
          Klappbarer Eintrag #2
        </a>
      </h4>
    </div>
    <div id="collapseZwei" class="panel-collapse collapse" role="tabpanel" aria-labelledby="überschriftZwei">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="überschriftDrei">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseDrei" aria-expanded="false" aria-controls="collapseDrei">
          Klappbarer Eintrag #3
        </a>
      </h4>
    </div>
    <div id="collapseDrei" class="panel-collapse collapse" role="tabpanel" aria-labelledby="überschriftDrei">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

Es ist auch möglich, .panel-bodys mit .list-groups auszutauschen.

  • Bootply
  • One itmus ac facilin
  • Second eros

Mach Collapse barrierefrei

Füge unbedingt aria-expanded zum kontrollierenden Element hinzu. Dieses Attribut definiert explizit den aktuellen Status des ein-/ausklappbaren Elements für Screenreader und ähnliche assistive Technologien. Falls das ein-/ausklappbare Element standardmäßig geschlossen ist, sollte es den Wert aria-expanded="false" haben. Falls du das ein-/ausklappbare Element über die Klasse in standardmäßig geöffnet hast, füge stattdessen aria-expanded="true" zum kontrollierenden Element hinzu. Das Plugin wird das Attribut automatisch umschalten, wenn das ein-/ausklappbare Element geöffnet oder geschlossen wird.

Zusätzlich kannst du, wenn das kontrollierende Element mit einem einzelnen ein-/ausklappbaren Element verknüpft ist (also wenn das Attribut data-target auf einen id-Selektor zeigt), ein zusätzliches aria-controls-Attribut, das die id des ein-/ausklappbaren Elements enthält, zum kontrollierenden Element hinzufügen. Moderne Screenreader und ähnliche assistive Technologien verwenden dieses Attribut, um Nutzern zusätzliche Kürzel zur Verfügung zu stellen, mit denen sie direkt zum ein-/ausklappbaren Element selbst navigieren können.

Verwendung

Das Collapse-Plugin verwendet einige Klassen, um die Schwerstarbeit zu machen:

  • .collapse verbirgt den Inhalt
  • .collapse.in zeigt den Inhalt
  • .collapsing wird hinzugefügt, wenn der Übergang startet und wieder entfernt, wenn dieser vorbei ist

Diese Klassen findest du in component-animations.less.

Über Data-Attribute

Füge einfach data-toggle="collapse" und data-target zu einem Element hinzu, um automatisch die Kontrolle über ein klappbares Element zuzuweisen. Das Attribut data-target akzeptiert CSS-Selektor, auf die die Klappfunktion angewendet werden woll. Denk daran, die Klasse collapse zum klappbaren Element hinzuzufügen. Wenn es ausgeklappt starten soll, musst du außerdem die zusätzliche Klasse in hinzufügen.

Um Gruppenverwaltung wie beim Accordion zu einem kontrollierenden Element hinzuzufügen, ergänze einfach das Data-Attribut data-parent="#selector". Sieh dir das Beispiel an, um die genauen Abläufe zu verstehen.

Über JavaScript

Aktiviere diese Funktionen manuell:

$('.collapse').collapse()

Optionen

Optionen können über Data-Attribute oder JavaScript angegeben werden. Für Data-Attribute hängst du den Namen der Option einfach an data-, z.B. data-parent="".

Name Typ Standard Beschreibung
parent Selektor false Falls ein Selektor angegeben wird, werden alle anderen klappbaren Elemente unter dem angegeben Elternelement geschlossen, wenn eines davon geöffnet wird. (So ähnlich wie beim Accordion, das auf der Klasse panel basiert)
toggle Boolean true Schlatet den Status des klappbaren Elements um, wenn es aufgerufen wird

Methoden

.collapse(Optionen)

Aktiviert deinen Inhalt als klappbares Element. Akzeptiert optional ein object mit Optionen.

$('#meinKlappelement').collapse({
  toggle: false
})

.collapse('toggle')

Ändert den Status eines klappbaren Elements von sichtbar zu verborgen und umgekehrt. Die Funktion gibt schon an ihren Aufruf zurück bevor das klappbare Element tatsächlich sichtbar bzw. verborgen gemacht wurde (also bevor das Ereignis shown.bs.collapse bzw. hidden.bs.collapse stattfindet).

.collapse('show')

Zeigt ein klappbares Element an. Die Funktion gibt schon an ihren Aufruf zurück bevor das klappbare Element tatsächlich sichtbar gemacht wurde (also bevor das Ereignis shown.bs.collapse stattfindet).

.collapse('hide')

Verbirgt ein klappbares Element. Die Funktion gibt schon an ihren Aufruf zurück bevor das klappbare Element tatsächlich verborgen gemacht wurde (also bevor das Ereignis hidden.bs.collapse stattfindet).

Ereignisse

Bootstraps Collapse-Klassen legen einige Ereignisse offen, um sich in die Collapse-Funktionen einzuklinken.

Ereignistyp Beschreibung
show.bs.collapse Dieses Ereignis wird sofort ausgelöst, wenn die Methode show aufgerufen wird.
shown.bs.collapse Dieses Eregnis wird ausgelöst, wenn das Collapse-Element dem Nutzer angezeigt wurde (wartet auf CSS-Übergänge).
hide.bs.collapse Dieses Ereignis wird sofort ausgelöst, wenn die Methode hide aufgerufen wird.
hidden.bs.collapse Dieses Eregnis wird ausgelöst, wenn das Collapse-Element vor dem Nutzer verborgen wurde (wartet auf CSS-Übergänge).
$('#meinCollapsible').on('hidden.bs.collapse', function () {
  // etwas ausführen...
})

Karussell carousel.js

Eine Diashow-Komponente zum animierten Vorführen einer Reihe von Elementen, wie in einem Karussell. Mehrere Karussells ineinander verschachtelt werden nicht unterstützt.

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Positionsanzeiger -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Verpackung für die Elemente -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Schalter -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Zurück</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Weiter</span>
  </a>
</div>

Barrierefreiheit

Die Karussell-Komponente erfüllt generell keine Standards für Barrierefreiheit. Falls du diese einhalten musst, solltest du andere Optionen für die Präsentation dieser Inhalte in Betracht ziehen.

Optionale Untertitel

Füge Untertitel zu deinen Folien ganz einfach mit .carousel-caption zu jedem .item hinzu. Darin kannst du fast alle optionalen HTML-Inhalte einfügen und alles wird automatisch ausgerichtet und formatiert.

<div class="item">
  <img src="..." alt="...">
  <div class="carousel-caption">
    <h3>...</h3>
    <p>...</p>
  </div>
</div>

Mehrere Karussells

Damit die Steuerung von Karussells richtig funktioniert, musst du eine einzigartige id zum äußersten Container (dem .carousel) hinzufügen. Wenn du mehr als ein Karussell auf einer Seite verwendest oder die id eines Karussells aus einem anderen Grund veränderst, denk daran, auch die Steuerungselemente anzupassen.

Über Data-Attribute

Verwende Data-Attribute, um die Position des Karussells auf einfache Weise zu kontrollieren. data-slide akzeptiert die Schlüsselwörter prev or next, die die Position der Folien abhängig von der aktuellen Position verändern. Alternativ kannst du data-slide-to verwenden, um die Folie mit einer bestimmten Nummer aufzurufen. data-slide-to="2" ruft die dritte Folie im Karussell auf, da die automatische Nummerierung mit 0 beginnt.

Das Attribut data-ride="carousel" wird verwendet, um ein Karussell automatisch zu animieren, sobald die Seite fertig geladen ist. Es kann nicht in Verbindung mit (redundanter und unnötiger) expliziter Initialisierung des selben Karussells über JavaScript verwendet werden.

Über JavaScript

Ruf die Karussell-Funktionen manuell auf:

$('.karussell').carousel()

Optionen können über Data-Attribute oder JavaScript angegeben werden. Für Data-Attribute hängst du den Namen der Option einfach an data-, z.B. data-interval="".

Name Typ Standard Beschreibung
interval Nummer | false 5000 Die Zeit in ms, die vergehen soll, bevor das nächste Objekt aufgerufen wird. Falls false angegeben wird, bewegt sich das Karussell nicht automatisch.
pause String | null "hover" Pausiert die Drehung des Karussells, wenn der Wert "hover" festgelegt wird, bei mouseenter und setzt sie bei mouseleave fort. Wird der Wert null festgelegt, pausiert das Karussell nicht.
wrap Boolean true Bestimmt, ob das Karussell sich immer weiterdrehen oder feste Stopps machen soll.
keyboard Boolean true Bestimmt, ob das Karussell auf Tastatureingaben reagieren soll.

.carousel(Optionen)

Initialisiert das Karussell mit einem optionalen object mit Optionen und beginnt, zwischen den verschiedenen Folien zu wechseln.

$('.karussell').carousel({
  interval: 2000
})

.carousel('cycle')

Wechselt zwischen den Karussell-Einträgen von links nach rechts.

.carousel('pause')

Pausiert die Drehung des Karussells.

.carousel(number)

Bewegt das Karussell zu einem bestimmten Eintrag (basiert auf 0, wie ein Array).

.carousel('prev')

Bewegt das Karussell zum vorherigen Eintrag.

.carousel('next')

Bewegt das Karussell zum nächsten Eintrag.

Bootstraps Karussell-Klassen legen zwei Ereignisse offen, mit denen du dich in Karussell-Funktionen einklinken kannst.

Beide Ereignisse haben die folgenden zusätzlichen Eigenschaften:

  • direction: Die Richtung, in die das Karussell rotiert (entweder "left" (nach links) oder "right" (nach rechts)).
  • relatedTarget: Das DOM-Element, das als aktives Element sichtbar gemacht wird.

Alle Karussell-Ereignisse werden beim Karussell selbst ausgelöst (also beim <div class="carousel">).

Ereignistyp Beschreibung
slide.bs.carousel Dieses Ereignis wird sofort ausgelöst, wenn die Methode slide aufgerufen wird.
slid.bs.carousel Dieses Element wird ausgelöst, wenn das Karussell eine Bewegung zu Ende geführt hat.
$('#meinKarussell').on('slide.bs.carousel', function () {
  // etwas ausführen...
})

Affix affix.js

Beispiel

Das Affix-Plugin schaltet position: fixed; ein und aus, um den Effekt von position: sticky; zu simulieren. Die Unternavigation rechts auf dieser Seite ist eine Live-Ansicht des Affix-Plugins.


Verwendung

Verwende das Affix-Plugin über Data-Attribute oder manuell mit deinem eigenen JavaScript. In beiden Fällen musst du CSS für die Positionierung deines fixierten Inhalts angeben.

Hinweis: Verwende das Affix-Plugin nicht an einem Element, das sich in einem relativ positionierten Element, wie einer verschobenen (pull/push) Spalte aus dem Raster-System, befindet, da es einen Rendering-Bug in Safari gibt.

Positionierung über CSS

Das Affix-Plugin wechselt bei einem Element zwischen drei Klassen, die jeweils einen bestimmten Status repräsentieren: .affix, .affix-top und .affix-bottom. Du musst für diese Klassen alle Stile außer position: fixed; selbst (unabhängig von diesem Plugin) hinzufügen, um die tatsächlichen Positionen zu regeln.

So funktioniert das Affix-Plugin:

  1. Am Anfang fügt das Plugin die Klasse .affix-top hinzu, um anzuzeigen, dass das Element ganz oben ist. Hier brauchst du noch kein CSS zur Positionierung.
  2. Wenn du an dem Element vorbeiscrollst, sollte das eigentliche Affix-Verhalten ausgelöst werden. Jetzt wird .affix-top durch .affix ersetzt und die Position wird von Bootstrap selbst auf position: fixed; festgelegt.
  3. Falls ein Versatz am unteren Ende angegeben wurde, wird .affix oder .affix-top durch .affix-bottom ersetzt, wenn daran vorbeigescrollt wird. Da so ein Versatz optional ist, ist gegebenenfalls angemessenes CSS erforderlich. In diesem Fall solltest du, falls notwendig, position: absolute; hinzufügen. das Plugin verwendet die Option vom Data-Attribut oder JavaScript, um herauszufinden, wo das Element dann genau positioniert werden soll.

Folge den obigen Schritten, um dein CSS für jede der unten angebeben Verwendungsmöglichkeiten zu schreiben.

Über Data-Attribute

Um ganz einfach Affix-Verhalten zu einem Element hinzuzufügen, ergänze einfach data-spy="affix" bei dem Element, das du im Visier haben willst. Verwende Versatz (Offsets), um zu definieren, wann ein Element fixiert werden soll.

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

Über JavaScript

Ruf das Affix-Plugin über JavaScript auf:

$('#mein-affix').affix({
  offset: {
    top: 100,
    bottom: function () {
      return (this.bottom = $('.footer').outerHeight(true))
    }
  }
})

Optionen

Optionen können über Data-Attribute oder JavaScript angegeben werden. Für Data-Attribute hängst du den Namen der Option einfach an data-, z.B. data-offset-top="200".

Name Typ Standard Beschreibung
offset Nummer | Funktion | Objekt 10 Anzahl der Pixel für einen Versatz vom Bildschirm, wenn die Scroll-Position kalkuliert wird. Falls eine einzelne Nummer angegeben wird, wird der Versatz oben und unten angewendet. Um separate Werte für den Versatz oben und unten anzugeben, definiere ein Objekt: offset: { top: 10 } oder offset: { top: 10, bottom: 5 }. Verwende eine Funktion, wenn du den Versatz dynamisch berechnen musst.
target Selektor | Knotenpunkt | jQuery-Element das Objekt window Legt das Zielelement des Affix fest.

Methoden

.affix(Optionen)

Aktiviert deinen Inhalt als Inhalt mit Affix-Funktion. Akzeptiert ein optionales object mit Optionen.

$('#meinAffix').affix({
  offset: 15
})

.affix('checkPosition')

Berechnet den Status des Affix-Elements basierend auf den Abmessungen, der Position und der Scrollposition der relevanten Elemente neu. Die Klassen .affix, .affix-top und .affix-bottom werden abhängig von dem neuen Status hinzugefügt oder entfernt. Diese Methode muss aufgerufen werden, wenn die Dimensionen des Affix-Inhalts oder des Zielelements sich ändern, um eine korrekte Positioniertung des Affix-Inhalts sicherzustellen.

$('#meinAffix').affix('checkPosition')

Ereignisse

Bootstraps Affix-Plugin legt einige Ereignisse offen, über die du dich in Affix-Funktionen einklinken kannst.

Ereignistyp Beschreibung
affix.bs.affix Dieses Ereignis wird unmittelbar ausgelöst, bevor das Element mit der Klasse affix versehen wird.
affixed.bs.affix Dieses Ereignis wird ausgelöst, wenn das Element mit der Klasse affix versehen wurde.
affix-top.bs.affix Dieses Ereignis wird unmittelbar ausgelöst, bevor das Element mit der Klasse affix-top versehen wird.
affixed-top.bs.affix Dieses Ereignis wird ausgelöst, wenn das Element mit der Klasse affix-top versehen wurde.
affix-bottom.bs.affix Dieses Ereignis wird unmittelbar ausgelöst, bevor das Element mit der Klasse affix-bottom versehen wird.
affixed-bottom.bs.affix Dieses Ereignis wird ausgelöst, wenn das Element mit der Klasse affix-bottom versehen wurde.