Prehľad

Individuálne alebo zostavené

Pluginy môžu byť zahrnuté jednotlivo (pomocou jednotlivých *.jssúborov Bootstrapu) alebo všetky naraz (pomocou bootstrap.jsalebo minifikovaného súboru bootstrap.min.js).

Atribúty údajov

Všetky doplnky Bootstrap môžete používať výlučne prostredníctvom značkovacieho API bez toho, aby ste museli písať jediný riadok JavaScriptu. Toto je prvotriedne API Bootstrapu a pri používaní doplnku by ste ho mali najprv zvážiť.

To znamená, že v niektorých situáciách môže byť žiaduce túto funkciu vypnúť. Preto poskytujeme aj možnosť deaktivovať API dátových atribútov zrušením väzby všetkých udalostí v dokumente s priestorom názvov data-api. Toto vyzerá takto:

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

Ak chcete zacieliť na konkrétny doplnok, stačí zahrnúť názov doplnku ako priestor názvov spolu s priestorom názvov data-api, ako je tento:

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

Programové rozhranie API

Tiež sa domnievame, že by ste mali mať možnosť používať všetky doplnky Bootstrap výhradne cez JavaScript API. Všetky verejné rozhrania API sú jednoduché, reťaziteľné metódy a vracajú kolekciu, podľa ktorej sa koná.

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

Všetky metódy by mali akceptovať voliteľný objekt volieb, reťazec, ktorý je zacielený na konkrétnu metódu, alebo nič (čo spustí doplnok s predvoleným správaním):

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

Každý doplnok tiež odhaľuje svoj pôvodný konštruktor na Constructorvlastnosti: $.fn.popover.Constructor. Ak chcete získať konkrétnu inštanciu doplnku, získajte ju priamo z prvku: $('[rel="popover"]').data('popover').

Predvolené nastavenia

Predvolené nastavenia doplnku môžete zmeniť úpravou Constructor.DEFAULTSobjektu doplnku:

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

Žiadny konflikt

Niekedy je potrebné použiť Bootstrap pluginy s inými UI frameworkami. Za týchto okolností môže občas dôjsť ku kolíziám menného priestoru. Ak sa tak stane, môžete zavolať .noConflictna doplnok, ktorého hodnotu chcete vrátiť.

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

Diania

Bootstrap poskytuje vlastné udalosti pre väčšinu jedinečných akcií doplnkov. Vo všeobecnosti sú vo forme infinitívu a minulého príčastia – kde infinitív (napr. show) sa spúšťa na začiatku udalosti a jeho minulá forma príčastia (napr. shown) sa spúšťa pri dokončení akcie.

Od 3.0.0 majú všetky udalosti Bootstrap menný priestor.

Všetky nekonečné udalosti poskytujú preventDefaultfunkčnosť. To poskytuje možnosť zastaviť vykonávanie akcie pred jej spustením.

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

Dezinfekčný prostriedok

Popisy a kontextové okná používajú náš vstavaný dezinfekčný prostriedok na dezinfekciu možností, ktoré akceptujú HTML.

Predvolená whiteListhodnota je nasledovná:

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

Ak chcete k tejto predvolenej hodnote pridať nové hodnoty whiteList, môžete urobiť nasledovné:

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

// To allow table elements
myDefaultWhiteList.table = []

// To allow td elements and data-option attributes on td elements
myDefaultWhiteList.td = ['data-option']

// You can push your custom regex to validate your attributes.
// Be careful about your regular expressions being too lax
var myCustomRegex = /^data-my-app-[\w-]+/
myDefaultWhiteList['*'].push(myCustomRegex)

Ak chcete obísť náš dezinfekčný prostriedok, pretože uprednostňujete používanie špeciálnej knižnice, napríklad DOMPurify , mali by ste urobiť nasledovné:

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

Čísla verzií

K verzii každého z doplnkov jQuery Bootstrapu je možné pristupovať prostredníctvom VERSIONvlastnosti konštruktora doplnku. Napríklad pre doplnok tooltip:

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

