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

Použitie skompilovaného JavaScriptu

Oba bootstrap.jsa bootstrap.min.jsobsahujú všetky doplnky v jednom súbore. Zahrňte iba jednu.

Závislosti pluginov

Niektoré doplnky a komponenty CSS závisia od iných doplnkov. Ak zahrniete doplnky jednotlivo, nezabudnite skontrolovať tieto závislosti v dokumentoch. Upozorňujeme tiež, že všetky doplnky závisia od jQuery (to znamená, že jQuery musí byť zahrnuté pred súbormi doplnkov). Ak chcete zistiť, ktoré verzie jQuery sú podporované, pozrite si našu stránku.bower.json

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

Iba jeden doplnok na prvok prostredníctvom atribútov údajov

Nepoužívajte atribúty údajov z viacerých doplnkov v rovnakom prvku. Tlačidlo napríklad nemôže mať popis a zároveň prepínať modal. Aby ste to dosiahli, použite ovíjací prvok.

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

Čí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.3.7"

Žiadne špeciálne zálohy, keď je JavaScript zakázaný

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 znova povoliť JavaScript) svojim používateľom a/alebo pridajte svoje vlastné záložné.

Knižnice tretích strán

Bootstrap oficiálne nepodporuje JavaScriptové knižnice tretích strán, ako je Prototype alebo jQuery UI. Napriek .noConflictudalostiam s menným priestorom sa môžu vyskytnúť problémy s kompatibilitou, ktoré budete musieť vyriešiť sami.

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.

Viaceré otvorené modály nie sú podporované

Uistite sa, že neotvárate modal, kým je ešte viditeľný iný. Zobrazenie viac ako jedného modálu súčasne vyžaduje vlastný kód.

Modálne umiestnenie značiek

Vždy sa snažte umiestniť kód HTML modálu na najvyššiu úroveň vo svojom dokumente, aby ste sa vyhli iným komponentom, ktoré by ovplyvňovali vzhľad a/alebo funkčnosť modálu.

Upozornenia na mobilné zariadenia

Existuje niekoľko upozornení týkajúcich sa používania modálov na mobilných zariadeniach. Podrobnosti nájdete v našich dokumentoch podpory prehliadača .

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>

Sprístupniť modály

Nezabudnite pridať role="dialog"a aria-labelledby="...", odkazujúc na modálny názov, na .modala role="document"na .modal-dialogsamotný názov.

Okrem toho môžete zadať popis svojho modálneho dialógu aria-describedbypomocou .modal.

Vkladanie videí YouTube

Vkladanie videí YouTube do modálov vyžaduje dodatočný JavaScript, ktorý nie je súčasťou Bootstrapu, aby sa prehrávanie automaticky zastavilo a ďalšie. Viac informácií nájdete v tomto užitočnom príspevku Stack Overflow .

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

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

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,

...viac tlačidiel...
<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 zrušenie 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="".

názov typu predvolená popis
pozadie boolean alebo reťazec'static' pravda Obsahuje prvok modálneho pozadia. Prípadne zadajte staticpozadie, ktoré nezatvorí modál po kliknutí.
klávesnica boolovská hodnota pravda Zatvorí modal po stlačení klávesu Escape
šou boolovská hodnota pravda Po inicializácii zobrazí modal.
diaľkový cesta falošný

Táto možnosť je od verzie 3.3.0 zastaraná a vo verzii 4 bola odstránená. Namiesto toho odporúčame použiť šablóny na strane klienta alebo rámec viazania údajov, prípadne zavolať jQuery.load sami.

Ak je poskytnutá vzdialená adresa URL, obsah sa načíta raz pomocou loadmetódy jQuery a vloží sa do .modal-contentdiv. Ak používate data-api, môžete alternatívne použiť hrefatribút na určenie vzdialeného zdroja. Príklad je uvedený nižšie:

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

Metódy

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

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

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

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

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

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">).

