Přehled

Individuální nebo sestavené

Pluginy mohou být zahrnuty jednotlivě (pomocí jednotlivých *.jssouborů Bootstrapu) nebo všechny najednou (pomocí bootstrap.jsnebo minifikovaného bootstrap.min.js).

Atributy dat

Všechny zásuvné moduly Bootstrap můžete používat čistě prostřednictvím značkovacího API, aniž byste museli psát jediný řádek JavaScriptu. Toto je prvotřídní rozhraní API Bootstrapu a při používání pluginu byste jej měli nejprve zvážit.

To znamená, že v některých situacích může být žádoucí tuto funkci vypnout. Proto také poskytujeme možnost deaktivovat rozhraní API datového atributu zrušením vazby všech událostí v dokumentu s jmenným prostorem data-api. Tohle vypadá takto:

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

Alternativně, chcete-li cílit na konkrétní plugin, stačí zahrnout název pluginu jako jmenný prostor spolu s jmenným prostorem data-api, jako je tento:

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

Programové rozhraní API

Také věříme, že byste měli být schopni používat všechny Bootstrap pluginy čistě přes JavaScript API. Všechna veřejná rozhraní API jsou jediné, zřetězitelné metody a vracejí kolekci, podle které se jedná.

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

Všechny metody by měly přijímat volitelný objekt voleb, řetězec, který cílí na konkrétní metodu, nebo nic (což spouští plugin s výchozím chováním):

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

Každý plugin také odhaluje svůj raw konstruktor na Constructorvlastnosti: $.fn.popover.Constructor. Pokud chcete získat konkrétní instanci pluginu, načtěte ji přímo z prvku: $('[rel="popover"]').data('popover').

Výchozí nastavení

Výchozí nastavení pluginu můžete změnit úpravou objektu pluginu Constructor.DEFAULTS:

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

Žádný konflikt

Někdy je nutné použít Bootstrap pluginy s jinými UI frameworky. Za těchto okolností může občas dojít ke kolizím oboru názvů. Pokud k tomu dojde, můžete zavolat .noConflictna plugin, jehož hodnotu chcete vrátit.

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

Události

Bootstrap poskytuje vlastní události pro většinu jedinečných akcí pluginů. Obecně platí, že jsou ve formě infinitivu a minulého příčestí – kde infinitiv (např. show) je spuštěn na začátku události a jeho minulý tvar participia (např. shown) je spuštěn při dokončení akce.

Od 3.0.0 mají všechny události Bootstrap jmenný prostor.

Všechny infinitivní události poskytují preventDefaultfunkčnost. To poskytuje možnost zastavit provádění akce před jejím zahájením.

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

Čísla verzí

Verze každého z pluginů jQuery Bootstrapu jsou přístupné prostřednictvím VERSIONvlastnosti konstruktoru pluginu. Například pro plugin tooltip:

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

Při deaktivaci JavaScriptu nedochází k žádným zvláštním záložním řešením

Pluginy Bootstrapu neustupují nijak zvlášť elegantně, když je zakázán JavaScript. Pokud vám v tomto případě záleží na uživatelském dojmu, použijte <noscript>k vysvětlení situace (a jak znovu povolit JavaScript) svým uživatelům a/nebo přidejte své vlastní záložní.

Transitions transition.js

O přechodech

Pro jednoduché přechodové efekty zahrňte transition.jsjednou vedle ostatních souborů JS. Pokud používáte zkompilovaný (nebo minifikovaný) bootstrap.js, není potřeba toto zahrnout – už to tam je.

Co je uvnitř

Transition.js je základní pomocník pro transitionEndudálosti a také emulátor přechodu CSS. Používají ho ostatní pluginy ke kontrole podpory přechodů CSS a zachycení visících přechodů.

Zakázání přechodů

Přechody lze globálně deaktivovat pomocí následujícího fragmentu JavaScriptu, který musí následovat po transition.js(nebo bootstrap.jspřípadně bootstrap.min.js) načtení:

$.support.transition = false

Modály modal.js