Pri zakázanom JavaScripte žiadne špeciálne záložné riešenia

Doplnky Bootstrapu neklesajú obzvlášť elegantne, keď je JavaScript zakázaný. Ak vám v tomto prípade záleží na používateľskej skúsenosti, použite <noscript>na vysvetlenie situácie (a ako znovu povoliť JavaScript) svojim používateľom a/alebo pridajte svoje vlastné záložné.

Transitions transition.js

O prechodoch

Pre jednoduché prechodové efekty zahrňte transition.jsraz spolu s ostatnými súbormi JS. Ak používate skompilovaný (alebo miniifikovaný) bootstrap.js, nie je potrebné ho zahrnúť – už to tam je.

Čo je vo vnútri

Transition.js je základný pomocník pre transitionEndudalosti a tiež emulátor prechodu CSS. Používajú ho ostatné doplnky na kontrolu podpory prechodu CSS a na zachytenie visiacich prechodov.

Zakázanie prechodov

Prechody je možné globálne deaktivovať pomocou nasledujúceho útržku kódu JavaScript, ktorý musí nasledovať po transition.js(alebo bootstrap.jsprípadne bootstrap.min.js) načítaní:

$.support.transition = false

Modály modal.js

Modály sú zjednodušené, ale flexibilné dialógové výzvy s minimálnou požadovanou funkčnosťou a inteligentnými predvolenými nastaveniami.

Vzhľadom na to, ako HTML5 definuje svoju sémantiku, autofocusatribút HTML nemá žiadny vplyv na modály Bootstrap. Ak chcete dosiahnuť rovnaký efekt, použite vlastný JavaScript:

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

Príklady

Statický príklad

Vykreslený modál s hlavičkou, telom a množinou akcií v päte.

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

Živá ukážka

Prepnite modal cez JavaScript kliknutím na tlačidlo nižšie. Posunie sa nadol a bude miznúť z hornej časti stránky.

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

Voliteľné veľkosti

Modály majú dve voliteľné veľkosti, dostupné prostredníctvom tried modifikátorov, ktoré sa umiestnia na .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" 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" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

Odstrániť animáciu

V prípade modálov, ktoré sa jednoducho objavia, než aby sa rozplynuli, odstráňte .fadetriedu zo svojho modálneho označenia.

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

Použitie mriežkového systému

Ak chcete využiť systém mriežky Bootstrap v rámci modálu, stačí vložiť .rowdo .modal-bodya potom použiť triedy normálneho mriežkového systému.

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

Rôzny modálny obsah podľa spúšťacieho tlačidla

Máte veľa tlačidiel, ktoré spúšťajú rovnaký modál, len s mierne odlišným obsahom? Použite event.relatedTargeta HTML data-*atribúty (prípadne cez jQuery ) na zmenu obsahu modálu v závislosti od toho, na ktoré tlačidlo ste klikli. Podrobnosti nájdete v dokumentoch Modal Events 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)
})

Použitie

Modálny doplnok prepína váš skrytý obsah na požiadanie prostredníctvom atribútov údajov alebo JavaScriptu. Pridáva tiež .modal-openk <body>prepísaniu predvoleného správania rolovania a generuje oblasť .modal-backdropna kliknutie na zatvorenie zobrazených modálov pri kliknutí mimo modálu.

Cez dátové atribúty

Aktivujte modál bez písania JavaScriptu. Nastavte data-toggle="modal"na prvku ovládača, ako je tlačidlo, spolu s data-target="#foo"alebo href="#foo"na zacielenie na konkrétny modál na prepínanie.

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

Cez JavaScript

Zavolajte modal s ID myModals jedným riadkom JavaScriptu:

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

možnosti

Možnosti môžu byť odovzdané prostredníctvom dátových atribútov alebo JavaScriptu. Pre atribúty údajov pripojte názov voľby k data-, ako v data-backdrop="".

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

Metódy

.modal(options)

