Iwwersiicht

Individuell oder zesummegesat

Plugins kënnen individuell abegraff ginn (mat Bootstrap seng individuell *.jsDateien), oder all op eemol (benotzen bootstrap.jsoder de minifizéiert bootstrap.min.js).

Daten Attributer

Dir kënnt all Bootstrap Plugins reng duerch d'Markup API benotzen ouni eng eenzeg Zeil vu JavaScript ze schreiwen. Dëst ass Bootstrap's éischtklasseg API a sollt Är éischt Iwwerleeung sinn wann Dir e Plugin benotzt.

Dat gesot, an e puer Situatiounen kann et wënschenswäert sinn dës Funktionalitéit auszeschalten. Dofir bidde mir och d'Fäegkeet fir d'Datenattributer API auszeschalten andeems Dir all Eventer op dem Dokument mam Numm ofgeschloss huet data-api. Dëst gesäit esou aus:

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

Alternativ, fir e spezifesche Plugin ze zielen, gitt just den Numm vum Plugin als Nummraum zesumme mam Data-APi Nummraum wéi dëst:

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

Programmatesch API

Mir gleewen och datt Dir sollt fäeg sinn all Bootstrap Plugins reng duerch d'JavaScript API ze benotzen. All ëffentlech APIen sinn eenzel, chainable Methoden, a gitt d'Kollektioun zréck.

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

All Methode sollen en optionalen Optiounsobjekt akzeptéieren, eng String déi eng bestëmmte Method zielt, oder näischt (wat e Plugin mam Standardverhalen initiéiert):

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

All Plugin weist och säi roude Konstruktor op enger ConstructorImmobilie aus $.fn.popover.Constructor:. Wann Dir eng bestëmmte Plugin Instanz wëllt kréien, recuperéieren se direkt vun engem Element $('[rel="popover"]').data('popover'):.

Default Astellunge

Dir kënnt d'Standardastellunge fir e Plugin änneren andeems Dir den Constructor.DEFAULTSObjet vum Plugin ännert:

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

Kee Konflikt

Heiansdo ass et néideg Bootstrap Plugins mat anere UI Kaderen ze benotzen. An dësen Ëmstänn kënnen Nummraumkollisiounen heiansdo optrieden. Wann dat passéiert, kënnt Dir .noConflictde Plugin uruffen, deen Dir wëllt de Wäert zrécksetzen.

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

Evenementer

Bootstrap bitt personaliséiert Eventer fir déi meescht Plugins eenzegaarteg Aktiounen. Allgemeng kommen dës an enger Infinitiv- a Vergaangenheetsform - wou den Infinitiv (ex. show) am Ufank vun engem Event ausgeléist gëtt, a seng Partizipform (ex. shown) ausgeléist gëtt beim Ofschloss vun enger Handlung.

Zënter 3.0.0 sinn all Bootstrap-Evenementer mam Numm ënnerdeelt.

All infinitiv Eventer bidden preventDefaultFunktionalitéit. Dëst bitt d'Fäegkeet d'Ausféierung vun enger Aktioun ze stoppen ier se ufänkt.

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

Versioun Zuelen

D'Versioun vun jiddereng vun Bootstrap's jQuery Plugins kann iwwer d' VERSIONEegeschafte vum Konstruktor vum Plugin zougänglech sinn. Zum Beispill, fir den Tooltip Plugin:

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

Keng speziell Réckfall wann JavaScript behënnert ass

Bootstrap's Plugins falen net besonnesch graziéis zréck wann JavaScript deaktivéiert ass. Wann Dir Iech ëm d'Benotzererfarung an dësem Fall këmmert, benotzt <noscript>fir d'Situatioun z'erklären (a wéi Dir JavaScript erëm aktivéiert) fir Är Benotzer, an / oder Är eege personaliséiert Réckfall derbäi.

Iwwergäng transition.js

Iwwer Iwwergäng

Fir einfach Iwwergangseffekter, eng transition.jsKéier niewent deenen anere JS Dateien enthalen. Wann Dir déi kompiléiert (oder minifizéiert) benotzt bootstrap.js, ass et net néideg dëst matzemaachen - et ass schonn do.