Typ udalosti Popis
show.bs.modal Táto udalosť sa spustí okamžite po showzavolaní metódy inštancie. Ak je to spôsobené kliknutím, kliknutý prvok je dostupný ako relatedTargetvlastnosť udalosti.
zobrazené.bs.modálne Táto udalosť sa spustí, keď bude modal viditeľný pre používateľa (bude čakať na dokončenie prechodov CSS). Ak je to spôsobené kliknutím, kliknutý prvok je dostupný ako relatedTargetvlastnosť udalosti.
hide.bs.modal Táto udalosť sa spustí okamžite po hidezavolaní metódy inštancie.
skrytý.bs.modálny Táto udalosť sa spustí, keď sa dokončí skrytie modálu pred používateľom (bude čakať na dokončenie prechodov CSS).
nabitý.bs.modal Táto udalosť sa spustí, keď modál načíta obsah pomocou remotemožnosti.
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Rozbaľovacie ponuky dropdown.js

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

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

Zavolajte rozbaľovacie ponuky pomocou JavaScriptu:

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

data-toggle="dropdown"stále požadované

Bez ohľadu na to, či zavoláte rozbaľovaciu ponuku prostredníctvom JavaScriptu alebo namiesto toho použijete data-api, data-toggle="dropdown"musí byť vždy prítomná na spúšťacom prvku rozbaľovacej ponuky.

žiadne

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

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.