Aktivuje váš obsah ako modálny. Prijíma voliteľné možnosti object.

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

.modal('toggle')

Manuálne prepína modal. Vráti sa k volajúcemu predtým, ako sa modal skutočne ukázal alebo skryl (tj predtým, ako nastane udalosť shown.bs.modalalebo ).hidden.bs.modal

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

.modal('show')

Manuálne otvorí modál. Vráti sa k volajúcemu skôr, ako sa modal skutočne ukázal (tj predtým, ako shown.bs.modalnastane udalosť).

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

.modal('hide')

Manuálne skryje modal. Vráti sa k volajúcemu skôr, ako bol modal skutočne skrytý (tj predtým, ako hidden.bs.modalnastane udalosť).

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

.modal('handleUpdate')

Znova upraví polohu modálu tak, aby čelil posuvnej lište v prípade, že by sa nejaký objavil, čo by spôsobilo skok doľava.

Potrebné iba vtedy, keď sa výška modálu mení, keď je otvorený.

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

Diania

Modálna trieda Bootstrapu odhaľuje niekoľko udalostí na pripojenie k modálnej funkcii.

Všetky modálne udalosti sa spúšťajú na samotnom modale (tj na <div class="modal">).

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

Rozbaľovacie ponuky dropdown.js

Príklady

Pomocou tohto jednoduchého doplnku môžete pridať rozbaľovacie ponuky takmer ku všetkému, vrátane navigačného panela, kariet a tabliet.

V rámci navigačnej lišty

V rámci tabletiek

Použitie

Pomocou dátových atribútov alebo JavaScriptu rozbaľovací doplnok prepína skrytý obsah (rozbaľovacie ponuky) prepínaním .opentriedy na nadradenej položke zoznamu.

Na mobilných zariadeniach sa po otvorení rozbaľovacej ponuky pridá .dropdown-backdropoblasť klepnutia na zatvorenie rozbaľovacích ponúk pri klepnutí mimo ponuky, čo je požiadavka na správnu podporu systému iOS. To znamená, že prepnutie z otvorenej rozbaľovacej ponuky do inej rozbaľovacej ponuky vyžaduje ďalšie klepnutie na mobilnom zariadení.

Poznámka: data-toggle="dropdown"Atribút sa používa pri zatváraní rozbaľovacích ponúk na úrovni aplikácie, takže je dobré ho vždy používať.

Cez dátové atribúty

Pridať data-toggle="dropdown"k odkazu alebo tlačidlu na prepnutie rozbaľovacej ponuky.

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

Ak chcete zachovať adresy URL nedotknuté s tlačidlami odkazov, použite data-targetatribút namiesto atribútu 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>

Cez JavaScript

Vyvolajte rozbaľovacie ponuky pomocou JavaScriptu:

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

možnosti

žiadne

Metódy

$().dropdown('toggle')

Prepína rozbaľovaciu ponuku daného navigačného panela alebo navigácie s kartami.

Diania

Všetky udalosti rozbaľovacej ponuky sa spúšťajú v .dropdown-menunadradenom prvku .

Všetky udalosti rozbaľovacej ponuky majú relatedTargetvlastnosť, ktorej hodnotou je prepínací prvok kotvy.

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

ScrollSpy scrollspy.js

Príklad v navigačnom paneli

Doplnok ScrollSpy slúži na automatickú aktualizáciu cieľov navigácie na základe pozície posúvania. Prejdite oblasťou pod navigačnou lištou a sledujte, ako sa aktívna trieda mení. Rozbaľovacie podpoložky budú tiež zvýraznené.

Použitie

Vyžaduje relatívne umiestnenie

Bez ohľadu na spôsob implementácie, scrollspy vyžaduje použitie position: relative;na prvku, ktorý špehujete. Vo väčšine prípadov je to <body>. Keď budete špehovať iné prvky ako <body>, uistite sa, že máte heightnastavenú a overflow-y: scroll;aplikovanú položku.

Cez dátové atribúty