Wat dobannen ass

Transition.js ass e Basishëllefer fir transitionEndEventer wéi och en CSS Iwwergangsemulator. Et gëtt vun den anere Plugins benotzt fir no CSS Iwwergangssupport ze kontrolléieren an hängend Iwwergäng ze fangen.

Iwwergäng auszeschalten

Iwwergänge kënne weltwäit behënnert ginn mat dem folgenden JavaScript-Snippet, dee muss kommen nodeems transition.js(oder bootstrap.jsoder bootstrap.min.js, wéi de Fall kann) gelueden sinn:

$.support.transition = false

Modal modal.js

Modale si streamlined, awer flexibel, Dialogprompts mat der minimaler erfuerderter Funktionalitéit a Smart Defaults.

Wéinst wéi HTML5 seng Semantik definéiert, huet den autofocusHTML Attribut keen Effekt a Bootstrap Modal. Fir deeselwechten Effekt z'erreechen, benotzt e puer personaliséiert JavaScript:

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

Beispiller

Statescht Beispill

E rendered Modal mat Header, Kierper a Set vun Aktiounen am Fousszeil.

<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

Wiesselt e Modal iwwer JavaScript andeems Dir op de Knäppchen hei drënner klickt. Et rutscht erof a verschwannen vun uewen op der Säit.

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

Optional Gréissten

Modaler hunn zwou fakultativ Gréissten, verfügbar iwwer Modifikatiounsklassen fir op engem plazéiert ze ginn .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>

Ewechzehuelen Animatioun

Fir Modaler déi einfach erschéngen anstatt ze verschwannen fir ze kucken, läscht d' .fadeKlass aus Ärem Modal Markup.

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

Benotzt de Gittersystem

Fir e Virdeel vun der Bootstrap Gitter System bannent engem Modal ze profitéieren, just Nest .rows bannent der .modal-bodyan dann déi normal Gitter System Klassen benotzen.

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

Variéierend modalen Inhalt baséiert op Ausléiserknäppchen

Hutt Dir eng Rëtsch Knäppercher déi all déiselwecht Modal ausléisen, just mat liicht ënnerschiddlechen Inhalter? Benotzt event.relatedTargetan HTML data-*Attributer (méiglecherweis iwwer jQuery ) fir den Inhalt vun der Modal ze variéieren jee no wéi ee Knäppchen geklickt gouf. Kuckt d'Modal Eventer Dokumenter fir Detailer iwwer relatedTarget,

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

Benotzung

De modale Plugin wiesselt Äre verstoppte Inhalt op Ufro, iwwer Datenattributer oder JavaScript. Et füügt .modal-openoch un <body>d'Standard Scrollverhalen z'iwwerschreiden a generéiert e .modal-backdropfir e Klickberäich ze bidden fir ugewisen Modaler ze entloossen wann Dir ausserhalb vum Modal klickt.

Via daten Attributer

Aktivéiert e Modal ouni JavaScript ze schreiwen. Setzt data-toggle="modal"op e Controllerelement, wéi e Knäppchen, zesumme mat engem data-target="#foo"oder href="#foo"fir e spezifesche Modal ze zielen fir ze wiesselen.

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

Iwwer JavaScript

Rufft e Modal mat ID myModalmat enger eenzeger Zeil vu JavaScript:

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

Optiounen

Optiounen kënnen iwwer Datenattributer oder JavaScript weidergeleet ginn. Fir Datenattributer, fügen d'Optiounsnumm un data-, wéi an data-backdrop="".

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

Methoden

.modal(options)

Aktivéiert Ären Inhalt als Modal. Akzeptéiert eng fakultativ Optiounen object.

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

.modal('toggle')

Manuell wiesselt e Modal. Gëtt zréck op den Uruffer ier de Modal tatsächlech gewisen oder verstoppt goufshown.bs.modal ( dh ier den hidden.bs.modalEvent geschitt ass).

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

.modal('show')

