Überblick

Einzeln oder zusammengestellt

Plugins können einzeln (unter Verwendung der einzelnen *.jsDateien von Bootstrap) oder alle auf einmal (unter Verwendung von bootstrap.jsoder des minified bootstrap.min.js) eingebunden werden.

Datenattribute

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

Allerdings kann es in manchen Situationen wünschenswert sein, diese Funktion auszuschalten. Daher bieten wir auch die Möglichkeit, die Datenattribut-API zu deaktivieren, indem alle Ereignisse für das mit dem Namensraum versehene Dokument aufgehoben werden data-api. Das sieht so aus:

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

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

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

Programmatische API

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

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

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

$('#myModal').modal()                      // initialized with defaults
$('#myModal').modal({ keyboard: false })   // initialized with no keyboard
$('#myModal').modal('show')                // initializes and invokes show immediately

Jedes Plugin stellt auch seinen Rohkonstruktor für eine ConstructorEigenschaft bereit: $.fn.popover.Constructor. Wenn Sie eine bestimmte Plugin-Instanz erhalten möchten, rufen Sie sie direkt von einem Element ab: $('[rel="popover"]').data('popover').

Standardeinstellungen

Sie können die Standardeinstellungen für ein Plugin ändern, indem Sie das Constructor.DEFAULTSObjekt des Plugins ändern:

$.fn.modal.Constructor.DEFAULTS.keyboard = false // changes default for the modal plugin's `keyboard` option to false

Kein Konflikt

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

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

Veranstaltungen

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

Ab 3.0.0 sind alle Bootstrap-Ereignisse mit Namensräumen versehen.

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

$('#myModal').on('show.bs.modal', function (e) {
  if (!data) return e.preventDefault() // stops modal from being shown
})

Versionsnummern

Auf die Version jedes jQuery-Plugins von Bootstrap kann über die VERSIONEigenschaft des Konstruktors des Plugins zugegriffen werden. Zum Beispiel für das Tooltip-Plugin:

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

Keine speziellen Fallbacks, wenn JavaScript deaktiviert ist

Die Plugins von Bootstrap greifen nicht besonders elegant zurück, wenn JavaScript deaktiviert ist. Wenn Ihnen in diesem Fall die Benutzererfahrung wichtig ist, verwenden Sie <noscript>, um Ihren Benutzern die Situation zu erklären (und wie JavaScript wieder aktiviert wird), und/oder fügen Sie Ihre eigenen benutzerdefinierten Fallbacks hinzu.

Übergänge transit.js

Über Übergänge

Fügen Sie für einfache Übergangseffekte transition.jseinmal neben den anderen JS-Dateien hinzu. Wenn Sie das kompilierte (oder minimierte) verwenden bootstrap.js, müssen Sie dies nicht einschließen – es ist bereits vorhanden.

Was ist drin

Transition.js ist ein grundlegender Helfer für transitionEndEreignisse sowie ein CSS-Übergangsemulator. Es wird von den anderen Plugins verwendet, um die CSS-Übergangsunterstützung zu prüfen und hängende Übergänge abzufangen.

Übergänge deaktivieren

Übergänge können global mit dem folgenden JavaScript-Snippet deaktiviert werden, das kommen muss, nachdem transition.js(oder bootstrap.jsoder bootstrap.min.js, je nach Fall) geladen wurde:

$.support.transition = false

Modale modal.js

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

Aufgrund dessen, wie HTML5 seine Semantik definiert, hat das autofocusHTML-Attribut keine Wirkung in Bootstrap-Modalen. Um den gleichen Effekt zu erzielen, verwenden Sie ein benutzerdefiniertes JavaScript:

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})

Beispiele

Statisches Beispiel

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

<div class="modal fade" 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="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Live-Demo

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

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Optionale Größen

Modale haben zwei optionale Größen, die über Modifikatorklassen verfügbar sind, die auf einer .modal-dialog.

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

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

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

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