Ak chcete jednoducho pridať rolovacie správanie do navigácie v hornej lište, pridajte data-spy="scroll"prvok, ktorý chcete špehovať (najčastejšie to bude <body>). Potom pridajte data-targetatribút s ID alebo triedou nadradeného prvku ľubovoľného .navkomponentu Bootstrap.

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>

Cez JavaScript

Po pridaní position: relative;CSS zavolajte scrollspy cez JavaScript:

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

Metódy

.scrollspy('refresh')

Keď používate scrollspy v spojení s pridávaním alebo odstraňovaním prvkov z DOM, budete musieť zavolať metódu refresh takto:

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

možnosti

Možnosti môžu byť odovzdané prostredníctvom dátových atribútov alebo JavaScriptu. Pre atribúty údajov pripojte názov voľby k data-, ako v data-offset="".

Diania

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

Prepínateľné karty tab.js

Príklady kariet

Pridajte rýchlu, dynamickú funkciu kariet na prechod cez tably miestneho obsahu, dokonca aj cez rozbaľovacie ponuky. Vnorené karty nie sú podporované.

Použitie

Povoliť karty s tabuľkami cez JavaScript (každá karta musí byť aktivovaná samostatne):

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

Jednotlivé karty môžete aktivovať niekoľkými spôsobmi:

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

Označenie

Môžete aktivovať navigáciu na karte alebo tablete bez písania akéhokoľvek JavaScriptu jednoduchým zadaním data-toggle="tab"alebo data-toggle="pill"na prvku. Pridaním tried nava nav-tabsna kartu ulsa použije štýl karty Bootstrap , zatiaľ čo pridaním tried nava nav-pillssa použije štýl pilulky .

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

Efekt vyblednutia

Ak chcete, aby karty vybledli, pridajte .fadeku každému .tab-pane. Prvá tabla karty musí tiež .inzviditeľniť počiatočný obsah.

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

Metódy

$().tab

Aktivuje prvok karty a kontajner obsahu. Karta by mala mať buď a data-targetalebo hrefzacielenie na kontajnerový uzol v DOM. Vo vyššie uvedených príkladoch sú karty <a>s s data-toggle="tab"atribútmi.

.tab('show')

Vyberie danú kartu a zobrazí jej priradený obsah. Akákoľvek iná karta, ktorá bola predtým vybratá, sa zruší a jej priradený obsah sa skryje. Vráti sa k volajúcemu skôr, než sa tabla karty skutočne zobrazí (tj pred výskytom shown.bs.tabudalosti).

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

Diania

Pri zobrazení novej karty sa udalosti spúšťajú v nasledujúcom poradí:

1. hide.bs.tab(na aktuálnej aktívnej karte)
2. show.bs.tab(na karte, ktorá sa má zobraziť)
3. hidden.bs.tab(na predchádzajúcej aktívnej karte, rovnaká ako pri hide.bs.tabudalosti)
4. shown.bs.tab(na novo aktívnej práve zobrazenej karte, rovnakej ako pri show.bs.tabudalosti)

Ak ešte nebola aktívna žiadna karta, udalosti hide.bs.taba hidden.bs.tabsa nespustia.

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

Popisy tooltip.js

Inšpirované vynikajúcim doplnkom jQuery.tipsy, ktorý napísal Jason Frame; Popisy sú aktualizovanou verziou, ktorá sa nespolieha na obrázky, používa CSS3 na animácie a dátové atribúty na lokálne ukladanie titulkov.

Popisy s názvami s nulovou dĺžkou sa nikdy nezobrazujú.

Príklady

Umiestnením kurzora myši na odkazy nižšie zobrazíte popisy:

Statický popis

K dispozícii sú štyri možnosti: zarovnané hore, vpravo, dole a vľavo.

Štyri smery

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

Použitie

Doplnok tooltip generuje obsah a značky na požiadanie a v predvolenom nastavení umiestňuje popisky za ich spúšťací prvok.

Spustite popis pomocou JavaScriptu:

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

Označenie