Manuell mécht e Modal op. Gitt zréck op den Uruffer ier de Modal tatsächlech gewisen gouf (dh ier d' shown.bs.modalEvenement geschitt ass).

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

.modal('hide')

Manuell verstoppt e Modal. Gitt zréck op den Uruffer ier de Modal tatsächlech verstoppt ass (dh ier d' hidden.bs.modalEvenement geschitt ass).

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

.modal('handleUpdate')

Neijustéiert d'Positioun vum Modal fir eng Scrollbar ze entgéintwierken am Fall wou een erschéngt, wat de Modal no lénks géif sprangen.

Nëmme gebraucht wann d'Héicht vum Modal ännert wärend et op ass.

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

Evenementer

Dem Bootstrap seng modal Klass weist e puer Eventer fir an d'modal Funktionalitéit unzehaken.

All Modal Eventer ginn op de Modal selwer geschoss (dh op der <div class="modal">).

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

Dropdowns dropdown.js

Beispiller

Füügt Dropdown-Menüe fir bal alles mat dësem einfache Plugin, och d'Navbar, Tabs a Pillen.

An enger navbar

Bannent Pëllen

Benotzung

Iwwer Dateattributer oder JavaScript wiesselt den Dropdown-Plugin verstoppt Inhalt (Dropdown-Menüen) andeems Dir d' .openKlass op den Elterelëscht Element wiesselt.

Op mobilen Apparater, d'Ouverture vun engem Dropdown bäidréit en .dropdown-backdropals Tapberäich fir Dropdown-Menüen ofzeschléissen wann Dir ausserhalb vum Menü tippt, e Fuerderung fir richteg iOS Support. Dëst bedeit datt de Wiessel vun engem oppenen Dropdown-Menü op en aneren Dropdown-Menü en extra Tipp um Handy erfuerdert.

Bemierkung: D' data-toggle="dropdown"Attribut gëtt ugewisen fir Dropdown-Menüen op engem Applikatiounsniveau zouzemaachen, also ass et eng gutt Iddi et ëmmer ze benotzen.

Via daten Attributer

Füügt data-toggle="dropdown"e Link oder Knäppchen fir en Dropdown ze wiesselen.

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

Fir URLen intakt mat Linkknäpper ze halen, benotzt d' data-targetAttribut anstatt 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>

Iwwer JavaScript

Rufft d'Dropdowns iwwer JavaScript un:

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

Optiounen

Keen

Methoden

$().dropdown('toggle')

Wiesselt den Dropdown-Menü vun enger bestëmmter Navbar oder Tabbed Navigatioun.

Evenementer

All Dropdown-Evenementer ginn op d' .dropdown-menuElteren-Element gebrannt.

All Dropdown-Evenementer hunn e relatedTargetBesëtz, deem säi Wäert dat wiesselend Ankerelement ass.

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

ScrollSpy scrollspy.js

Beispill an navbar

De ScrollSpy Plugin ass fir automatesch Aktualiséierung vun Nav Ziler baséiert op Scroll Positioun. Scroll d'Gebitt ënner der Navbar a kuckt d'aktiv Klass änneren. D'Dropdown Ënnerartikele ginn och markéiert.

Benotzung

Verlaangt relativ Positionéierung

Egal wéi d'Implementéierungsmethod, Scrollspy erfuerdert d'Benotzung vum position: relative;Element op deem Dir spionéiert. An de meeschte Fäll ass dëst den <body>. Wann scrollspying op Elementer aner wéi der <body>, ginn sécher eng heightFormatioun an overflow-y: scroll;applizéiert.

Via daten Attributer

Fir einfach scrollspy Verhalen op Är Topbar Navigatioun ze addéieren data-spy="scroll", füügt d'Element un op déi Dir wëllt spionéieren (meeschtens wier dëst de <body>). Füügt dann den data-targetAttribut mat der ID oder der Klass vum Elterendeel vun all Bootstrap .navKomponent un.

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>

Iwwer JavaScript

Nodeems Dir position: relative;Är CSS bäigefüügt hutt, rufft de Scrollspy iwwer JavaScript:

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

Methoden

.scrollspy('refresh')

Wann Dir Scrollspy benotzt a Verbindung mat der Zousatz oder Ewechhuele vun Elementer aus der DOM, musst Dir d'Erfrëschungsmethod sou nennen:

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

Optiounen

Optiounen kënnen iwwer Datenattributer oder JavaScript weidergeleet ginn. Fir Datenattributer, fügen d'Optiounsnumm un data-, wéi an data-offset="".

Evenementer

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

Togglable Tabs tab.js

Beispill Tabs

Füügt séier, dynamesch Tab Funktionalitéit fir den Iwwergank duerch Paneele vum lokalen Inhalt, och iwwer Dropdown-Menüen. Nested Tabs ginn net ënnerstëtzt.

Benotzung

Aktivéiert Tabbar Tabs iwwer JavaScript (all Tab muss individuell aktivéiert ginn):

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

Dir kënnt eenzel Tabs op verschidde Manéieren aktivéieren:

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

Markup

Dir kënnt eng Tab oder Pille Navigatioun aktivéieren ouni JavaScript ze schreiwen andeems Dir einfach spezifizéiert data-toggle="tab"oder data-toggle="pill"op en Element. Wann Dir de Klassen an op d'Tab bäidréit , wäert de Bootstrap Tab Styling applizéiert ginn , während d'Addéieren vun de Klassen a navPille Styling gëllen .nav-tabsulnavnav-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

Fir d'Tabs ze verschwannen, füügt .fadeall .tab-pane. Déi éischt Tab-Säit muss och .inden initialen Inhalt siichtbar maachen.

<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

Aktivéiert e Tabelement an Inhaltsbehälter. Tab soll entweder en data-targetoder e hrefgezielt e Container Node am DOM hunn. An den uewe genannte Beispiller sinn d'Tabs d' <a>S mat data-toggle="tab"Attributer.

.tab('show')

Wielt de gegebene Tab a weist säin assoziéierten Inhalt. All aner Tab, déi virdru gewielt gouf, gëtt net ausgewielt a säin assoziéierten Inhalt ass verstoppt. Gëtt zréck op den Uruffer ier d'Tab-Pane tatsächlech gewisen gouf (dh ier d' shown.bs.tabEvenement geschitt ass).

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

Evenementer

Wann Dir en neien Tab weist, brennen d'Evenementer an der folgender Uerdnung:

1. hide.bs.tab(op der aktueller aktiver Tab)
2. show.bs.tab(op der Tab ze weisen)
3. hidden.bs.tab(op der viregter aktiver Tab, déi selwecht wéi fir den hide.bs.tabEvent)
4. shown.bs.tab(op der nei-aktive just-gewise Tab, déi selwecht wéi fir den show.bs.tabEvent)

Wann keng Tab schonn aktiv war, da ginn d' hide.bs.taban hidden.bs.tabEventer net ofgeschaaft.

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

Tooltips tooltip.js

Inspiréiert vum exzellente jQuery.tipsy Plugin geschriwwen vum Jason Frame; Tooltips sinn eng aktualiséiert Versioun, déi net op Biller vertrauen, CSS3 fir Animatiounen benotzen, an Datenattributer fir lokal Titellagerung.

Tooltips mat Null-Längt Titelen ginn ni ugewisen.

Beispiller

Hover iwwer d'Links hei drënner fir Tooltipps ze gesinn:

Statesch Tooltip

Véier Optiounen sinn verfügbar: uewen, riets, ënnen a lénks ausgeriicht.

Véier 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()
})