Animation entfernen

Entfernen Sie für Modale, die einfach angezeigt und nicht eingeblendet werden, die .fadeKlasse aus Ihrem modalen Markup.

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

Verwenden des Grid-Systems

Um das Bootstrap-Rastersystem innerhalb eines Modals zu nutzen, verschachteln Sie einfach .rows innerhalb von .modal-bodyund verwenden Sie dann die normalen Rastersystemklassen.

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="gridSystemModalLabel">Modal title</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">
            Level 1: .col-sm-9
            <div class="row">
              <div class="col-xs-8 col-sm-6">
                Level 2: .col-xs-8 .col-sm-6
              </div>
              <div class="col-xs-4 col-sm-6">
                Level 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">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Variierender modaler Inhalt basierend auf der Trigger-Schaltfläche

Haben Sie eine Reihe von Schaltflächen, die alle dasselbe Modal auslösen, nur mit leicht unterschiedlichen Inhalten? Verwenden Sie event.relatedTargetund HTML- data-*Attribute (möglicherweise über jQuery ), um den Inhalt des Modals abhängig davon zu variieren, auf welche Schaltfläche geklickt wurde. relatedTargetWeitere Informationen zu , finden Sie in der Dokumentation zu modalen Ereignissen .

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
...more buttons...

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">New message</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>

$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

Verwendungszweck

Das Modal-Plugin schaltet Ihre versteckten Inhalte bei Bedarf über Datenattribute oder JavaScript um. Es fügt .modal-openauch das <body>standardmäßige Bildlaufverhalten außer Kraft und generiert einen .modal-backdropKlickbereich zum Verwerfen angezeigter Modale, wenn außerhalb des Modals geklickt wird.

Über Datenattribute

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

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

Über JavaScript

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

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

Optionen

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

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

Methoden

.modal(options)

Aktiviert Ihren Inhalt als Modal. Akzeptiert optionale Optionen object.

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

.modal('toggle')

Schaltet ein Modal manuell um. Gibt an den Aufrufer zurück, bevor das Modal tatsächlich angezeigt oder ausgeblendet wurde (dh bevor das shown.bs.modaloder hidden.bs.modal-Ereignis eintritt).

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

.modal('show')

Öffnet manuell ein Modal. Kehrt zum Aufrufer zurück, bevor das Modal tatsächlich gezeigt wurde (dh bevor das shown.bs.modalEreignis eintritt).

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

.modal('hide')

Blendet ein Modal manuell aus. Gibt an den Aufrufer zurück, bevor das Modal tatsächlich ausgeblendet wurde (dh bevor das hidden.bs.modalEreignis eintritt).

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

.modal('handleUpdate')

Passt die Positionierung des Modals neu an, um einer Bildlaufleiste entgegenzuwirken, falls eine erscheinen sollte, wodurch das Modal nach links springen würde.

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

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

Veranstaltungen

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

Alle modalen Ereignisse werden am Modal selbst (dh am <div class="modal">) ausgelöst.

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Dropdowns dropdown.js

Beispiele

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

Innerhalb einer Navigationsleiste

Innerhalb von Pillen

Verwendungszweck

Über Datenattribute oder JavaScript schaltet das Dropdown-Plug-in ausgeblendete Inhalte (Dropdown-Menüs) um, indem es die .openKlasse des übergeordneten Listenelements umschaltet.

Auf Mobilgeräten fügt das Öffnen eines Dropdown .dropdown-backdrop-Menüs ein als Tippbereich zum Schließen von Dropdown-Menüs hinzu, wenn außerhalb des Menüs getippt wird, eine Voraussetzung für ordnungsgemäße iOS-Unterstützung. Das bedeutet, dass der Wechsel von einem geöffneten Dropdown-Menü zu einem anderen Dropdown-Menü auf Mobilgeräten ein zusätzliches Antippen erfordert.