Požadované označenie pre popis je iba dataatribút a titlena elemente HTML chcete mať popis. Vygenerované označenie popisku je pomerne jednoduché, hoci vyžaduje pozíciu (v predvolenom nastavení topju doplnok nastaví na hodnotu).

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

možnosti

Možnosti môžu byť odovzdané prostredníctvom dátových atribútov alebo JavaScriptu. Pre atribúty údajov pripojte názov voľby k data-, ako v data-animation="".

Metódy

$().tooltip(options)

Ku kolekcii prvkov pripojí popisovač.

.tooltip('show')

Zobrazí popis prvku. Vráti sa k volajúcemu skôr, ako sa skutočne zobrazil popis (tj predtým, ako shown.bs.tooltipdôjde k udalosti). Toto sa považuje za „manuálne“ spustenie popisku. Popisy s názvami s nulovou dĺžkou sa nikdy nezobrazujú.

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

.tooltip('hide')

Skryje popis prvku. Vráti sa k volajúcemu skôr, ako bol popis skutočne skrytý (tj pred výskytom hidden.bs.tooltipudalosti). Toto sa považuje za „manuálne“ spustenie popisku.

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

.tooltip('toggle')

Prepína popis prvku. Vráti sa k volajúcemu skôr, ako sa popis skutočne zobrazí alebo skryje (tj predtým, ako nastane udalosť shown.bs.tooltipalebo ). hidden.bs.tooltipToto sa považuje za „manuálne“ spustenie popisku.

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

.tooltip('destroy')

Skryje a zničí popis prvku. Popisy, ktoré používajú delegovanie (ktoré sú vytvorené pomocou voľby ) selector, nemožno jednotlivo zničiť na podradených spúšťacích prvkoch.

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

Diania

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

Popovers popover.js

Pridajte malé prekryvné vrstvy obsahu, ako sú tie na iPade, do ľubovoľného prvku, aby ste mohli umiestniť sekundárne informácie.

Kontextové okná, ktorých názov aj obsah majú nulovú dĺžku, sa nikdy nezobrazia.

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

Príklady

Statický popover

K dispozícii sú štyri možnosti: zarovnané hore, vpravo, dole a vľavo.

Živá ukážka

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

Štyri smery

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

Zavrieť pri ďalšom kliknutí

Pomocou focusspúšťača zatvorte kontextové okná pri ďalšom kliknutí používateľa.

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

Použitie

Povoliť vyskakovacie okná prostredníctvom JavaScriptu:

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

možnosti

Možnosti môžu byť odovzdané prostredníctvom dátových atribútov alebo JavaScriptu. Pre atribúty údajov pripojte názov voľby k data-, ako v data-animation="".

Metódy

$().popover(options)

Inicializuje vyskakovacie okná pre kolekciu prvkov.

.popover('show')

Odhalí vyskakovací prvok prvku. Vráti sa k volajúcemu skôr, ako sa skutočne zobrazí kontextové okno (tj predtým, ako shown.bs.popoverdôjde k udalosti). Toto sa považuje za „ručné“ spustenie vyskakovacieho okna. Kontextové okná, ktorých názov aj obsah majú nulovú dĺžku, sa nikdy nezobrazia.

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

.popover('hide')

Skryje popover prvku. Vráti sa k volajúcemu skôr, ako sa kontextové okno skutočne skrylo (tj predtým, ako hidden.bs.popovernastane udalosť). Toto sa považuje za „ručné“ spustenie vyskakovacieho okna.

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

.popover('toggle')

Prepína kontextové okno prvku. Vráti sa k volajúcemu predtým, ako sa kontextové okno skutočne zobrazí alebo skryje (tj predtým, ako nastane udalosť shown.bs.popoveralebo ). hidden.bs.popoverToto sa považuje za „ručné“ spustenie vyskakovacieho okna.

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

.popover('destroy')

Skryje a zničí popover prvku. Vyskakovacie okná, ktoré používajú delegovanie (ktoré sú vytvorené pomocou voľby ) selector, nemožno jednotlivo zničiť na podradených spúšťacích prvkoch.

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