Modály jsou zjednodušené, ale flexibilní dialogové výzvy s minimální požadovanou funkčností a inteligentními výchozími nastaveními.

Vzhledem k tomu, jak HTML5 definuje svou sémantiku, nemá autofocusatribut HTML žádný vliv na Bootstrap modály. Chcete-li dosáhnout stejného efektu, použijte vlastní JavaScript:

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

Příklady

Statický příklad

Vykreslený modal se záhlavím, tělem a sadou akcí v zápatí.

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

Přepněte modal pomocí JavaScriptu kliknutím na tlačítko níže. Posune se dolů a zmizí z horní části 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>

Volitelné velikosti

Modály mají dvě volitelné velikosti, které jsou k dispozici prostřednictvím tříd modifikátorů pro umístění 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>

Odebrat animaci

U modálů, které se jednoduše objeví, než aby se rozplynuly, odeberte .fadetřídu ze svého modálního označení.

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

Použití mřížkového systému

Chcete-li využít systém mřížky Bootstrap v rámci modu, stačí vložit .rows do .modal-bodya poté použít normální třídy mříž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ěnící se modální obsah na základě spouštěcího tlačítka

Máte spoustu tlačítek, která všechna spouštějí stejný modal, jen s mírně odlišným obsahem? Pomocí atributůevent.relatedTarget a HTMLdata-* (případně prostřednictvím jQuery ) můžete měnit obsah modálu v závislosti na tom, na které tlačítko bylo kliknuto. Podrobnosti naleznete v dokumentech 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žívání

Modální plugin přepíná váš skrytý obsah na vyžádání prostřednictvím datových atributů nebo JavaScriptu. Přidává také .modal-openk <body>přepsání výchozího chování posouvání a generuje .modal-backdropoblast pro kliknutí pro zrušení zobrazených modů při kliknutí mimo modal.

Prostřednictvím datových atributů

Aktivujte modal bez psaní JavaScriptu. Nastavit data-toggle="modal"na ovládacím prvku, jako je tlačítko, spolu s data-target="#foo"nebo href="#foo"pro cíl na konkrétní modal, který chcete přepnout.

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

Prostřednictvím JavaScriptu

Zavolejte modal s id myModalpomocí jediného řádku JavaScriptu:

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

Možnosti

Možnosti lze předávat prostřednictvím atributů dat nebo JavaScriptu. U atributů dat připojte název volby k data-, jako v data-backdrop="".

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

Metody

.modal(options)

Aktivuje váš obsah jako modální. Přijímá volitelné možnosti object.

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

.modal('toggle')

Ručně přepíná modal. Vrátí se k volajícímu dříve, než byl modal skutečně zobrazen nebo skryt (tj. předtím, než nastane událost shown.bs.modalnebo ).hidden.bs.modal

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

.modal('show')

Ručně otevře modal. Vrátí se k volajícímu dříve, než byl modal skutečně ukázán (tj. než dojde k shown.bs.modaludálosti).

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

.modal('hide')

Ručně skryje modal. Vrátí se k volajícímu dříve, než byl modal skutečně skryt (tj. než dojde k hidden.bs.modaludálosti).

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

.modal('handleUpdate')

Upraví polohu modu tak, aby počítala s posuvníkem v případě, že by se nějaký objevil, což by způsobilo skok doleva.

Potřebné pouze tehdy, když se výška modálu mění, když je otevřený.

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

Události

Modální třída Bootstrapu odhaluje několik událostí pro zapojení do modální funkčnosti.

Všechny modální události jsou spouštěny na samotný modal (tj. na <div class="modal">).

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

Rozbalovací seznam dropdown.js

Příklady

Pomocí tohoto jednoduchého pluginu můžete rozbalovací nabídky přidat téměř ke všemu, včetně navigačního panelu, karet a pilulek.

V rámci navigační lišty

V rámci prášků

Používání

Pomocí atributů dat nebo JavaScriptu rozbalovací plugin přepíná skrytý obsah (rozbalovací nabídky) přepínáním .opentřídy na nadřazené položce seznamu.