Hinweis: Das data-toggle="dropdown"Attribut wird zum Schließen von Dropdown-Menüs auf Anwendungsebene verwendet, daher ist es eine gute Idee, es immer zu verwenden.

Über Datenattribute

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

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

Um URLs mit Link-Schaltflächen intakt zu halten, verwenden Sie das data-targetAttribut anstelle von href="#".

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

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

Über JavaScript

Rufen Sie die Dropdowns über JavaScript auf:

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

Optionen

Keiner

Methoden

$().dropdown('toggle')

Schaltet das Dropdown-Menü einer bestimmten Navigationsleiste oder Registerkartennavigation um bzw. um.

Veranstaltungen

Alle Dropdown-Ereignisse werden beim .dropdown-menuübergeordneten Element von ausgelöst.

Alle Dropdown-Ereignisse haben eine relatedTargetEigenschaft, deren Wert das umschaltende Ankerelement ist.

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

Beispiel in der Navigationsleiste

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

Verwendungszweck

Relative Positionierung erforderlich

Unabhängig von der Implementierungsmethode erfordert Scrollspy die Verwendung von position: relative;für das Element, das Sie ausspionieren. In den meisten Fällen ist dies die <body>. Wenn Sie auf anderen Elementen als dem scrollen <body>, stellen Sie sicher, dass Sie ein heightSet haben und overflow-y: scroll;angewendet werden.

Über Datenattribute

Um ganz einfach Scrollspy-Verhalten zu Ihrer Topbar-Navigation hinzuzufügen, fügen data-spy="scroll"Sie das Element hinzu, das Sie ausspionieren möchten (normalerweise wäre dies das <body>). Fügen Sie dann das data-targetAttribut mit der ID oder Klasse des übergeordneten Elements einer beliebigen Bootstrap- .navKomponente 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

Nachdem position: relative;Sie Ihr CSS hinzugefügt haben, rufen Sie den Scrollspy über JavaScript auf:

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

Methoden

.scrollspy('refresh')

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

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

Optionen

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

Veranstaltungen

$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

Umschaltbare Registerkarten tab.js

Beispiel-Tabs

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

Verwendungszweck

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

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

Sie können einzelne Registerkarten auf verschiedene Arten aktivieren:

$('#myTabs a[href="#profile"]').tab('show') // Select tab by name
$('#myTabs a:first').tab('show') // Select first tab
$('#myTabs a:last').tab('show') // Select last tab
$('#myTabs li:eq(2) a').tab('show') // Select third tab (0-indexed)

Markierung

Sie können eine Tab- oder Pill-Navigation aktivieren, ohne JavaScript zu schreiben, indem Sie einfach data-toggle="tab"oder data-toggle="pill"für ein Element angeben. Das Hinzufügen der Klassen navund nav-tabszur Registerkarte wendet das Stylingul der Registerkarte Bootstrap an , während das Hinzufügen der Klassen und das Pill-Styling anwendet .navnav-pills

<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
  </div>

</div>

Fade-Effekt

Um Tabulatoren einzublenden, fügen Sie .fadejedem hinzu .tab-pane. Auch der erste Tab-Bereich muss .inden initialen Inhalt sichtbar machen.

<div class="tab-content">
  <div role="tabpanel" class="tab-pane fade in active" id="home">...</div>
  <div role="tabpanel" class="tab-pane fade" id="profile">...</div>
  <div role="tabpanel" class="tab-pane fade" id="messages">...</div>
  <div role="tabpanel" class="tab-pane fade" id="settings">...</div>
</div>

Methoden

$().tab

Aktiviert ein Registerkartenelement und einen Inhaltscontainer. Tab sollte entweder ein data-targetoder ein haben href, das auf einen Container-Knoten im DOM abzielt. In den obigen Beispielen sind die Registerkarten die <a>s mit data-toggle="tab"Attributen.

.tab('show')