Diania

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

Výstražné správy alert.js

Príklady upozornení

Pomocou tohto doplnku pridajte do všetkých výstražných správ funkciu odmietnutia.

Pri použití .closetlačidla musí byť prvým potomkom tlačidla .alert-dismissiblea v označení sa pred ním nesmie nachádzať žiadny textový obsah.

Použitie

Stačí pridať data-dismiss="alert"tlačidlo na zatvorenie, aby sa automaticky aktivovala funkcia zatvorenia upozornenia. Zatvorením upozornenia ho odstránite z DOM.

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

Ak chcete, aby vaše upozornenia pri zatváraní používali animáciu, uistite sa, že už majú aplikované triedy .fadea ..in

Metódy

$().alert()

Zabezpečí, aby výstraha počúvala udalosti kliknutia na podradené prvky, ktoré majú tento data-dismiss="alert"atribút. (Nie je potrebné pri použití automatickej inicializácie data-api.)

$().alert('close')

Zatvorí upozornenie jeho odstránením z DOM. Ak sú na prvku prítomné triedy .fadea .in, výstraha pred odstránením zmizne.

Diania

Výstražný doplnok Bootstrap odhaľuje niekoľko udalostí na pripojenie k funkcii výstrahy.

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

Tlačidlá button.js

Urobte viac s tlačidlami. Stavy ovládacích tlačidiel alebo vytváranie skupín tlačidiel pre viac komponentov, ako sú panely s nástrojmi.

Štátny

Pridať data-loading-text="Loading...", ak chcete použiť stav načítania na tlačidle.

Táto funkcia je od verzie 3.3.5 zastaraná a vo verzii 4 bola odstránená.

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

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

Jediný prepínač

Pridať data-toggle="button"na aktiváciu prepínania na jednom tlačidle.

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

Začiarkavacie políčko / Rádio

Pridajte data-toggle="buttons"do .btn-groupobsahujúceho začiarkavacieho políčka alebo rádiových vstupov, aby ste umožnili prepínanie ich príslušných štýlov.

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

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

Metódy

$().button('toggle')

Prepína stav push. Dodáva tlačidlu vzhľad, že bolo aktivované.

$().button('reset')

Resetuje stav tlačidla - zamení text na pôvodný text. Táto metóda je asynchrónna a vracia sa skôr, ako sa resetovanie skutočne dokončí.

$().button(string)

Zamení text do ľubovoľného textového stavu definovaného údajmi.

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

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

Zbaliť súbor kolaps.js

Flexibilný doplnok, ktorý využíva niekoľko tried na jednoduché prepínanie správania.

Príklad

Kliknutím na tlačidlá nižšie zobrazíte a skryjete ďalší prvok prostredníctvom zmien triedy:

• .collapseskrýva obsah
• .collapsingsa aplikuje pri prechodoch
• .collapse.inzobrazuje obsah

Môžete použiť odkaz s hrefatribútom alebo tlačidlo s data-targetatribútom. V oboch prípadoch data-toggle="collapse"sa vyžaduje.

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

Príklad akordeónu

Rozšírte predvolené správanie zbalenia a vytvorte akordeón s komponentom panelu.

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

Je tiež možné vymeniť .panel-bodys za .list-groups.

Použitie

Zásuvný modul používa niekoľko tried na zvládnutie ťažkého zdvíhania:

• .collapseskrýva obsah
• .collapse.inzobrazuje obsah
• .collapsingsa pridá pri spustení prechodu a odstráni sa po jeho dokončení

Tieto triedy nájdete v component-animations.less.

Cez dátové atribúty

Stačí pridať data-toggle="collapse"a data-targetk prvku a automaticky priradiť ovládanie skladacieho prvku. Atribút data-targetakceptuje selektor CSS, na ktorý sa má použiť zbalenie. Nezabudnite pridať triedu collapsedo skladacieho prvku. Ak chcete, aby bola predvolene otvorená, pridajte ďalšiu trieduin .