Typ udalosti Popis
zobraziť rozbaľovaciu ponuku.bs Táto udalosť sa spustí okamžite, keď je zavolaná metóda show instance.
zobrazené.bs.rozbaľovacia ponuka Táto udalosť sa spustí, keď sa rozbaľovacia ponuka zobrazí používateľovi (bude čakať na dokončenie prechodov CSS).
skryť.bs.rozbaľovacia ponuka Táto udalosť sa spustí okamžite po zavolaní metódy skrytia inštancie.
skryté.bs.rozbaľovacia ponuka Táto udalosť sa spustí, keď sa rozbaľovacia ponuka skončí skrytím pred používateľom (bude čakať na dokončenie prechodov CSS).
$('#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é.

@tuk

Ad legíny keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi predtým, ako vypredali qui. Tumblr práva na bicykel od farmy až po stôl. Anim keffiyeh carles cardigan. Fotka užívateľa Velit seitan mcsweeney 3 wolf moon irure. Cosby sveter lomo jean šortky, williamsburg mikina minim qui pravdepodobne ste o nich nepočuli a kardigan trustový fond culpa biodiesel wes anderson estetický. Nihil vytetovaný accusamus, viera irónia bionafta keffiyeh remeselník ullamco consequat.

@mdo

Skateboard Veniam Marfa fúzy, tuková brada fugiat velit vidly. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat štyri loko nisi, ea helvetica nulla carles. Potetovaný cosby sveter food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 kreatíva. Carles neestetické cvičenie quis genrify. Brooklyn adipisicing remeselné pivo vice keytar dezert.

jeden

Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bike rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. Vysoká životnosť id vinyl, echo park consequat quis aliquip banh mi vidly. Vero VHS je adipisicing. Minimálna messenger taška Consectetur nisi DIY. Cred ex in, udržateľný delectus consectetur fanny pack iphone.

dva

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee blog, culpa messenger bag marfa čokoľvek delectus food truck. Predpokladá sa, že ID syntetizátora Sapiente. Locavore sed helvetica klišé irónia, thundercats ste o nich pravdepodobne nepočuli consequat hoodie bezlepkový lo-fi fap aliquip. Labore elitné miesto predtým, než sa vypredali, Terry richardson proident brunch nesciunt quis cosby sveter pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.

Použitie

Vyžaduje Bootstrap nav

Scrollspy v súčasnosti vyžaduje použitie navigačného komponentu Bootstrap na správne zvýraznenie aktívnych odkazov.

Vyžadujú sa rozlíšiteľné ciele ID

Odkazy na navigačnom paneli musia mať rozlíšiteľné ciele ID. Napríklad <a href="#home">home</a>musí zodpovedať niečomu v DOM, ako je <div id="home"></div>.

Necieľové :visibleprvky sú ignorované

Cieľové prvky, ktoré nie sú v :visiblesúlade s jQuery , budú ignorované a ich zodpovedajúce navigačné položky nebudú nikdy zvýraznené.

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="".

názov typu predvolená popis
offset číslo 10 Pixely na odsadenie zhora pri výpočte polohy rolovania.

Diania

Typ udalosti Popis
aktivovať.bs.scrollspy Táto udalosť sa spustí vždy, keď scrollspy aktivuje novú položku.
$('#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é.

Raw denim ste o nich pravdepodobne ešte nepočuli džínsové šortky Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Moustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sveter eu banh mi, qui irure terry richardson ex squid. Aliquip miesto na salvia cillum iphone. Seitan aliquip quis cardigan americké oblečenie, mäsiar voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Rozširuje navigáciu na kartách

Tento doplnok rozširuje komponent navigácie s kartami o pridávanie oblastí s tabuľkami.

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.

Typ udalosti Popis
zobraziť.bs.tab Táto udalosť sa spustí pri zobrazení kariet, ale predtým, než sa zobrazí nová karta. Pomocou event.targeta event.relatedTargetzacielite na aktívnu kartu a predchádzajúcu aktívnu kartu (ak je k dispozícii).
zobrazené.bs.tab Táto udalosť sa spustí pri zobrazení karty po zobrazení karty. Pomocou event.targeta event.relatedTargetzacielite na aktívnu kartu a predchádzajúcu aktívnu kartu (ak je k dispozícii).
skryť.bs.tab Táto udalosť sa spustí, keď sa má zobraziť nová karta (a teda predchádzajúca aktívna karta má byť skrytá). Pomocou event.targeta event.relatedTargetzacielite na aktuálnu aktívnu kartu a novú kartu, ktorá bude čoskoro aktívna.
skryté.bs.tab Táto udalosť sa spustí po zobrazení novej karty (a teda predchádzajúca aktívna karta je skrytá). Pomocou event.targeta event.relatedTargetzacielite na predchádzajúcu aktívnu kartu a na novú aktívnu kartu.
$('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:

Tesné nohavice ďalšej úrovne keffiyeh , o ktorých ste pravdepodobne ešte nepočuli. Photo booth brada raw denim kníhtlač vegan messenger bag stumptown. 8-bitové americké oblečenie z farmy na stôl seitan, mcsweeney's fixie udržateľná quinoa vinylovú chambray z froté richardson. Beard stumptown, cardigany banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, štyri loko mcsweeney's cleanse vegan chambray. Skutočne ironický remeselník bez ohľadu na klávesnicu, scénár z farmy na stôl Banky Austin twitter zvládnuť freegan cred raw denim single-origin coffee viral.

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>

Funkcia prihlásenia

Z výkonnostných dôvodov sú Tooltip a Popover data-apis voliteľné, čo znamená, že ich musíte inicializovať sami .

Jedným zo spôsobov, ako inicializovať všetky popisy na stránke, je vybrať ich podľa ich data-toggleatribútu:

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

Viacriadkové odkazy

Niekedy chcete pridať popis k hypertextovému odkazu, ktorý zalomí viacero riadkov. Predvolené správanie doplnku tooltip je vycentrovať ho horizontálne a vertikálne. Ak sa tomu chcete vyhnúť, pridajte white-space: nowrap;do svojich ukotvení.

Popisy v skupinách tlačidiel, skupinách vstupov a tabuľkách vyžadujú špeciálne nastavenie

Pri používaní popisov pre prvky v rámci a .btn-groupalebo .input-group, alebo pre prvky súvisiace s tabuľkou ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), budete musieť špecifikovať možnosť container: 'body'(zdokumentovanú nižšie), aby ste sa vyhli nežiaducim vedľajším účinkom (ako je rozšírenie prvku a/alebo alebo stratou svojich zaoblených rohov pri spustení popisku).

Nepokúšajte sa zobraziť popisy na skrytých prvkoch

Vyvolanie $(...).tooltip('show'), keď je cieľový prvok display: none;, spôsobí, že popis bude nesprávne umiestnený.

Prístupné popisy pre používateľov klávesnice a asistenčných technológií

Pre používateľov navigujúcich pomocou klávesnice, a najmä pre používateľov asistenčných technológií, by ste mali pridávať popisy iba k prvkom zameraným na klávesnicu, ako sú odkazy, ovládacie prvky formulárov alebo ľubovoľné prvky s tabindex="0"atribútom.

Popisy zakázaných prvkov vyžadujú prvky obalu

Ak chcete pridať popis k prvku disabledalebo .disabledprvku, vložte prvok do prvku a a namiesto toho naň <div>použite popis .<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="".

názov Typ Predvolené Popis
animácie boolovská hodnota pravda Na popis použite prechod zoslabovania CSS
kontajner reťazec | falošný falošný

Pridá popis ku konkrétnemu prvku. Príklad: container: 'body'. Táto možnosť je užitočná najmä v tom, že vám umožňuje umiestniť popis v toku dokumentu v blízkosti spúšťacieho prvku – čo zabráni tomu, aby sa popisok vznášal preč od spúšťacieho prvku počas zmeny veľkosti okna.

meškanie číslo | objekt 0

Oneskorenie zobrazenia a skrytia tooltipu (ms) – netýka sa manuálneho typu spúšťania

Ak je zadané číslo, oneskorenie sa použije na skrytie/zobrazenie

Štruktúra objektu je:delay: { "show": 500, "hide": 100 }

html boolovská hodnota falošný Vložte HTML do popisku. Ak je hodnota false, textna vloženie obsahu do DOM sa použije metóda jQuery. Ak sa obávate útokov XSS, použite text.
umiestnenie reťazec | funkciu 'top'

Ako umiestniť popis – hore | dole | vľavo | vpravo | auto.
Keď je zadané "auto", bude dynamicky preorientovať popis. Napríklad, ak je umiestnenie "automaticky vľavo", popis sa zobrazí vľavo, ak je to možné, inak sa zobrazí vpravo.

Keď sa na určenie umiestnenia použije funkcia, volá sa s popisom uzla DOM ako jej prvým argumentom a spúšťacím prvkom uzol DOM ako jej druhým. Kontext thisje nastavený na inštanciu popisu.

selektor reťazec falošný Ak je poskytnutý selektor, objekty popisov budú delegované na zadané ciele. V praxi sa to používa na umožnenie pridávania popisov k dynamickému obsahu HTML. Pozrite si tento a informatívny príklad .
šablóna reťazec '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

Základné HTML, ktoré sa má použiť pri vytváraní popisku.

Popis titlebude vložený do súboru .tooltip-inner.

.tooltip-arrowsa zmení na šípku popisu.

Prvok vonkajšieho obalu by mal mať .tooltiptriedu.

titul reťazec | funkciu ''

Predvolená hodnota názvu, ak titleatribút nie je prítomný.

Ak je zadaná funkcia, zavolá sa so svojou thisreferenčnou sadou na prvok, ku ktorému je pripojený popis.

spúšťač reťazec 'hover focus' Ako sa spúšťa popis – kliknite | vznášať sa | zameranie | Manuálny. Môžete prejsť viacerými spúšťačmi; oddeľte ich medzerou. manualnie je možné kombinovať so žiadnym iným spúšťačom.
výrez reťazec | objekt | funkciu { selector: 'body', padding: 0 }

Udržuje popis v medziach tohto prvku. Príklad: viewport: '#viewport'alebo{ "selector": "#viewport", "padding": 0 }

Ak je zadaná funkcia, je volaná so spúšťacím prvkom DOM node ako jej jediným argumentom. Kontext thisje nastavený na inštanciu popisu.

Atribúty údajov pre jednotlivé popisy

Možnosti pre jednotlivé popisy nástrojov možno alternatívne špecifikovať pomocou atribútov údajov, ako je vysvetlené vyššie.

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, než 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

Typ udalosti Popis
zobraziť.bs.popis Táto udalosť sa spustí okamžite po showzavolaní metódy inštancie.
zobrazený.bs.tip Táto udalosť sa spustí, keď sa popis zobrazí používateľovi (bude čakať na dokončenie prechodov CSS).
hide.bs.tooltip Táto udalosť sa spustí okamžite po hidezavolaní metódy inštancie.
skrytý.bs.tip Táto udalosť sa spustí, keď skončí skrytie popisu pred používateľom (bude čakať na dokončenie prechodov CSS).
vložený.bs.tip Táto udalosť sa spustí po show.bs.tooltipudalosti, keď bola šablóna popisu pridaná do modelu DOM.
$('#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.

Závislosť na plugine

Popovery vyžadujú, aby bol doplnok tooltip zahrnutý do vašej verzie Bootstrapu.

Funkcia prihlásenia

Z výkonnostných dôvodov sú Tooltip a Popover data-apis voliteľné, čo znamená, že ich musíte inicializovať sami .

Jedným zo spôsobov, ako inicializovať všetky kontextové okná na stránke, je vybrať ich podľa ich data-toggleatribútu:

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

Vyskakovacie okná v skupinách tlačidiel, skupinách vstupov a tabuľkách vyžadujú špeciálne nastavenie

Pri používaní vyskakovacích okien na prvkoch v rámci .btn-groupalebo .input-group, alebo na prvkoch súvisiacich s tabuľkou ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), budete musieť špecifikovať možnosť container: 'body'(zdokumentovanú nižšie), aby ste sa vyhli nežiaducim vedľajším účinkom (ako je rozšírenie prvku a/alebo alebo stratou svojich zaoblených rohov pri spustení vyskakovacieho okna).

Nepokúšajte sa zobrazovať vyskakovacie okná na skrytých prvkoch

Vyvolanie $(...).popover('show'), keď je cieľový prvok display: none;, spôsobí nesprávne umiestnenie vyskakovacieho okna.

Vyskakovacie okná na deaktivovaných prvkoch vyžadujú prvky obalu

disabledAk chcete k prvku alebo pridať vyskakovací .disabledprvok, vložte prvok do prvku a a namiesto toho naň <div>aplikujte vyskakovací prvok.<div>

Viacriadkové odkazy

Niekedy chcete k hypertextovému odkazu pridať kontextové okno, ktoré zalomí viacero riadkov. Predvolené správanie vyskakovacieho doplnku je vycentrovať ho horizontálne a vertikálne. Ak sa tomu chcete vyhnúť, pridajte white-space: nowrap;do svojich ukotvení.

Príklady

Statický popover

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

Popover top

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

Popover vpravo

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

Popover dno

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

Popover vľavo

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

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

Použite focusspúšťač na zatvorenie kontextových okien pri ďalšom kliknutí používateľa.

Na zatvorenie pri nasledujúcom kliknutí sa vyžaduje špecifická značka

Pre správne správanie medzi prehliadačmi a platformami musíte použiť <a>značku, nie značku <button>, a tiež musíte zahrnúť atribúty role="button"a .tabindex

<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="".

názov Typ Predvolené Popis
animácie boolovská hodnota pravda Na vyskakovacie okno použite prechod zoslabovania CSS
kontajner reťazec | falošný falošný

Pripojí popover ku konkrétnemu prvku. Príklad: container: 'body'. Táto možnosť je užitočná najmä v tom, že vám umožňuje umiestniť vyskakovacie okno v toku dokumentu v blízkosti spúšťacieho prvku – čo zabráni tomu, aby sa vyskakovacie okno vznášalo preč od spúšťacieho prvku počas zmeny veľkosti okna.

obsahu reťazec | funkciu ''

data-contentAk atribút nie je prítomný, predvolená hodnota obsahu .

Ak je zadaná funkcia, bude volaná s thisnastavenou referenciou na prvok, ku ktorému je kontextové okno pripojené.

meškanie číslo | objekt 0

Oneskorenie zobrazenia a skrytia popoveru (ms) – netýka sa manuálneho typu spúšťania

Ak je zadané číslo, oneskorenie sa použije na skrytie/zobrazenie

Štruktúra objektu je:delay: { "show": 500, "hide": 100 }

html boolovská hodnota falošný Vložte HTML do kontextového okna. Ak je hodnota false, textna vloženie obsahu do DOM sa použije metóda jQuery. Ak sa obávate útokov XSS, použite text.
umiestnenie reťazec | funkciu 'správny'

Ako umiestniť popover - hore | dole | vľavo | vpravo | auto.
Keď je zadané "auto", dynamicky sa zmení orientácia kontextového okna. Napríklad, ak je umiestnenie "automaticky vľavo", kontextové okno sa zobrazí vľavo, ak je to možné, inak sa zobrazí vpravo.

Keď sa funkcia používa na určenie umiestnenia, volá sa s popover uzlom DOM ako jej prvým argumentom a spúšťacím prvkom DOM uzlom ako jej druhým. Kontext thisje nastavený na inštanciu kontextového okna.

selektor reťazec falošný Ak je poskytnutý selektor, popover objekty budú delegované na špecifikované ciele. V praxi sa to používa na umožnenie pridávania vyskakovacích okien do dynamického obsahu HTML. Pozrite si tento a informatívny príklad .
šablóna reťazec '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

Základné HTML, ktoré sa má použiť pri vytváraní kontextového okna.

Popover titlesa vstrekne do .popover-title.

Popover contentsa vstrekne do .popover-content.

.arrowsa stane šípkou vyskakovacieho okna.

Prvok vonkajšieho obalu by mal mať .popovertriedu.

titul reťazec | funkciu ''

Predvolená hodnota názvu, ak titleatribút nie je prítomný.

Ak je zadaná funkcia, bude volaná s thisnastavenou referenciou na prvok, ku ktorému je kontextové okno pripojené.

spúšťač reťazec 'klikni' Ako sa spúšťa kontextové okno - kliknite | vznášať sa | zameranie | Manuálny. Môžete prejsť viacerými spúšťačmi; oddeľte ich medzerou. manualnie je možné kombinovať so žiadnym iným spúšťačom.
výrez reťazec | objekt | funkciu { selector: 'body', padding: 0 }

Udržuje popover v rámci tohto prvku. Príklad: viewport: '#viewport'alebo{ "selector": "#viewport", "padding": 0 }

Ak je zadaná funkcia, je volaná so spúšťacím prvkom DOM node ako jej jediným argumentom. Kontext thisje nastavený na inštanciu kontextového okna.

Atribúty údajov pre jednotlivé kontextové okná

Možnosti pre jednotlivé kontextové okná možno alternatívne špecifikovať pomocou atribútov údajov, ako je vysvetlené vyššie.

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

Typ udalosti Popis
show.bs.popover Táto udalosť sa spustí okamžite po showzavolaní metódy inštancie.
zobrazené.bs.popover Táto udalosť sa spustí, keď sa kontextové okno zobrazí používateľovi (bude čakať na dokončenie prechodov CSS).
skryť.bs.popover Táto udalosť sa spustí okamžite po hidezavolaní metódy inštancie.
skrytý.bs.popover Táto udalosť sa spustí, keď sa ukončí skrytie kontextového okna pred používateľom (bude čakať na dokončenie prechodov CSS).
vložený.bs.popover Táto udalosť sa spustí po show.bs.popoverudalosti, keď bola do modelu DOM pridaná šablóna kontextového okna.
$('#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 používali pri zatváraní animáciu, uistite sa, že majú .fadea.in už majú aplikované triedy

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.

Typ udalosti Popis
zavrieť.bs.upozornenie Táto udalosť sa spustí okamžite po closezavolaní metódy inštancie.
zatvorené.bs.upozornenie Táto udalosť sa spustí po zatvorení upozornenia (bude čakať na dokončenie prechodov CSS).
$('#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.

Kompatibilita medzi prehliadačmi

Firefox zachováva stavy kontroly formulára (zakázanie a kontrola) počas načítania stránky . Riešením tohto problému je použitie autocomplete="off". Pozrite si chybu Mozilly #654072 .

Š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á.

Použite ktorýkoľvek stav, ktorý sa vám páči!

V záujme tejto demonštrácie používame data-loading-texta $().button('loading'), ale to nie je jediný stav, ktorý môžete použiť. Viac o tom nájdete nižšie v $().button(string)dokumentácii .

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

Jediný prepínač

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

Potrebné sú vopred prepnuté tlačidlá.active aaria-pressed="true"

Pre vopred prepnuté tlačidlá musíte pridať .activetriedu a aria-pressed="true"atribút k buttonsebe.

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
  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.

Potrebné sú predvolené možnosti.active

Pre predvolené možnosti musíte .activetriedu pridať do vstupu labelsami.

Vizuálne kontrolovaný stav sa aktualizuje iba kliknutím

Ak sa začiarknutý stav tlačidla zaškrtávacieho políčka aktualizuje bez spustenia clickudalosti na tlačidle (napr. cez <input type="reset">alebo cez nastavenie checkedvlastnosti vstupu), budete musieť prepnúť .activetriedu na vstupe labelsami.

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

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" autocomplete="off">
  ...
</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.

Závislosť na plugine

Collapse vyžaduje, aby bol vo vašej verzii Bootstrapu zahrnutý prechodový doplnok .

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.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
<a class="btn btn-primary" role="button" data-toggle="collapse" href="#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, aby ste vytvorili akordeón s komponentom panelu.

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 dať na to vtáka chobotnica single-origin coffee nulla expectnda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan okrem mäsiara vice lomo. Legíny occaecat craft beer farm-to-table, raw denim estetický synth nesciunt asi ste o nich nepočuli accusamus labore udržateľné VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua dať na to vtáka chobotnica single-origin coffee nulla expectnda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan okrem mäsiara vice lomo. Legíny occaecat craft beer farm-to-table, raw denim estetický synth nesciunt asi ste o nich nepočuli accusamus labore udržateľné VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua dať na to vtáka chobotnica single-origin coffee nulla expectnda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan okrem mäsiara vice lomo. Legíny occaecat craft beer farm-to-table, raw denim estetický synth nesciunt asi ste o nich nepočuli accusamus labore udržateľné VHS.
<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.

  • Bootply
  • Jeden itmus ac facilin
  • Druhý eros

Sprístupnite ovládacie prvky rozbalenia/zbalenia

Nezabudnite pridať aria-expandeddo ovládacieho prvku. Tento atribút explicitne definuje aktuálny stav skladacieho prvku pre čítačky obrazovky a podobné asistenčné technológie. Ak je skladací prvok predvolene zatvorený, mal by mať hodnotu aria-expanded="false". Ak ste nastavili, aby bol skladací prvok predvolene otvorený pomocou intriedy, nastavte aria-expanded="true"ho na ovládacom prvku. Doplnok automaticky prepne tento atribút na základe toho, či bol alebo nebol skladací prvok otvorený alebo zatvorený.

Okrem toho, ak je váš ovládací prvok zameraný na jeden skladací prvok – tj data-targetatribút ukazuje na idselektor – môžete aria-controlsk ovládaciemu prvku pridať ďalší atribút obsahujúci idskladací prvok. Moderné čítačky obrazovky a podobné asistenčné technológie využívajú tento atribút na to, aby používateľom poskytli ďalšie skratky na prechod priamo na samotný skladací prvok.

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 triedu in.

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="".

názov typu predvolená popis
rodič selektor falošný Ak je k dispozícii selektor, všetky skladacie prvky pod zadaným nadradeným objektom sa po zobrazení tejto skladacej položky zatvoria. (podobné tradičnému správaniu na akordeóne - to závisí od paneltriedy)
prepnúť boolovská hodnota pravda Prepína zbaliteľný prvok pri vyvolaní

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.

Typ udalosti Popis
show.bs.kolaps Táto udalosť sa spustí okamžite po showzavolaní metódy inštancie.
zobrazené.bs.kolaps Táto udalosť sa spustí, keď je prvok zbalenia viditeľný pre používateľa (bude čakať na dokončenie prechodov CSS).
skryť.bs.kolaps Táto udalosť sa spustí okamžite po hidezavolaní metódy.
skrytý.bs.kolaps Táto udalosť sa spustí, keď bol prvok zbalenia skrytý pred používateľom (bude čakať na dokončenie prechodov CSS).
$('#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é.

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

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

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 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="".

názov typu predvolená popis
interval číslo 5000 Čas oneskorenia medzi automatickým cyklovaním položky. Ak je hodnota false, karusel sa nebude automaticky cyklovať.
pauza reťazec | nulový "vznášať sa" Ak je nastavené na "hover", pozastaví cyklovanie kolotoča mouseentera obnoví cyklovanie kolotoča zapnuté mouseleave. Ak je nastavená na null, umiestnením kurzora myši nad kolotoč ho nezastavíte.
zabaliť boolovská hodnota pravda Či má kolotoč nepretržite cyklovať alebo má mať tvrdé zastávky.
klávesnica boolovská hodnota pravda Či má kolotoč reagovať na udalosti klávesnice.

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

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

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

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

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

Prejde na predchádzajúcu položku.

Prejde na ďalšiu položku.

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">).

Typ udalosti Popis
slide.bs.kolotoč Táto udalosť sa spustí okamžite pri slidevyvolaní metódy inštancie.
posuvný.bs.kolotoč Táto udalosť sa spustí, keď karusel dokončí svoj posuvný prechod.
$('#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: Z dôvodu chyby vykresľovania prehliadača Safari nepoužívajte doplnok pre pripojenie na prvok obsiahnutý v relatívne umiestnenom prvku, ako je napríklad 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 pre pripojenie:

  1. Na začiatok doplnok pridá .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".

názov typu predvolená popis
offset číslo | funkcia | objekt 10 Pixely na odsadenie od obrazovky pri výpočte polohy rolovania. Ak zadáte jedno číslo, posun sa použije v hornom aj dolnom smere. Ak chcete poskytnúť jedinečný, spodný a horný posun, stačí poskytnúť objekt offset: { top: 10 }alebo offset: { top: 10, bottom: 5 }. Použite funkciu, keď potrebujete dynamicky vypočítať posun.
cieľ volič | uzol | prvok jQuery windowobjekt _ Určuje cieľový prvok afixu.

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.

Typ udalosti Popis
pripevniť.bs.pripevniť Táto udalosť sa spustí bezprostredne pred pripevnením prvku.
pripevnený.bs.pripevniť Táto udalosť sa spustí po pripojení prvku.
pripevniť-top.bs.pripevniť Táto udalosť sa spustí bezprostredne pred pripevnením prvku hore.
affixed-top.bs.affix Táto udalosť sa spustí po pripojení prvku hore.
pripevniť-dole.bs.pripevniť Táto udalosť sa spustí bezprostredne predtým, ako bol prvok pripevnený dole.
pripevnené-dole.bs.pripevniť Táto udalosť sa spustí po pripojení prvku dole.