Wählt die angegebene Registerkarte aus und zeigt den zugehörigen Inhalt an. Jede andere Registerkarte, die zuvor ausgewählt war, wird deaktiviert und der zugehörige Inhalt wird ausgeblendet. Gibt an den Aufrufer zurück, bevor das Registerkartenfenster tatsächlich angezeigt wurde (dh bevor das shown.bs.tabEreignis eintritt).

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

Veranstaltungen

Beim Anzeigen eines neuen Tabs werden die Ereignisse in der folgenden Reihenfolge ausgelöst:

1. hide.bs.tab(auf der aktuell aktiven Registerkarte)
2. show.bs.tab(auf dem anzuzeigenden Reiter)
3. hidden.bs.tab(auf der vorherigen aktiven Registerkarte dieselbe wie für das hide.bs.tabEreignis)
4. shown.bs.tab(auf dem neu aktivierten gerade gezeigten Tab, der gleiche wie für das show.bs.tabEreignis)

Wenn noch keine Registerkarte aktiv war, werden die Ereignisse hide.bs.tabund hidden.bs.tabnicht ausgelöst.

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

QuickInfos tooltip.js

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

Tooltips mit leeren Titeln werden nie angezeigt.

Beispiele

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

Statischer Tooltip

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

Vier Richtungen

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

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

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

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

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

Verwendungszweck

Das Tooltip-Plug-in generiert Inhalte und Markups nach Bedarf und platziert QuickInfos standardmäßig nach ihrem Auslöserelement.

Lösen Sie den Tooltip über JavaScript aus:

$('#example').tooltip(options)

Markierung

Das erforderliche Markup für einen Tooltip ist nur ein dataAttribut und titleauf dem HTML-Element, das Sie haben möchten, ein Tooltip. Das generierte Markup eines Tooltips ist ziemlich einfach, erfordert jedoch eine Position (standardmäßig topvom Plugin festgelegt).

<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- Generated markup by the plugin -->
<div class="tooltip top" role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

Optionen

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

Methoden

$().tooltip(options)

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

.tooltip('show')

Zeigt den Tooltip eines Elements an. Kehrt zum Anrufer zurück, bevor der Tooltip tatsächlich angezeigt wurde (dh bevor das shown.bs.tooltipEreignis eintritt). Dies wird als "manuelles" Auslösen des Tooltips angesehen. Tooltips mit leeren Titeln werden nie angezeigt.

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

.tooltip('hide')

Blendet den Tooltip eines Elements aus. Gibt den Aufrufer zurück, bevor der Tooltip tatsächlich ausgeblendet wurde (dh bevor das hidden.bs.tooltipEreignis eintritt). Dies wird als "manuelles" Auslösen des Tooltips angesehen.

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

.tooltip('toggle')

Schaltet den Tooltip eines Elements um. Kehrt zum Aufrufer zurück, bevor der Tooltip tatsächlich angezeigt oder ausgeblendet wurde (dh bevor das shown.bs.tooltipoder hidden.bs.tooltip-Ereignis eintritt). Dies wird als "manuelles" Auslösen des Tooltips angesehen.

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

.tooltip('destroy')

Versteckt und zerstört den Tooltip eines Elements. QuickInfos, die Delegierung verwenden (die mit der selectorOption erstellt werden ), können nicht einzeln für untergeordnete Auslöserelemente zerstört werden.

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

Veranstaltungen

$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovers popover.js

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

Popover, deren Titel und Inhalt die Länge Null haben, werden nie angezeigt.

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

Beispiele

Statisches Popover

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

Live-Demo

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

Vier Richtungen

<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 on left
</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 on top
</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 on bottom
</button>

<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 on right
</button>

Beim nächsten Klick schließen

Verwenden Sie den focusAuslöser, um Popover beim nächsten Klick des Benutzers zu schließen.

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

Verwendungszweck

Popover über JavaScript aktivieren:

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

Optionen

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

Methoden

$().popover(options)

Initialisiert Popover für eine Elementsammlung.

.popover('show')