Ak chcete do skladacieho ovládacieho prvku pridať správu skupiny podobnú akordeónu, pridajte atribút data data-parent="#selector". Pozrite si ukážku, aby ste to videli v akcii.

Cez JavaScript

Povoliť manuálne pomocou:

$('.collapse').collapse()

možnosti

Možnosti môžu byť odovzdané prostredníctvom dátových atribútov alebo JavaScriptu. Pre atribúty údajov pripojte názov voľby k data-, ako v data-parent="".

Metódy

.collapse(options)

Aktivuje váš obsah ako skladací prvok. Prijíma voliteľné možnosti object.

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

.collapse('toggle')

Prepne zbaliteľný prvok na zobrazený alebo skrytý. Vráti sa k volajúcemu skôr, ako sa skladací prvok skutočne zobrazí alebo skryje (tj predtým, ako nastane udalosť shown.bs.collapsealebo ).hidden.bs.collapse

.collapse('show')

Zobrazuje skladací prvok. Vráti sa k volajúcemu skôr, ako sa skladací prvok skutočne zobrazí (tj pred výskytom shown.bs.collapseudalosti).

.collapse('hide')

Skryje skladací prvok. Vráti sa k volajúcemu skôr, ako bol skladací prvok skutočne skrytý (tj predtým, ako hidden.bs.collapsedôjde k udalosti).

Diania

Trieda zbalenia Bootstrapu odhaľuje niekoľko udalostí na pripojenie k funkcii zbalenia.

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

Carousel carousel.js

Komponent prezentácie na prepínanie medzi prvkami, ako je kolotoč. Vnorené karusely nie sú podporované.

Príklady

Predchádzajúce Ďalšie

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

Voliteľné titulky

Pridajte titulky na svoje snímky jednoducho pomocou .carousel-captionprvku v ľubovoľnom súbore .item. Umiestnite sem takmer ľubovoľný voliteľný kód HTML a automaticky sa zarovná a naformátuje.

Štítok prvej snímky

Nulla vitae elit libero, pharetra augue mollis interdum.

Štítok druhej snímky

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Štítok tretej snímky

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Predchádzajúce Ďalšie

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

Použitie

Viaceré kolotoče

Pre správne fungovanie karuselov je potrebné použiť idna vonkajšom kontajneri ( ). .carouselPri pridávaní viacerých karuselov alebo pri zmene karuselu idnezabudnite aktualizovať príslušné ovládacie prvky.

Cez dátové atribúty

Pomocou atribútov údajov môžete jednoducho ovládať polohu karuselu. data-slideakceptuje kľúčové slová prevalebo next, ktoré zmenia pozíciu snímky vzhľadom na jej aktuálnu pozíciu. Prípadne použite data-slide-tona odovzdanie nespracovaného indexu snímky do karuselu data-slide-to="2", ktorý posunie pozíciu snímky na konkrétny index začínajúci na 0.

Atribút data-ride="carousel"sa používa na označenie karuselu ako animovaného pri načítaní stránky. Nemožno ho použiť v kombinácii s (nadbytočnou a nepotrebnou) explicitnou inicializáciou JavaScriptu toho istého karuselu.

Cez JavaScript

Zavolajte karusel manuálne pomocou:

$('.carousel').carousel()

možnosti

Možnosti môžu byť odovzdané prostredníctvom dátových atribútov alebo JavaScriptu. Pre atribúty údajov pripojte názov voľby k data-, ako v data-interval="".

Metódy

.carousel(options)

Inicializuje kolotoč s voliteľnými možnosťami objecta začne cyklicky prechádzať položkami.

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

.carousel('cycle')

Prechádza položkami kolotoča zľava doprava.

.carousel('pause')

Zastaví kolotoč prechádzať položkami.

.carousel(number)

Cyklizuje karusel na konkrétny rámec (na základe 0, podobne ako pole).

.carousel('prev')

