JavaScript
Erwecke Bootstrap mit zahlreichen jQuery-Plugins zum Leben. Verwende alle auf einmal oder such dir die passenden einzeln aus.
Erwecke Bootstrap mit zahlreichen jQuery-Plugins zum Leben. Verwende alle auf einmal oder such dir die passenden einzeln aus.
Plugins können einzeln (über Bootstraps separate *.js
-Dateien) oder alle auf einmal (über bootstrap.js
oder das minimierte bootstrap.min.js
) eingebunden werden.
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.
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.
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:
Alternativ kannst du ein bestimmtes Plugin anvisieren. Füge einfach den Namen des Plugins zur Namespace-Angabe hinzu, so wie hier:
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.
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.
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:
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')
.
Du kannst die Standard-Einstellungen für ein Plugin ändern, indem du das Objekt Constructor.DEFAULTS
des Plugins bearbeitest:
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.
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.
Tooltips und Popovers nutzen unseren eingebauten Sanitizer, um HTML-akzeptierende Optionen vor der Verarbeitung zu säubern.
Die Standardliste mit erlaubten Eingaben (whiteList
) ist:
Wenn du zusätzliche Einträge zur whiteList
hinzufügen willst, kannst du das so machen:
Falls du unseren Sanitizer umgehen willst, etwa weil du ein anderes Paket (z.B. DOMPurify) dafür verwenden willst, musst du so vorgehen:
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.
Die Version jedes der Bootstrap-jQuery-Plugins kann über die Eigenschaft VERSION
des Plugin-Konstruktors abgerufen werden. Zum Beispiel beim Tooltip-Plugin:
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.
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.
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.
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.
Ü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.
Modals sind schlanke aber flexible Dialog-Fenster mit den minimalen benötigten Funktionen und sinnvollen Standards.
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.
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.
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:
Ein manuell generiertes Modal mit Header, Body und einigen Aktionen im Footer.
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.
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.
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.
Modals verfügen über zwei optionale Größen, die über Veränderungsklassen für .modal-dialog
deklariert werden können.
Entferne die Klasse .fade
von deinem Modal-Markup, wenn du lieber möchtest, dass das Modal einfach erscheint und nicht von oben eingeflogen wird.
Um die Vorteile von Bootstraps Raster-System in einem Modal zu nutzen, füge einfach .row
s innerhalb von .modal-body
hinzu und verwende dann das normale Raster-System.
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
.
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.
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.
Rufe ein Modal über seine ID meinModal
mit nur einer Zeile JavaScript auf:
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 |
.modal(Optionen)
Aktiviert deinen Inhalt als ein Modal. Akzeptiert ein optionales object
mit Optionen.
.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
).
.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
).
.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
).
.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.
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. |
Füge Dropdown-Menüs zu fast allem, z.B. Navbars, Tabs oder Pills-Navs, mit diesem einfachen Plugin hinzu.
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.
Füge data-toggle="dropdown"
zu einem Link oder Button hinzu, um ein Dropdown-Menü zu kontrollieren.
Um URLs mit Link-Buttons nicht zu beeinträchtigen, kannst du das Attribut data-target
statt href="#"
verwenden.
Ruf Dropdowns über JavaScript auf:
data-toggle="dropdown"
weiterhin notwendigUnabhä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). |
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.
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.
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.
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.
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.
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.
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.
:visible
sind, werden ignoriertZielelemente, die laut jQuery nicht :visible
(sichtbar) sind, werden ignoriert und die zugehörigen Nav-Einträge werden niemals hervorgehoben.
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.
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.
Ruf den Scroll-Beobachter über JavaScript auf, nachdem du position: relative;
in deinem CSS hinzugefügt hast:
.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:
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. |
Ereignistyp | Beschreibung |
---|---|
activate.bs.scrollspy | Dieses Ereignis wird ausgelöst, wenn ein neues Objekt vom ScrollSpy aktiviert wird. |
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.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.
Dieses Plugin erweitert die Komponente Tab-Navs, um tatsächliches Tabverhalten hinzuzufügen.
Aktiviere anklickbare Tabs über JavaScript (jeder Tab muss einzeln aktiviert werden):
Du kannst einzelne Tabs auf verschiedene Weise aktivieren:
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.
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.
$().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).
Wenn ein neuer Tab angezeigt wird, werden in der folgenden Reihenfolge Ereignisse ausgelöst:
hide.bs.tab
(beim zurzeit aktiven Tab)show.bs.tab
(beim gleich eingeblendeten Tab)hidden.bs.tab
(beim bisher aktiven Tab, dem von hide.bs.tab
)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. |
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.
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.
Vier Optionen sind verfügbar: nach oben, nach rechts, nach unten und nach links ausgerichtet.
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:
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:
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).
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.
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).
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"
.
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 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: |
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: |
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 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 |
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
Das äußerste umschließende Element sollte die Klasse |
title | String | Funktion | '' |
Standard-Titel-Wert, falls kein Falls eine Funktion angegeben wird, wird diese mit ihrer |
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: Wenn eine Funktion angegeben wird, wird diese mit dem auslösenden DOM Node als einziges Argument aufgerufen. Der |
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. |
Optionen für individuelle Tooltips kannst du alternativ über Data-Attribute, wie oben erklärt, angeben.
$().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.
.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.
.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.
.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.
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. |
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.
Popovers sind eine Erweiterung des Tooltip-Plugins, das daher in deiner Version von Bootstrap vorhanden sein muss.
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:
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).
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.
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.
Es gibt vier Optionen: Ausrichtung nach oben, rechts, unten und links.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Verwende den Auslöser focus
, um Popovers beim nächsten Klick des Nutzers zu schließen.
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.
Aktiviere Popovers über JavaScript:
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: |
content | String | Funktion | '' |
Standard-Inhalt, falls kein Falls eine Funktion angegeben wird, wird diese mit ihrer |
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: |
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 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 |
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 Der
Das äußerste umschließende Element sollte die Klasse |
title | String | Funktion | '' |
Standard-Titel-Wert, falls kein Falls eine Funktion angegeben wird, wird diese mit ihrer |
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: Wenn eine Funktion angegeben wird, wird diese mit dem auslösenden DOM Node als einziges Argument aufgerufen. Der |
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. |
Optionen für individuelle Popovers kannst du alternativ über Data-Attribute, wie oben erklärt, angeben.
$().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.
.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.
.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.
.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.
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. |
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.
Verändere dies und das und versuche es dann erneut. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
Fü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.
Damit deine Warnhinweise beim Schließen animiert werden, achte darauf, dass sie schon die Klassen .fade
und .in
besitzen.
$().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.
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). |
Mach noch mehr mit Buttons. Kontrolliere den Status von Buttons oder gruppiere sie, um Toolbar-ähnliche Komponenten zu erstellen.
Firefox speichert jeglichen besonderen Status (deaktiviert und/oder ausgewählt) eines Formularelements (inkl. Buttons) auch wenn die Seite neu geladen wird. Ein Workaround für dieses Problem ist die Verwendung von autocomplete="off"
. Siehe Mozilla Bug #654072.
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.
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.
Füge data-toggle="button"
hinzu, um einen einzelnen Button in einen Schalter zu verwandeln.
.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.
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.
.active
Wenn du Optionen vorauswählen möchtest, musst du selbst die Klasse .active
zum label
einer Schaltfläche hinzufügen.
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.
$().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.
Flexibles Plugin, das mit Hilfe von einigen Klassen ein einfaches Ein- und Ausklappen von Komponenten ermöglicht.
Collapse benötigt das Übergänge-Plugin in deiner Version von Bootstrap.
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 anDu 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.
Erweitere den Collapse-Standard, um ein Accordion mit der Panel-Komponente zu erstellen.
Es ist auch möglich, .panel-body
s mit .list-group
s auszutauschen.
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.
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 istDiese Klassen findest du in component-animations.less
.
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.
Aktiviere diese Funktionen manuell:
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 |
.collapse(Optionen)
Aktiviert deinen Inhalt als klappbares Element. Akzeptiert optional ein object
mit Optionen.
.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).
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). |
Eine Diashow-Komponente zum animierten Vorführen einer Reihe von Elementen, wie in einem Karussell. Mehrere Karussells ineinander verschachtelt werden nicht unterstützt.
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.
Bootstrap nutzt ausschließlich CSS3 für seine Animationen, aber Internet Explorer 8 & 9 unterstützen die notwendigen CSS-Eigenschaften nicht. Daher gibt es keine Gleit-Animation im Karussell in diesen Browsern. Wir haben uns bewusst dafür entschieden, jQuery-basierte Alternativen für die Übergänge nicht einzusetzen.
Die Klasse .active
muss zu einem der Karussell-Elemente hinzugefügt werden. Das Karussell wird anderenfalls nicht sichtbar sein.
Die Klassen .glyphicon .glyphicon-chevron-left
und .glyphicon .glyphicon-chevron-right
werden für diese Schaltflächen nicht unbedingt benötigt. Bootstrap stellt .icon-prev
und .icon-next
als einfache Unicode-Alternativen zur Verfügung.
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.
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.
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.
Ruf die Karussell-Funktionen manuell auf:
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.
.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. |
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.
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.
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:
.affix-top
hinzu, um anzuzeigen, dass das Element ganz oben ist. Hier brauchst du noch kein CSS zur Positionierung..affix-top
durch .affix
ersetzt und die Position wird von Bootstrap selbst auf position: fixed;
festgelegt..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.
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.
Ruf das Affix-Plugin über JavaScript auf:
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. |
.affix(Optionen)
Aktiviert deinen Inhalt als Inhalt mit Affix-Funktion. Akzeptiert ein optionales object
mit Optionen.
.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.
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. |