Zeigt das Popover eines Elements an. Kehrt zum Aufrufer zurück, bevor das Popover tatsächlich angezeigt wurde (dh bevor das shown.bs.popoverEreignis eintritt). Dies wird als "manuelles" Auslösen des Popovers angesehen. Popover, deren Titel und Inhalt die Länge Null haben, werden nie angezeigt.

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

.popover('hide')

Blendet das Popover eines Elements aus. Kehrt zum Aufrufer zurück, bevor das Popover tatsächlich ausgeblendet wurde (dh bevor das hidden.bs.popoverEreignis eintritt). Dies wird als "manuelles" Auslösen des Popovers angesehen.

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

.popover('toggle')

Schaltet das Popover eines Elements um. Kehrt zum Aufrufer zurück, bevor das Popover tatsächlich angezeigt oder ausgeblendet wurde (dh bevor das shown.bs.popoveroder - hidden.bs.popoverEreignis eintritt). Dies wird als "manuelles" Auslösen des Popovers angesehen.

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

.popover('destroy')

Verbirgt und zerstört das Popover eines Elements. Popover, die Delegierung verwenden (die mit der selectorOption erstellt werden ), können nicht einzeln auf untergeordneten Auslöserelementen zerstört werden.

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

Veranstaltungen

$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

Warnmeldungen alert.js

Beispielwarnungen

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

Bei Verwendung eines .closeButtons muss dieser das erste Kind des sein .alert-dismissibleund es darf kein Textinhalt davor im Markup stehen.

Verwendungszweck

Fügen Sie einfach data-dismiss="alert"Ihre Schließen-Schaltfläche hinzu, um automatisch eine Warnmeldung zum Schließen zu erhalten. Durch das Schließen einer Warnung wird sie aus dem DOM entfernt.

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

Damit Ihre Warnungen beim Schließen eine Animation verwenden, stellen Sie sicher, dass die Klassen .fadeund bereits auf sie angewendet wurden..in

Methoden

$().alert()

Lässt eine Warnung auf Click-Ereignisse auf untergeordneten Elementen lauschen, die das data-dismiss="alert"Attribut haben. (Nicht erforderlich, wenn die Auto-Initialisierung der Daten-API verwendet wird.)

$().alert('close')

Schließt eine Warnung, indem sie aus dem DOM entfernt wird. Wenn die Klassen .fadeund .infür das Element vorhanden sind, wird die Warnung ausgeblendet, bevor sie entfernt wird.

Veranstaltungen

Das Warn-Plug-in von Bootstrap macht einige Ereignisse verfügbar, um sich in die Warnfunktion einzuklinken.

$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

Schaltflächen button.js

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

Staatsbürgerlich

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

Diese Funktion ist seit v3.3.5 veraltet und wurde in v4 entfernt.

<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
  Loading state
</button>

<script>
  $('#myButton').on('click', function () {
    var $btn = $(this).button('loading')
    // business logic...
    $btn.button('reset')
  })
</script>

Einzelner Schalter

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

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
  Single toggle
</button>

Kontrollkästchen / Radio

Fügen Sie data-toggle="buttons"einem .btn-groupenthaltenden Kontrollkästchen oder Optionsfeldern Eingaben hinzu, um das Umschalten in ihren jeweiligen Stilen zu ermöglichen.

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 3
  </label>
</div>

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
  </label>
</div>

Methoden

$().button('toggle')

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

$().button('reset')

Setzt den Schaltflächenstatus zurück - tauscht den Text gegen den ursprünglichen Text aus. Diese Methode ist asynchron und kehrt zurück, bevor das Zurücksetzen tatsächlich abgeschlossen ist.

$().button(string)

Tauscht Text in einen beliebigen datendefinierten Textzustand aus.

<button type="button" id="myStateButton" data-complete-text="finished!" class="btn btn-primary" autocomplete="off">
  ...
</button>

<script>
  $('#myStateButton').on('click', function () {
    $(this).button('complete') // button text will be "finished!"
  })