Prejde na predchádzajúcu položku.

.carousel('next')

Prejde na ďalšiu položku.

Diania

Trieda karuselu Bootstrap odhaľuje dve udalosti na pripojenie k funkcii karuselu.

Obe udalosti majú nasledujúce ďalšie vlastnosti:

• direction: Smer, v ktorom sa kolotoč posúva (buď "left"alebo "right").
• relatedTarget: Prvok DOM, ktorý sa posúva na miesto ako aktívna položka.

Všetky udalosti karuselu sa spúšťajú na samotnom kolotoči (tj na <div class="carousel">).

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

Pripojte afix.js

Príklad

Doplnok pre pripojenie sa zapína position: fixed;a vypína a napodobňuje efekt nájdený pomocou position: sticky;. Podnavigácia na pravej strane je živá ukážka doplnku afix.

Použitie

Použite afixový plugin cez dátové atribúty alebo manuálne pomocou vlastného JavaScriptu. V oboch situáciách musíte poskytnúť CSS pre umiestnenie a šírku vášho pripojeného obsahu.

Poznámka: V dôsledku chyby vykresľovania Safari nepoužívajte doplnok pre pripojenie na prvok obsiahnutý v relatívne umiestnenom prvku, ako je vytiahnutý alebo posunutý stĺpec .

Polohovanie cez CSS

Doplnok afixu prepína medzi tromi triedami, z ktorých každá predstavuje konkrétny stav: .affix, .affix-top, a .affix-bottom. Musíte poskytnúť štýly, s výnimkou position: fixed;dňa .affix, pre tieto triedy sami (nezávisle od tohto doplnku), aby ste mohli zvládnuť skutočné pozície.

Takto funguje doplnok na pripojenie:

1. Na začiatok pridá doplnok.affix-top , aby naznačil, že prvok je na najvyššej pozícii. V tomto bode nie je potrebné žiadne umiestnenie CSS.
2. Posúvanie za prvok, ktorý chcete pripevniť, by malo spustiť skutočné pripojenie. Toto je miesto, kde .affixnahrádza .affix-topa nastavuje position: fixed;(poskytuje ho CSS Bootstrap).
3. Ak je definovaný spodný posun, posúvanie za ním by sa malo nahradiť .affixznakom .affix-bottom. Keďže posuny sú voliteľné, nastavenie jedného vyžaduje, aby ste nastavili príslušný CSS. V tomto prípade pridajte position: absolute;podľa potreby. Doplnok používa atribút údajov alebo možnosť JavaScript na určenie, kam umiestniť prvok odtiaľ.

Podľa vyššie uvedených krokov nastavte CSS pre niektorú z možností použitia nižšie.

Cez dátové atribúty

Ak chcete jednoducho pridať správanie pri pripájaní k akémukoľvek prvku, stačí pridať data-spy="affix"k prvku, ktorý chcete špehovať. Pomocou posunov definujte, kedy sa má prepnúť pripnutie prvku.

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

Cez JavaScript

Zavolajte doplnok na pripojenie cez JavaScript:

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

možnosti

Možnosti môžu byť odovzdané prostredníctvom dátových atribútov alebo JavaScriptu. Pre atribúty údajov pripojte názov voľby k data-, ako v data-offset-top="200".

Metódy

.affix(options)

Aktivuje váš obsah ako pripojený obsah. Prijíma voliteľné možnosti object.

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

.affix('checkPosition')

Prepočíta stav afixu na základe rozmerov, polohy a polohy rolovania príslušných prvkov. Triedy .affix, .affix-top, a .affix-bottomsú pridané alebo odstránené z pripojeného obsahu podľa nového stavu. Túto metódu je potrebné volať vždy, keď sa zmenia rozmery pripojeného obsahu alebo cieľového prvku, aby sa zabezpečilo správne umiestnenie pripojeného obsahu.

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

Diania

Prídavný doplnok Bootstrap odhaľuje niekoľko udalostí na pripojenie k funkciám prípon.