Na mobilních zařízeních se otevřením rozevíracího seznamu přidá .dropdown-backdropjako oblast pro klepnutí pro zavření rozevíracích nabídek při klepnutí mimo nabídku, což je požadavek na správnou podporu systému iOS. To znamená, že přepnutí z otevřené rozevírací nabídky do jiné rozbalovací nabídky vyžaduje další klepnutí na mobilu.

Poznámka: Na data-toggle="dropdown"atribut se spoléhá při zavírání rozevíracích nabídek na úrovni aplikace, takže je dobré jej vždy používat.

Prostřednictvím datových atributů

Přidat data-toggle="dropdown"k odkazu nebo tlačítku pro přepínání rozevírací nabídky.

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

Chcete-li zachovat adresy URL nedotčené s tlačítky odkazů, použijte data-targetnamísto atributu atribut 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>

Prostřednictvím JavaScriptu

Vyvolejte rozevírací seznamy pomocí JavaScriptu:

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

Možnosti

Žádný

Metody

$().dropdown('toggle')

Přepíná rozevírací nabídku daného navigačního panelu nebo navigace na kartách.

Události

Všechny události rozevíracího seznamu se spouštějí u .dropdown-menunadřazeného prvku .

Všechny rozevírací události mají relatedTargetvlastnost, jejíž hodnotou je přepínací prvek kotvy.

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

ScrollSpy scrollspy.js

Příklad v navigační liště

Zásuvný modul ScrollSpy slouží k automatické aktualizaci cílů navigace na základě pozice posouvání. Posouvejte oblast pod navigační lištou a sledujte, jak se aktivní třída mění. Rozbalovací podpoložky budou také zvýrazněny.

Používání

Vyžaduje relativní umístění

Bez ohledu na metodu implementace vyžaduje scrollspy použití position: relative;na prvku, který špehujete. Ve většině případů se jedná o <body>. Při posouvání na jiné prvky než <body>, ujistěte se, že máte heightsadu a aplikujte overflow-y: scroll;.

Prostřednictvím datových atributů

Chcete-li do navigace v horní liště snadno přidat scrollspy chování, přidejte data-spy="scroll"k prvku, který chcete špehovat (nejčastěji by to byl <body>). Potom přidejte data-targetatribut s ID nebo třídou nadřazeného prvku libovolné .navkomponenty 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>

Prostřednictvím JavaScriptu

Po přidání position: relative;CSS zavolejte scrollspy přes JavaScript:

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

Metody

.scrollspy('refresh')

Když používáte scrollspy ve spojení s přidáváním nebo odebíráním prvků z DOM, budete muset volat metodu refresh takto:

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

Možnosti

Možnosti lze předávat prostřednictvím atributů dat nebo JavaScriptu. U atributů dat připojte název volby k data-, jako v data-offset="".

Události

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

Přepínatelné karty tab.js

Příklady karet

Přidejte rychlou, dynamickou funkci karet pro přechod mezi panely místního obsahu, a to i prostřednictvím rozbalovacích nabídek. Vnořené karty nejsou podporovány.

Používání

Povolit záložky pomocí JavaScriptu (každá karta musí být aktivována samostatně):

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

Jednotlivé karty můžete aktivovat několika způsoby:

$('#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čení

Můžete aktivovat navigaci na kartě nebo pilulce bez psaní jakéhokoli JavaScriptu pouhým zadáním data-toggle="tab"nebo data-toggle="pill"na prvku. Přidáním tříd nava nav-tabsna kartu ulse použije styl karty Bootstrap , zatímco přidáním tříd nava nav-pillsse použije styl 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 vyblednutí

Chcete-li, aby karty vybledly, přidejte .fadeke každému .tab-pane. První panel karet musí také .inzviditelnit počáteč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>

Metody

$().tab

Aktivuje prvek karty a kontejner obsahu. Karta by měla mít buď a data-targetnebo hrefcílící na uzel kontejneru v modelu DOM. Ve výše uvedených příkladech jsou karty <a>s data-toggle="tab"atributy.

.tab('show')

Vybere danou kartu a zobrazí související obsah. Jakákoli jiná karta, která byla dříve vybrána, bude zrušena a její související obsah bude skrytý. Vrátí se k volajícímu dříve, než se panel karet skutečně zobrazí (tj. než dojde k shown.bs.tabudálosti).

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

Události

Při zobrazení nové karty se události spustí v následujícím pořadí:

1. hide.bs.tab(na aktuální aktivní kartě)
2. show.bs.tab(na kartě k zobrazení)
3. hidden.bs.tab(na předchozí aktivní záložce, stejné jako u hide.bs.tabudálosti)
4. shown.bs.tab(na nově aktivní právě zobrazené záložce, stejné jako u show.bs.tabudálosti)

Pokud již žádná karta nebyla aktivní, události hide.bs.taba hidden.bs.tabse nespustí.

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

Popisky tooltip.js

Inspirováno vynikajícím pluginem jQuery.tipsy, který napsal Jason Frame; Popisky jsou aktualizovanou verzí, která se nespoléhá na obrázky, používá CSS3 pro animace a datové atributy pro místní úložiště titulů.

Popisky s názvy nulové délky se nikdy nezobrazují.

Příklady

Umístěním kurzoru na níže uvedené odkazy zobrazíte popisky:

Statická nápověda

K dispozici jsou čtyři možnosti: zarovnání nahoře, vpravo, dole a vlevo.

Čtyři směry

<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žívání

Plugin tooltip generuje obsah a označení na vyžádání a ve výchozím nastavení umísťuje popisky za jejich spouštěcí prvek.

Spusťte popis pomocí JavaScriptu:

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

Označení

Požadované označení pro popis je pouze dataatribut a titlena prvku HTML chcete mít popis. Vygenerované označení popisku je poměrně jednoduché, i když vyžaduje pozici (ve výchozím nastavení topje pluginem nastavena 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 lze předávat prostřednictvím atributů dat nebo JavaScriptu. U atributů dat připojte název volby k data-, jako v data-animation="".

Metody

$().tooltip(options)

Připojí obslužný program popisku ke kolekci prvků.

.tooltip('show')

Zobrazí popisek prvku. Vrátí se k volajícímu dříve, než se nápověda skutečně zobrazila (tj. než dojde k shown.bs.tooltipudálosti). Toto je považováno za "ruční" spuštění popisku. Popisky s názvy nulové délky se nikdy nezobrazují.

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

.tooltip('hide')

Skryje popisek prvku. Vrátí se k volajícímu dříve, než byl popis nástroje skutečně skryt (tj. než dojde k hidden.bs.tooltipudálosti). Toto je považováno za "ruční" spuštění popisku.

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

.tooltip('toggle')

Přepíná popisek prvku. Vrátí se k volajícímu dříve, než byl popis nástroje skutečně zobrazen nebo skryt (tj. než dojde k události shown.bs.tooltipnebo ). hidden.bs.tooltipToto je považováno za "ruční" spuštění popisku.

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

.tooltip('destroy')

Skryje a zničí popisek prvku. Popisky, které používají delegování (které jsou vytvořeny pomocí volby ) selector, nelze jednotlivě zničit na podřízených spouštěcích prvcích.

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

Události

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

Popovers popover.js

Přidejte malé překryvné vrstvy obsahu, jako jsou ty na iPadu, k libovolnému prvku pro uložení sekundárních informací.

Popovery, jejichž název i obsah mají nulovou délku, se nikdy nezobrazují.

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

Příklady

Statický popover

K dispozici jsou čtyři možnosti: zarovnání nahoře, vpravo, dole a vlevo.

Živé demo

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

Čtyři směry

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

Zavřít při dalším kliknutí

Pomocí focusspouštěče zavřete vyskakovací okna při příštím kliknutí, které uživatel provede.

<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žívání

Povolit vyskakovací okna prostřednictvím JavaScriptu:

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

Možnosti

Možnosti lze předávat prostřednictvím atributů dat nebo JavaScriptu. U atributů dat připojte název volby k data-, jako v data-animation="".

Metody

$().popover(options)

Inicializuje vyskakovací okna pro kolekci prvků.

.popover('show')

Odhalí popover prvku. Vrátí se k volajícímu dříve, než se vyskakovací okno skutečně zobrazilo (tj. než dojde k shown.bs.popoverudálosti). Toto je považováno za "ruční" spuštění vyskakovacího okna. Popovery, jejichž název i obsah mají nulovou délku, se nikdy nezobrazují.

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

.popover('hide')

Skryje popover prvku. Vrátí se k volajícímu dříve, než byl vyskakovací okno skutečně skryt (tj. než dojde k hidden.bs.popoverudálosti). Toto je považováno za "ruční" spuštění vyskakovacího okna.

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

.popover('toggle')

Přepíná vyskakovací okno prvku. Vrátí se k volajícímu předtím, než se vyskakovací okno skutečně zobrazí nebo skryje (tj. než dojde k události shown.bs.popovernebo ). hidden.bs.popoverToto je považováno za "ruční" spuštění vyskakovacího okna.

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

.popover('destroy')

Skryje a zničí popover prvku. Popovers, která používají delegování (která jsou vytvořena pomocí volby ) selector, nelze jednotlivě zničit na podřízených spouštěcích prvcích.

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

Události

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

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

Příklad upozornění

Pomocí tohoto pluginu přidejte ke všem výstražným zprávám funkci zrušení.

Při použití .closetlačítka musí být prvním potomkem tlačítka .alert-dismissiblea v označení nesmí být před ním žádný textový obsah.

Používání

Stačí přidat data-dismiss="alert"k vašemu tlačítku zavřít a automaticky poskytnout funkci uzavření upozornění. Zavřením výstrahy ji odstraníte z DOM.

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

Chcete-li, aby vaše upozornění používala při zavírání animaci, ujistěte se, že mají .fadea.in na ně již byly použity třídy

Metody

$().alert()

Umožňuje upozornění naslouchat událostem kliknutí na podřízené prvky, které mají tento data-dismiss="alert"atribut. (Není nutné při použití automatické inicializace rozhraní data-api.)

$().alert('close')

Zavře upozornění jeho odstraněním z DOM. Pokud jsou na prvku přítomny třídy .fadea .in, výstraha před odstraněním zmizí.

Události

Zásuvný modul výstrah Bootstrap odhaluje několik událostí pro zapojení do funkce výstrah.

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

Tlačítka button.js

Udělejte více s tlačítky. Stavy ovládacích tlačítek nebo vytváření skupin tlačítek pro více komponent, jako jsou panely nástrojů.

Státní

Přidat data-loading-text="Loading...", chcete-li použít stav načítání na tlačítku.

Tato funkce je od verze 3.3.5 zastaralá a ve verzi 4 byla odstraněna.

<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ý přepínač

Přidat data-toggle="button"pro aktivaci přepínání na jednom tlačítku.

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

Zaškrtávací políčko / Rádio

Přidejte data-toggle="buttons"do .btn-groupobsahujícího zaškrtávacího políčka nebo rádiových vstupů, abyste umožnili přepínání jejich příslušných stylů.

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

Metody

$().button('toggle')

Přepíná stav push. Dává tlačítku dojem, že bylo aktivováno.

$().button('reset')

Resetuje stav tlačítka - zamění text za původní text. Tato metoda je asynchronní a vrací se dříve, než je resetování skutečně dokončeno.

$().button(string)

Přepne text do libovolného datově definovaného textového stavu.

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

Sbalit soubor Collapse.js

Flexibilní plugin, který využívá několik tříd pro snadné přepínání chování.

Příklad

Kliknutím na tlačítka níže zobrazíte a skryjete další prvek prostřednictvím změn třídy:

• .collapseskrývá obsah
• .collapsingse aplikuje při přechodech
• .collapse.inzobrazuje obsah

Můžete použít odkaz s hrefatributem nebo tlačítko s data-targetatributem. V obou případech data-toggle="collapse"je požadováno.

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

Příklad akordeonu

Rozšiřte výchozí chování sbalení a vytvořte harmoniku s komponentou 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 také možné vyměnit .panel-bodys za .list-groups.

Používání

Zásuvný modul pro kolaps využívá několik tříd ke zvládnutí těžkého zvedání:

• .collapseskryje obsah
• .collapse.inukazuje obsah
• .collapsingse přidá při zahájení přechodu a odebere se po jeho dokončení

Tyto třídy lze nalézt v component-animations.less.

Prostřednictvím datových atributů

Stačí přidat data-toggle="collapse"a data-targetk prvku a automaticky přiřadit ovládání skládacího prvku. Atribut data-targetpřijímá selektor CSS, na který se má sbalení použít. Nezapomeňte přidat třídu collapsedo skládacího prvku. Pokud chcete, aby se ve výchozím nastavení otevřela, přidejte další třídu in.

Chcete-li ke sbalitelnému ovládacímu prvku přidat správu skupiny podobnou akordeonu, přidejte atribut data data-parent="#selector". Podívejte se na ukázku, abyste to viděli v akci.

Prostřednictvím JavaScriptu

Povolit ručně pomocí:

$('.collapse').collapse()

Možnosti

Možnosti lze předávat prostřednictvím atributů dat nebo JavaScriptu. U atributů dat připojte název volby k data-, jako v data-parent="".

Metody

.collapse(options)

Aktivuje váš obsah jako sbalitelný prvek. Přijímá volitelné možnosti object.

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

.collapse('toggle')

Přepne sbalitelný prvek na zobrazený nebo skrytý. Vrátí se k volajícímu dříve, než byl skládací prvek skutečně zobrazen nebo skryt (tj. než dojde k události shown.bs.collapsenebo ).hidden.bs.collapse

.collapse('show')

Zobrazuje skládací prvek. Vrátí se k volajícímu dříve, než byl skládací prvek skutečně zobrazen (tj. než dojde k shown.bs.collapseudálosti).

.collapse('hide')

Skrývá skládací prvek. Vrátí se k volajícímu dříve, než byl skládací prvek skutečně skryt (tj. než dojde k hidden.bs.collapseudálosti).

Události

Třída sbalení Bootstrapu odhaluje několik událostí pro zapojení do funkce sbalení.

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

Carousel carousel.js

Komponenta prezentace pro procházení prvků, jako je kolotoč. Vnořené karusely nejsou podporovány.

Příklady

Předchozí další

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

Volitelné titulky

Přidejte titulky do snímků snadno pomocí .carousel-captionprvku v libovolném .item. Umístěte do něj téměř jakýkoli volitelný kód HTML a bude automaticky zarovnán a naformátován.

První štítek snímku

Nulla vitae elit libero, pharetra augue mollis interdum.

Štítek druhého snímku

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Štítek třetího snímku

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Předchozí další

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

Používání

Více kolotočů

Karusely vyžadují použití idna nejvzdálenějším kontejneru ( .carousel), aby ovládací prvky karuselu správně fungovaly. Při přidávání více karuselů nebo při změně karuselu idnezapomeňte aktualizovat příslušné ovládací prvky.

Prostřednictvím datových atributů

Pomocí atributů dat můžete snadno ovládat polohu karuselu. data-slidepřijímá klíčová slova prevnebo next, která mění pozici snímku vzhledem k jeho aktuální pozici. Případně použijte data-slide-tok předání nezpracovaného indexu snímku do karuselu data-slide-to="2", který posune pozici snímku na konkrétní index začínající na 0.

Atribut data-ride="carousel"se používá k označení karuselu jako animovaného počínaje načtením stránky. Nelze jej použít v kombinaci s (nadbytečnou a nepotřebnou) explicitní inicializací JavaScriptu stejného karuselu.

Prostřednictvím JavaScriptu

Zavolejte karusel ručně pomocí:

$('.carousel').carousel()

Možnosti

Možnosti lze předávat prostřednictvím atributů dat nebo JavaScriptu. U atributů dat připojte název volby k data-, jako v data-interval="".

Metody

.carousel(options)

Inicializuje karusel s volitelnými možnostmi objecta začne procházet položky.

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

.carousel('cycle')

Prochází položky karuselu zleva doprava.

.carousel('pause')

Zastaví kolotoč v procházení položek.

.carousel(number)

Cykluje karusel na konkrétní rámec (na základě 0, podobně jako pole).

.carousel('prev')

Přejde na předchozí položku.

.carousel('next')

Přejde na další položku.

Události

Třída karuselu Bootstrap odhaluje dvě události pro připojení k funkci karuselu.

Obě události mají následující další vlastnosti:

• direction: Směr, ve kterém se karusel posouvá (buď "left"nebo "right").
• relatedTarget: Prvek DOM, který se zasouvá na místo jako aktivní položka.

Všechny karuselové události jsou spouštěny na karuselu samotném (tj. na <div class="carousel">).

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

Připojte afix.js

Příklad

Plugin pro připojení se zapíná position: fixed;a vypíná a emuluje efekt nalezený pomocí position: sticky;. Podnavigace napravo je živou ukázkou pluginu pro připojení.

Používání

Použijte zásuvný modul přes datové atributy nebo ručně pomocí vlastního JavaScriptu. V obou situacích musíte poskytnout CSS pro umístění a šířku vašeho připojeného obsahu.

Poznámka: Nepoužívejte zásuvný modul pro připojení na prvek obsažený v relativně umístěném prvku, jako je vytažený nebo posunutý sloupec, kvůli chybě vykreslování Safari .

Polohování pomocí CSS

Plugin pro afix přepíná mezi třemi třídami, z nichž každá představuje konkrétní stav: .affix, .affix-topa .affix-bottom. position: fixed;Styly, s výjimkou on , pro tyto třídy musíte poskytnout .affixsami (nezávisle na tomto pluginu), abyste mohli zpracovávat skutečné pozice.

Jak plugin funguje takto:

1. Pro začátek plugin přidá .affix-top, aby naznačil, že prvek je na své nejvyšší pozici. V tomto okamžiku není vyžadováno žádné umístění CSS.
2. Posouváním za prvek, který chcete připojit, by se mělo spustit skutečné připojení. Toto je místo, kde .affixnahrazuje .affix-topa nastavuje position: fixed;(poskytuje CSS Bootstrap).
3. Pokud je definováno odsazení dole, posunutí za něj by mělo být .affixnahrazeno .affix-bottom. Vzhledem k tomu, že offsety jsou volitelné, nastavení jednoho vyžaduje, abyste nastavili příslušné CSS. V tomto případě v případě potřeby přidejte position: absolute;. Plugin používá atribut dat nebo možnost JavaScript k určení, kam umístit prvek odtud.

Podle výše uvedených kroků nastavte CSS pro některou z níže uvedených možností použití.

Prostřednictvím datových atributů

Chcete-li snadno přidat chování připojování k libovolnému prvku, stačí přidat data-spy="affix"k prvku, který chcete špehovat. Pomocí odsazení definujte, kdy přepnout připnutí prvku.

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

Prostřednictvím JavaScriptu

Zavolejte plugin pro připojení pomocí JavaScriptu:

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

Možnosti

Možnosti lze předávat prostřednictvím atributů dat nebo JavaScriptu. U atributů dat připojte název volby k data-, jako v data-offset-top="200".

Metody

.affix(options)

Aktivuje váš obsah jako připojený obsah. Přijímá volitelné možnosti object.

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

.affix('checkPosition')

Přepočítá stav afixu na základě rozměrů, polohy a pozice rolování příslušných prvků. Třídy .affix, .affix-top, a .affix-bottomjsou přidány nebo odebrány z připojeného obsahu podle nového stavu. Tuto metodu je třeba volat vždy, když se změní rozměry připojeného obsahu nebo cílového prvku, aby bylo zajištěno správné umístění připojeného obsahu.

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

Události

Plugin pro afixy Bootstrapu odhaluje několik událostí pro připojení k funkčnosti afixů.