</script>

Collapse.js _

Flexibles Plugin, das eine Handvoll Klassen für einfaches Umschaltverhalten verwendet.

Beispiel

Klicken Sie auf die Schaltflächen unten, um ein anderes Element über Klassenänderungen ein- und auszublenden:

• .collapseInhalte verbirgt
• .collapsingwird während der Übergänge angewendet
• .collapse.inzeigt Inhalt

Sie können einen Link mit dem hrefAttribut oder eine Schaltfläche mit dem data-targetAttribut verwenden. In beiden Fällen ist das data-toggle="collapse"erforderlich.

<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Button with data-target
</button>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

Beispiel Akkordeon

Erweitern Sie das standardmäßige Minimierungsverhalten, um ein Akkordeon mit der Panel-Komponente zu erstellen.

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <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="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <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="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <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 durch .list-groups auszutauschen.

Verwendungszweck

Das Kollaps-Plugin verwendet einige Klassen, um das schwere Heben zu bewältigen:

• .collapseverbirgt den Inhalt
• .collapse.inzeigt den Inhalt
• .collapsingwird hinzugefügt, wenn der Übergang beginnt, und entfernt, wenn er endet

Diese Klassen finden Sie in component-animations.less.

Über Datenattribute

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

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

Über JavaScript

Manuell aktivieren mit:

$('.collapse').collapse()

Optionen

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

Methoden

.collapse(options)

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

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

.collapse('toggle')

Blendet ein reduzierbares Element ein oder aus. Gibt an den Aufrufer zurück, bevor das reduzierbare Element tatsächlich angezeigt oder ausgeblendet wurde (dh bevor das shown.bs.collapseor hidden.bs.collapse-Ereignis eintritt).

.collapse('show')

Zeigt ein zusammenklappbares Element. Gibt an den Aufrufer zurück, bevor das reduzierbare Element tatsächlich angezeigt wurde (dh bevor das shown.bs.collapseEreignis eintritt).

.collapse('hide')

Blendet ein zusammenklappbares Element aus. Gibt an den Aufrufer zurück, bevor das zusammenklappbare Element tatsächlich ausgeblendet wurde (dh bevor das hidden.bs.collapseEreignis eintritt).

Veranstaltungen

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

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Karussell carousel.js

Eine Diashow-Komponente zum Durchlaufen von Elementen wie einem Karussell. Verschachtelte Karussells werden nicht unterstützt.

Beispiele

Vorherige Nächste

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <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>

  <!-- Wrapper for slides -->
  <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>

  <!-- Controls -->
  <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">Previous</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">Next</span>
  </a>
</div>

Optionale Untertitel

Fügen Sie Ihren Folien ganz einfach Beschriftungen mit dem .carousel-captionElement in einer beliebigen .item. Platzieren Sie dort fast jedes optionale HTML und es wird automatisch ausgerichtet und formatiert.

Beschriftung des ersten Objektträgers

Nulla vitae elit libero, ein pharetra augue mollis interdum.

Etikett des zweiten Objektträgers

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Etikett des dritten Objektträgers

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Vorherige Nächste

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

Verwendungszweck

Mehrere Karussells

Karussells erfordern die Verwendung eines idam äußersten Behälter (das .carousel), damit die Karussellsteuerung ordnungsgemäß funktioniert. Achten Sie beim Hinzufügen mehrerer Karussells oder beim Ändern eines Karussells iddarauf, die entsprechenden Steuerelemente zu aktualisieren.

Über Datenattribute

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

Das data-ride="carousel"Attribut wird verwendet, um ein Karussell ab dem Laden der Seite als animierend zu markieren. Es kann nicht in Kombination mit (redundanter und unnötiger) expliziter JavaScript-Initialisierung desselben Karussells verwendet werden.

Über JavaScript

Karussell manuell aufrufen mit:

$('.carousel').carousel()

Optionen

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

Methoden