Benotzung

Den Tooltip Plugin generéiert Inhalt a Markup op Ufro, a setzt als Standard Tooltip no hirem Ausléiserelement.

Ausléiser den Tooltip iwwer JavaScript:

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

Markup

Déi erfuerderlech Markup fir e Tooltip ass nëmmen en dataAttribut an titleam HTML Element wëllt Dir e Tooltip hunn. De generéierte Markup vun engem Tooltip ass zimmlech einfach, awer et erfuerdert eng Positioun (par défaut, topvum Plugin gesat).

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

Optiounen

Optiounen kënnen iwwer Datenattributer oder JavaScript weidergeleet ginn. Fir Datenattributer, fügen d'Optiounsnumm un data-, wéi an data-animation="".

Methoden

$().tooltip(options)

Befestegt e Tooltip-Handler op eng Elementsammlung.

.tooltip('show')

Entdeckt den Tooltip vun engem Element. Gitt zréck op den Uruffer ier den Tooltip tatsächlech gewisen gouf (dh ier d' shown.bs.tooltipEvenement geschitt ass). Dëst gëtt als "manuell" Ausléisung vum Tooltip ugesinn. Tooltips mat Null-Längt Titelen ginn ni ugewisen.

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

.tooltip('hide')

Verstoppt den Tooltip vun engem Element. Gitt zréck op den Uruffer ier den Tooltip tatsächlech verstoppt gouf (dh ier d' hidden.bs.tooltipEvenement geschitt ass). Dëst gëtt als "manuell" Ausléisung vum Tooltip ugesinn.

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

.tooltip('toggle')

Wiesselt den Tooltip vun engem Element. Gitt zréck op den Uruffer ier den Tooltip tatsächlech gewisen oder verstoppt goufshown.bs.tooltip ( dh ier den hidden.bs.tooltipEvent geschitt ass). Dëst gëtt als "manuell" Ausléisung vum Tooltip ugesinn.

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

.tooltip('destroy')

Verstoppt an zerstéiert den Tooltip vun engem Element. Tooltipps déi Delegatioun benotzen (déi mat der selectorOptioun erstallt ginn ) kënnen net individuell op Descendant Trigger Elementer zerstéiert ginn.

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

Evenementer

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

Popovers popover.js

Füügt kleng Iwwerlagerunge vum Inhalt, wéi déi um iPad, un all Element fir sekundär Informatioun ze wunnen.

Popovers deenen hiren Titel an den Inhalt null Längt sinn, ginn ni ugewisen.

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

Beispiller

Statesch Popover

Véier Optiounen sinn verfügbar: uewen, riets, ënnen a lénks ausgeriicht.

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>

Véier 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>

Entlooss beim nächste Klick

Benotzt den focusAusléiser fir Popovers op de nächste Klick ze entloossen deen de Benotzer mécht.

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

Benotzung

Aktivéiert Popovers iwwer JavaScript:

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

Optiounen

Optiounen kënnen iwwer Datenattributer oder JavaScript weidergeleet ginn. Fir Datenattributer, fügen d'Optiounsnumm un data-, wéi an data-animation="".

Methoden

$().popover(options)

Initializes Popovers fir eng Element Kollektioun.

.popover('show')

Enthüllt de Popover vun engem Element. Gitt zréck op den Uruffer ier de Popover tatsächlech gewisen gouf (dh ier d' shown.bs.popoverEvenement geschitt ass). Dëst gëtt als "manuell" Ausléisung vum Popover ugesinn. Popovers deenen hiren Titel an den Inhalt null Längt sinn, ginn ni ugewisen.

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

.popover('hide')

Verstoppt de Popover vun engem Element. Zréck op den Uruffer ier de Popover tatsächlech verstoppt gouf (dh ier d' hidden.bs.popoverEvenement geschitt ass). Dëst gëtt als "manuell" Ausléisung vum Popover ugesinn.

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

.popover('toggle')

Wiesselt de Popover vun engem Element. Zréck op den Uruffer ier de Popover tatsächlech gewisen oder verstoppt goufshown.bs.popover ( dh ier den hidden.bs.popoverEvent geschitt ass). Dëst gëtt als "manuell" Ausléisung vum Popover ugesinn.

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

.popover('destroy')

Verstoppt an zerstéiert de Popover vun engem Element. Popovers déi Delegatioun benotzen (déi mat der selectorOptioun erstallt ginn ) kënnen net individuell op Nofolger Trigger Elementer zerstéiert ginn.

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

Evenementer

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

Alarmmeldungen alert.js

Beispill Alarmer

Füügt d'Entloossfunktioun un all Alarmmeldung mat dësem Plugin.

Wann Dir e .closeKnäppchen benotzt, muss et dat éischt Kand vun der sinn .alert-dismissiblea keen Textinhalt däerf virun der Markup kommen.

Benotzung

Füügt just data-dismiss="alert"un Äre Zoumaache Knäppchen fir automatesch eng Alarm Zoumaache Funktionalitéit ze ginn. Zoumaachen vun enger Alarm läscht se aus der DOM.

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

Fir Är Alarmer Animatioun ze benotzen wann se zoumaachen, gitt sécher datt se d' .fadean hunn.in Klassen scho fir si applizéiert hunn.

Methoden

$().alert()

Maacht eng Alarm no Klickevenementer op Nokommen Elementer déi den data-dismiss="alert"Attribut hunn. (Net néideg wann Dir d'Auto-Initialiséierung vum Data-APi benotzt.)

$().alert('close')

Schléisst eng Alarm andeems se se aus der DOM erofhuelen. Wann d' .fadeKlassen .inum Element präsent sinn, wäert d'Alarm verschwannen ier se ewechgeholl gëtt.

Evenementer

Bootstrap's Alarm Plugin exponéiert e puer Eventer fir an d'Alarmfunktionalitéit unzekoppelen.

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

Knäppercher button.js

Maacht méi mat Knäppercher. Kontroll Knäppchen Staaten oder Gruppe vu Knäppercher erstellen fir méi Komponenten wéi Toolbaren.

Staatlech

Füügt data-loading-text="Loading..."fir e Luedezoustand op engem Knäppchen ze benotzen.

Dës Fonktioun ass ofgeschaaft zënter v3.3.5 a gouf a v4 geläscht.

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

Eenzel Këscht

Füügt data-toggle="button"fir den Toggling op engem eenzege Knäppchen z'aktivéieren.

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

Checkbox / Radio

Füügt data-toggle="buttons"eng .btn-groupenthale Checkbox oder Radio-Inputen un fir d'Toggling an hire jeweilege Stiler z'erméiglechen.

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

Wiesselt Push Staat. Gëtt de Knäppchen d'Erscheinung datt et aktivéiert gouf.

$().button('reset')

Reset Knäppchen Staat - wiesselt Text op Originaltext. Dës Method ass asynchron a geet zréck ier de Reset tatsächlech fäerdeg ass.

$().button(string)

Tauscht Text an all daten definéierten Textzoustand.

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

Zesummebroch collapse.js

Flexibele Plugin deen eng Handvoll Klassen benotzt fir einfach ze wiesselen Verhalen.

Beispill

Klickt op d'Knäppercher hei ënnen fir en anert Element iwwer Klassenännerungen ze weisen an ze verstoppen:

• .collapseverstoppt Inhalt
• .collapsinggëtt während Iwwergäng applizéiert
• .collapse.inweist Inhalt

Dir kënnt e Link mam hrefAttribut benotzen, oder e Knäppchen mam data-targetAttribut. A béide Fäll data-toggle="collapse"ass et néideg.

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

Akkordeon Beispill

Verlängert de Standard Zesummebroch Verhalen fir en Akkordeon mat der Panelkomponent ze kreéieren.

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

Et ass och méiglech .panel-bodys mat .list-groups auszetauschen.

Benotzung

Den Zesummebroch Plugin benotzt e puer Klassen fir déi schwéier Lift ze handhaben:

• .collapseverstoppt den Inhalt
• .collapse.inweist den Inhalt
• .collapsinggëtt bäigefüügt wann den Iwwergank ufänkt, a geläscht wann et fäerdeg ass

Dës Klassen kënnen an fonnt ginn component-animations.less.

Via daten Attributer

Füügt einfach data-toggle="collapse"an en data-targetElement un fir automatesch d'Kontroll vun engem zesummeklappbare Element ze ginn. D' data-targetAttribut akzeptéiert e CSS Selektor fir den Zesummebroch anzebezéien. Vergewëssert Iech d'Klass collapsezum zesummeklappbare Element ze addéieren. Wann Dir wëllt datt et als Standard opmaacht, füügt déi zousätzlech Klass in.

Fir Akkordeonähnlech Gruppemanagement zu enger zesummeklappbarer Kontroll ze addéieren, füügt d'Datenattribut data-parent="#selector". Kuckt d'Demo fir dëst an Aktioun ze gesinn.

Iwwer JavaScript

Aktivéiert manuell mat:

$('.collapse').collapse()

Optiounen

Optiounen kënnen iwwer Datenattributer oder JavaScript weidergeleet ginn. Fir Datenattributer, fügen d'Optiounsnumm un data-, wéi an data-parent="".

Methoden

.collapse(options)

Aktivéiert Ären Inhalt als zesummeklappbar Element. Akzeptéiert eng fakultativ Optiounen object.

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

.collapse('toggle')

Wiesselt en zesummeklappbare Element fir ze weisen oder verstoppt. Gitt zréck op den Uruffer ier dat zesummeklappbare Element tatsächlech gewisen oder verstoppt gouf (dh ier d' Evenement shown.bs.collapseoder hidden.bs.collapsegeschitt).

.collapse('show')

Weist en zesummeklappbare Element. Zréck op den Uruffer ier dat zesummeklappbare Element tatsächlech gewisen gouf (dh ier d' shown.bs.collapseEvenement geschitt ass).

.collapse('hide')

Verstoppt en zesummeklappbare Element. Gitt zréck op den Uruffer ier dat zesummeklappbare Element tatsächlech verstoppt gouf (dh ier d' hidden.bs.collapseEvenement geschitt ass).

Evenementer

Dem Bootstrap seng Zesummebroch Klass weist e puer Eventer fir an d'Zesummefunktionalitéit unzehaken.

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

Karussell carousel.js

Eng Slideshow Komponent fir Vëlo duerch Elementer, wéi e Karussell. Nestéiert Karussell ginn net ënnerstëtzt.

Beispiller

Virdrun Nächst

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

Optional Ënnerschrëften

Füügt Ënnerschrëften op Är Rutschen einfach mat dem .carousel-captionElement an all .item. Plaz just iwwer all optional HTML dobannen an et gëtt automatesch ausgeriicht a formatéiert.

Éischt Rutsch Label

Nulla vitae elit libero, a pharetra augue mollis interdum.

Zweet Rutsch Label

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Drëtt Rutsch Label

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Virdrun Nächst

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

Benotzung

Multiple Karussell

Karussell verlaangen d'Benotzung vun engem idop de baussenzege Container (der .carousel) fir Karussel Kontrollen richteg ze fonktionnéieren. Wann Dir méi Karussell bäidréit, oder wann Dir eng Karussell ännert id, gitt sécher déi entspriechend Kontrollen ze aktualiséieren.

Via daten Attributer

Benotzt Datenattributer fir d'Positioun vum Karussell einfach ze kontrolléieren. data-slideakzeptéiert d'Schlësselwierder prevoder next, déi d'Rutschpositioun relativ zu senger aktueller Positioun ännert. Alternativ benotzt data-slide-tofir e roude Rutschindex un de Karussell ze passéieren data-slide-to="2", deen d'Rutschplaz op e bestëmmten Index verännert0 .

Den data-ride="carousel"Attribut gëtt benotzt fir e Karussell als Animatioun ze markéieren, ugefaange bei der Lueden vun der Säit. Et kann net a Kombinatioun mat (redundant an onnéideg) explizit JavaScript Initialiséierung vun der selwechter Karussell benotzt ginn.

Iwwer JavaScript

Call Karussell manuell mat:

$('.carousel').carousel()

Optiounen

Optiounen kënnen iwwer Datenattributer oder JavaScript weidergeleet ginn. Fir Datenattributer, fügen d'Optiounsnumm un data-, wéi an data-interval="".

Methoden

.carousel(options)

Initialiséiert de Karussell mat engem fakultativen Optiounen objecta fänkt mam Vëlo duerch Elementer un.

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

.carousel('cycle')

Zyklen duerch d'Karussellartikele vu lénks op riets.

.carousel('pause')

Stoppt de Karussell aus dem Vëlo duerch Elementer.

.carousel(number)

Zyklen de Karussell op e bestëmmte Frame (0 baséiert, ähnlech wéi eng Array).

.carousel('prev')

Zyklen op dat viregt Element.

.carousel('next')

Zyklen op den nächsten Element.

Evenementer

D'Bootstrap Karussell Klass weist zwee Eventer fir d'Karussell Funktionalitéit unzehaken.

Béid Eventer hunn déi folgend zousätzlech Eegeschaften:

• direction: D'Richtung an där de Karussell rutscht (entweder "left"oder "right").
• relatedTarget: Den DOM-Element deen als aktiven Element op d'Plaz gerutscht gëtt.

All Karussellevenementer ginn op de Karussell selwer geschoss (dh op der <div class="carousel">).

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

Affix affix.js

Beispill

Den Affix Plugin schalt position: fixed;op an aus, emuléiert den Effekt fonnt mat position: sticky;. D'Subnavigatioun op der rietser ass eng Live Demo vum Affix Plugin.

Benotzung

Benotzt den Affix Plugin iwwer Datenattributer oder manuell mat Ärem eegene JavaScript. A béide Situatiounen musst Dir CSS fir d'Positioun an d'Breet vun Ärem befestegten Inhalt ubidden.

Notiz: Benotzt den Affix Plugin net op en Element dat an engem relativ positionéierten Element enthale gëtt, sou wéi eng gezunn oder gedréckt Kolonn, wéinst engem Safari Rendering Käfer .

Positionéierung iwwer CSS

Den Affix Plugin wiesselt tëscht dräi Klassen, déi all e bestëmmte Staat representéieren: .affix, .affix-top, an .affix-bottom. Dir musst d'Stiler ubidden, mat Ausnam vun position: fixed;op .affix, fir dës Klassen selwer (onofhängeg vun dësem Plugin) fir déi aktuell Positiounen ze handhaben.

Hei ass wéi den Affix Plugin funktionnéiert:

1. Fir unzefänken, addt de Plugin.affix-top fir unzeginn datt d'Element op senger héchster Positioun ass. Zu dësem Zäitpunkt ass keng CSS Positionéierung erfuerderlech.
2. Scrollen laanscht d'Element dat Dir wëllt befestegt sollt déi aktuell Befestigung ausléisen. Dëst ass wou .affixersetzt .affix-topa setzt position: fixed;(vum Bootstrap's CSS geliwwert).
3. Wann en ënneschten Offset definéiert ass, scrolling laanscht et soll mat ersat .affixginn .affix-bottom. Zënter Offsets fakultativ sinn, erfuerdert Dir de passende CSS ze setzen. An dësem Fall, addéiere position: absolute;wann néideg. De Plugin benotzt d'Datenattributer oder d'JavaScript-Optioun fir ze bestëmmen wou d'Element vun do aus soll positionéieren.

Follegt déi uewe genannte Schrëtt fir Är CSS fir eng vun den Benotzungsoptiounen hei ënnen ze setzen.

Via daten Attributer

Fir einfach Affix Verhalen op all Element ze addéieren, füügt just data-spy="affix"un dat Element op deen Dir wëllt spionéieren. Benotzt Offsets fir ze definéieren wéini de Pinning vun engem Element wiesselt.

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

Iwwer JavaScript

Rufft den Affix Plugin iwwer JavaScript un:

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

Optiounen

Optiounen kënnen iwwer Datenattributer oder JavaScript weidergeleet ginn. Fir Datenattributer, fügen d'Optiounsnumm un data-, wéi an data-offset-top="200".

Methoden

.affix(options)

Aktivéiert Ären Inhalt als befestegt Inhalt. Akzeptéiert eng fakultativ Optiounen object.

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

.affix('checkPosition')

Recalculates den Zoustand vun der Affix baséiert op der Dimensiounen, Positioun, a Scroll Positioun vun den zoustännegen Elementer. D' .affix, .affix-top, a .affix-bottomKlassen ginn derbäigesat oder aus dem befestegten Inhalt geläscht no dem neie Staat. Dës Method muss genannt ginn wann ëmmer d'Dimensioune vum befestegten Inhalt oder vum Zilelement geännert ginn, fir déi korrekt Positionéierung vum befestegten Inhalt ze garantéieren.

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

Evenementer

Bootstrap's Affix Plugin exponéiert e puer Eventer fir an Affix Funktionalitéit ze hooken.