.carousel(options)

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

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

.carousel('cycle')

Blättert von links nach rechts durch die Karussellelemente.

.carousel('pause')

Verhindert, dass das Karussell Artikel durchläuft.

.carousel(number)

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

.carousel('prev')

Wechselt zum vorherigen Element.

.carousel('next')

Wechselt zum nächsten Element.

Veranstaltungen

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

Beide Ereignisse haben die folgenden zusätzlichen Eigenschaften:

• direction: Die Richtung, in die das Karussell gleitet (entweder "left"oder "right").
• relatedTarget: Das DOM-Element, das als aktives Element eingefügt wird.

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

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Affix affix.js

Beispiel

Das Affix-Plugin schaltet position: fixed;ein und aus und emuliert den Effekt, der mit gefunden wurde position: sticky;. Die Unternavigation auf der rechten Seite ist eine Live-Demo des Affix-Plugins.

Verwendungszweck

Verwenden Sie das Affix-Plugin über Datenattribute oder manuell mit Ihrem eigenen JavaScript. In beiden Situationen müssen Sie CSS für die Positionierung und Breite Ihres angebrachten Inhalts bereitstellen.

Hinweis: Verwenden Sie das Affix-Plugin aufgrund eines Safari-Rendering-Fehlers nicht für ein Element, das in einem relativ positionierten Element enthalten ist, z. B. einer gezogenen oder gedrückten Spalte .

Positionierung über CSS

Das Affix-Plugin schaltet zwischen drei Klassen um, die jeweils einen bestimmten Zustand darstellen: .affix, .affix-top, und .affix-bottom. Sie müssen die Stile, mit Ausnahme von position: fixed;on .affix, für diese Klassen selbst (unabhängig von diesem Plugin) bereitstellen, um die tatsächlichen Positionen zu behandeln.

So funktioniert das Affix-Plugin:

1. Zu Beginn fügt das Plugin hinzu .affix-top, um anzuzeigen, dass sich das Element an seiner obersten Position befindet. An dieser Stelle ist keine CSS-Positionierung erforderlich.
2. Wenn Sie an dem Element vorbeiscrollen, das Sie anbringen möchten, sollte das eigentliche Anbringen ausgelöst werden. Hier wird .affixersetzt .affix-topund position: fixed;gesetzt (bereitgestellt von Bootstrap's CSS).
3. Wenn ein unterer Versatz definiert ist, sollte das Scrollen darüber hinaus durch ersetzt .affixwerden .affix-bottom. Da Offsets optional sind, müssen Sie zum Festlegen eines Offsets das entsprechende CSS festlegen. Fügen Sie in diesem Fall position: absolute;bei Bedarf hinzu. Das Plugin verwendet das Datenattribut oder die JavaScript-Option, um zu bestimmen, wo das Element von dort aus positioniert werden soll.

Befolgen Sie die obigen Schritte, um Ihr CSS für eine der folgenden Verwendungsoptionen festzulegen.

Über Datenattribute

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

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

Über JavaScript

Rufen Sie das Affix-Plugin über JavaScript auf:

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

Optionen

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

Methoden

.affix(options)

Aktiviert Ihren Inhalt als angehängten Inhalt. Akzeptiert optionale Optionen object.

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

.affix('checkPosition')

Berechnet den Status des Affixes basierend auf den Abmessungen, der Position und der Bildlaufposition der relevanten Elemente neu. Die Klassen .affix, .affix-top, und .affix-bottomwerden dem angehängten Inhalt entsprechend dem neuen Status hinzugefügt oder daraus entfernt. Diese Methode muss immer dann aufgerufen werden, wenn die Abmessungen des angehängten Inhalts oder des Zielelements geändert werden, um die korrekte Positionierung des angehängten Inhalts sicherzustellen.

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

Veranstaltungen

Das Affix-Plug-in von Bootstrap stellt einige Ereignisse bereit, um sich in die Affix-Funktionalität einzuklinken.