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

Použití zkompilovaného JavaScriptu

Oba bootstrap.jsa bootstrap.min.jsobsahují všechny pluginy v jednom souboru. Uveďte pouze jeden.

Závislosti pluginů

Některé pluginy a CSS komponenty závisí na jiných pluginech. Pokud zahrnete pluginy jednotlivě, nezapomeňte zkontrolovat tyto závislosti v dokumentech. Všimněte si také, že všechny pluginy závisí na jQuery (to znamená, že jQuery musí být zahrnuto před soubory pluginů). Chcete-li zjistit, které verze jQuery jsou podporovány, přečtěte si naše .bower.json

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

Pouze jeden plugin na prvek prostřednictvím datových atributů

Nepoužívejte atributy dat z více pluginů pro stejný prvek. Tlačítko například nemůže mít zároveň popisek a přepínat modal. K tomu použijte obalový prvek.

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

Knihovny třetích stran

Bootstrap oficiálně nepodporuje JavaScriptové knihovny třetích stran, jako je Prototype nebo jQuery UI. Navzdory .noConflictudálostem se jmenným prostorem se mohou vyskytnout problémy s kompatibilitou, které budete muset vyřešit sami.

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.

Více otevřených modů není podporováno

Ujistěte se, že neotevírejte modal, když je ještě viditelný jiný. Zobrazení více než jednoho modálu najednou vyžaduje vlastní kód.

Umístění modálních značek

Vždy se snažte umístit kód HTML modalu na pozici nejvyšší úrovně v dokumentu, abyste zabránili tomu, že jiné komponenty ovlivní vzhled a/nebo funkčnost modalu.

Upozornění na mobilní zařízení

Existují určitá upozornění týkající se používání modalů na mobilních zařízeních. Podrobnosti najdete v našich dokumentech podpory prohlížeče .

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>

Zpřístupněte mody

Nezapomeňte přidat role="dialog"a aria-labelledby="...", odkazující na modální název, na .modala role="document"na .modal-dialogsamotný.

Kromě toho můžete zadat popis svého modálního dialogu pomocí aria-describedbyon .modal.

Vkládání videí na YouTube

Vkládání videí YouTube do modálů vyžaduje další JavaScript, který není součástí Bootstrapu, aby se automaticky zastavilo přehrávání a další. Další informace najdete v tomto užitečném příspěvku Stack Overflow .

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

...více tlačítek...
<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="".

název typ výchozí popis
pozadí boolean nebo řetězec'static' skutečný Zahrnuje prvek modálního pozadí. Případně zadejte staticpro pozadí, které neuzavře modal po kliknutí.
klávesnice booleovský skutečný Zavře modal po stisknutí klávesy Escape
ukázat booleovský skutečný Po inicializaci zobrazí modal.
dálkový cesta Nepravdivé

Tato možnost je od verze 3.3.0 zastaralá a ve verzi 4 byla odstraněna. Místo toho doporučujeme použít šablonu na straně klienta nebo rámec pro vázání dat nebo sami zavolat jQuery.load .

Pokud je poskytnuta vzdálená adresa URL, obsah se jednou načteload pomocí metody jQuery a vloží se do .modal-contentdiv. Pokud používáte data-api, můžete alternativně použít hrefatribut k určení vzdáleného zdroje. Příklad je uveden níže:

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

Metody

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

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

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

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

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

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

Typ události Popis
show.bs.modal Tato událost se spustí okamžitě při showvolání metody instance. Pokud je způsobeno kliknutím, je kliknutý prvek dostupný jako relatedTargetvlastnost události.
zobrazeno.bs.modální Tato událost se spustí, když bude modal zviditelněn pro uživatele (bude čekat na dokončení přechodů CSS). Pokud je způsobeno kliknutím, je kliknutý prvek dostupný jako relatedTargetvlastnost události.
hide.bs.modal Tato událost se spustí okamžitě po hidezavolání metody instance.
skrytý.bs.modální Tato událost se spustí, když se modal dokončí skrytí před uživatelem (bude čekat na dokončení přechodů CSS).
načteno.bs.modální Tato událost se spustí, když modal načte obsah pomocí remotemožnosti.
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Rozbalovací seznam dropdown.js

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ů

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

data-toggle="dropdown"stále vyžadováno

Bez ohledu na to, zda zavoláte rozbalovací nabídku prostřednictvím JavaScriptu nebo místo toho použijete rozhraní data-api, data-toggle="dropdown"je vždy vyžadováno, aby byl přítomen na spouštěcím prvku rozbalovací nabídky.

Žádný

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

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.

Typ události Popis
zobrazit.bs.rozbalovací seznam Tato událost se spustí okamžitě, když je zavolána metoda show instance.
zobrazeno.bs.rozbalovací nabídka Tato událost se spustí, když je rozbalovací nabídka viditelná pro uživatele (čeká na dokončení přechodů CSS).
skrýt.bs.rozbalovací nabídka Tato událost se spustí okamžitě po zavolání metody skrytí instance.
skrytý.bs.rozbalovací seznam Tato událost se spustí, když je rozbalovací nabídka skryta před uživatelem (čeká na dokončení přechodů CSS).
$('#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.

@Tlustý

Ad legíny keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi, než vyprodali qui. Tumblr práva na kolo od farmy až po stůl. Anim keffiyeh carles cardigan. Foto budka Velit seitan mcsweeney 3 wolf moon irure. Cosby svetr lomo jean šortky, williamsburg mikina minim qui pravděpodobně jste o nich neslyšeli a cardigan svěřenecký fond culpa biodiesel wes anderson estetický. Nihil tetovaný accusamus, víra ironie bionafta keffiyeh řemeslník ullamco consequat.

@mdo

Skateboard Veniam Marfa knír, adipisicing fugiat velit vidle vousy. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat čtyři loko nisi, ea helvetica nulla carles. Tetovaný cosby svetr food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson + 1 sartorial. Carles neestetické cvičení quis genrify. Brooklyn adipisicing craft beer vice keytar deserunt.

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á životnost id vinyl, echo park consequat quis aliquip banh mi vidle. Vero VHS je adipisicing. Minimální messenger taška Consectetur nisi DIY. Cred ex in, udržitelný 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 cokoliv delectus food truck. Sapiente synth id předpokládá. Locavore sed helvetica klišé ironie, thundercats, o kterých jste pravděpodobně ještě neslyšeli, consequat hoodie bezlepkový lo-fi fap aliquip. Labore elit placeat před vyprodáním, Terry richardson proident brunch nesciunt quis cosby svetr pariatur keffiyeh ut helvetica artisan. Cardigan řemeslné pivo seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.

Používání

Vyžaduje Bootstrap nav

Scrollspy aktuálně vyžaduje použití navigační komponenty Bootstrap pro správné zvýraznění aktivních odkazů.

Jsou vyžadovány rozlišitelné ID cíle

Odkazy na navigační liště musí mít rozlišitelné cíle id. Například <a href="#home">home</a>musí odpovídat něčemu v DOM, jako je <div id="home"></div>.

Necílové :visibleprvky jsou ignorovány

Cílové prvky, které nejsou v :visiblesouladu s jQuery , budou ignorovány a jejich odpovídající navigační položky nebudou nikdy zvýrazněny.

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

název typ výchozí popis
offset číslo 10 Pixely k odsazení shora při výpočtu polohy posouvání.

Události

Typ události Popis
aktivovat.bs.scrollspy Tato událost se spustí vždy, když bude scrollspy aktivována nová položka.
$('#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.

Raw denim o nich jste pravděpodobně ještě neslyšeli džínové šortky Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Moustache klišé tempor, williamsburg carles veganská helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby svetr eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan americké oblečení, řezník 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šiřuje navigaci na kartách

Tento plugin rozšiřuje navigační komponentu s kartami o přidání oblastí s kartami.

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

Typ události Popis
zobrazit.bs.tab Tato událost se spustí při zobrazení karty, ale předtím, než se zobrazí nová karta. Pomocí event.targeta event.relatedTargetmůžete cílit na aktivní kartu a na předchozí aktivní kartu (pokud je k dispozici).
zobrazeno.bs.tab Tato událost se spustí při zobrazení karty po zobrazení karty. Pomocí event.targeta event.relatedTargetmůžete cílit na aktivní kartu a na předchozí aktivní kartu (pokud je k dispozici).
skrýt.bs.tab Tato událost se spustí, když se má zobrazit nová karta (a tedy předchozí aktivní karta má být skryta). Pomocí event.targeta event.relatedTargetmůžete cílit na aktuální aktivní kartu a na novou kartu, která bude brzy aktivní.
skrytá.bs.tab Tato událost se spustí po zobrazení nové karty (a tedy předchozí aktivní karta je skryta). Pomocí event.targeta event.relatedTargetmůžete cílit na předchozí aktivní kartu a na novou aktivní kartu.
$('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:

Úzké kalhoty další úrovně keffiyeh pravděpodobně jste o nich neslyšeli. Fotobudka vousy raw denim knihtisk vegan messenger bag stumptown. Osmibitové americké oblečení z farmy na stůl seitan, mcsweeney's fixie z udržitelné quinoy má vinylový chambray z froté richardson. Beard stumptown, cardigany banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, čtyři loko mcsweeney's cleanse vegan chambray. Skutečně ironický řemeslník bez ohledu na klíč , scénárista z farmy na stůl banky Austin twitter zvládá freeganský cred raw denim single-origin coffee viral.

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>

Funkce přihlášení

Z důvodů výkonu jsou Tooltip a Popover data-apis volitelná, což znamená, že je musíte inicializovat sami .

Jedním ze způsobů, jak inicializovat všechny popisky na stránce, je vybrat je podle jejich data-toggleatributu:

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

Víceřádkové odkazy

Někdy chcete přidat popisek k hypertextovému odkazu, který zalamuje více řádků. Výchozí chování pluginu tooltip je vycentrovat jej vodorovně a svisle. Chcete-li se tomu vyhnout, přidejte white-space: nowrap;do kotev.

Popisky ve skupinách tlačítek, vstupních skupinách a tabulkách vyžadují speciální nastavení

Při použití popisků u prvků v rámci .btn-groupnebo nebo .input-groupnebo u prvků souvisejících s tabulkou ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), budete muset specifikovat možnost container: 'body'(zdokumentovaná níže), abyste se vyhnuli nežádoucím vedlejším účinkům (jako je například rozšiřování prvku a/nebo nebo ztráta zaoblených rohů při spuštění popisku).

Nepokoušejte se u skrytých prvků zobrazovat popisky

Vyvolání $(...).tooltip('show'), když je cílový prvek display: none;, způsobí nesprávné umístění popisku.

Přístupné popisky pro uživatele klávesnice a asistenčních technologií

Pro uživatele, kteří se pohybují pomocí klávesnice, a zejména pro uživatele asistenčních technologií, byste měli přidávat popisky pouze k prvkům zaměřeným na klávesnici, jako jsou odkazy, ovládací prvky formuláře nebo jakýkoli libovolný prvek s tabindex="0"atributem.

Popisky u zakázaných prvků vyžadují prvky obalu

disabledChcete-li k prvku nebo přidat nápovědu .disabled, umístěte prvek dovnitř <div>a aplikujte nápovědu na tento prvek <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="".

název Typ Výchozí Popis
animace booleovský skutečný Použijte přechod zeslabování CSS na popisek
kontejner řetězec | Nepravdivé Nepravdivé

Připojí popisek ke konkrétnímu prvku. Příklad: container: 'body'. Tato možnost je užitečná zejména v tom, že vám umožňuje umístit bublinovou nápovědu do toku dokumentu poblíž spouštěcího prvku – což zabrání tomu, aby se nápověda při změně velikosti okna vzdálila od spouštěcího prvku.

zpoždění číslo | objekt 0

Zpoždění zobrazení a skrytí popisku (ms) – nevztahuje se na typ ručního spouštění

Pokud je zadáno číslo, použije se prodleva pro skrytí/zobrazení

Struktura objektu je:delay: { "show": 500, "hide": 100 }

html booleovský Nepravdivé Vložte HTML do popisku. Pokud je nepravda, textk vložení obsahu do DOM se použije metoda jQuery. Pokud se obáváte útoků XSS, použijte text.
umístění řetězec | funkce 'horní'

Jak umístit nápovědu - nahoře | dole | vlevo | vpravo | auto.
Když je zadáno "auto", dynamicky se změní orientace popisku. Pokud je například umístění „automaticky vlevo“, nápověda se zobrazí vlevo, pokud je to možné, jinak se zobrazí vpravo.

Když je k určení umístění použita funkce, je volána s nápovědou uzel DOM jako prvním argumentem a spouštěcím prvkem uzlem DOM jako druhým. Kontext thisje nastaven na instanci popisku.

volič tětiva Nepravdivé Pokud je k dispozici selektor, objekty popisků budou delegovány na zadané cíle. V praxi se to používá k umožnění přidávání popisků k dynamickému obsahu HTML. Podívejte se na tento a informativní příklad .
šablona tětiva '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

Základní HTML pro použití při vytváření popisku.

Popisek titlebude vložen do souboru .tooltip-inner.

.tooltip-arrowse stane šipkou popisku.

Nejvzdálenější prvek obalu by měl mít .tooltiptřídu.

titul řetězec | funkce ''

Výchozí hodnota názvu, pokud titleatribut není přítomen.

Pokud je zadána funkce, bude volána se svou thisreferenční sadou na prvek, ke kterému je připojena nápověda.

spoušť tětiva 'zaostření po najetí myší' Jak se spouští nápověda - klikněte | vznášet se | zaměření | manuál. Můžete předat více spouštěčů; oddělte je mezerou. manualnelze kombinovat s žádným jiným spouštěčem.
výřez řetězec | objekt | funkce { selector: 'body', padding: 0 }

Udržuje popisek v mezích tohoto prvku. Příklad: viewport: '#viewport'nebo{ "selector": "#viewport", "padding": 0 }

Je-li zadána funkce, je volána s jediným argumentem spouštěcího prvku DOM node. Kontext thisje nastaven na instanci popisku.

Atributy dat pro jednotlivé popisky

Volby pro jednotlivé popisky lze alternativně specifikovat pomocí atributů dat, jak je vysvětleno výše.

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

Typ události Popis
zobrazit.bs.popisek Tato událost se spustí okamžitě při showvolání metody instance.
zobrazený.bs.popisek Tato událost se spustí, když je popis zviditelněn pro uživatele (bude čekat na dokončení přechodů CSS).
hide.bs.tooltip Tato událost se spustí okamžitě po hidezavolání metody instance.
skrytý.bs.popisek Tato událost se spustí, když skončí skrytí popisku před uživatelem (bude čekat na dokončení přechodů CSS).
vložená.bs.tooltip Tato událost se spustí po show.bs.tooltipudálosti, kdy byla šablona popisku přidána do modelu DOM.
$('#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í.

Závislost na pluginech

Popovers vyžadují, aby byl ve vaší verzi Bootstrapu zahrnut plugin s popisem.

Funkce přihlášení

Z důvodů výkonu jsou Tooltip a Popover data-apis volitelná, což znamená, že je musíte inicializovat sami .

Jedním ze způsobů, jak inicializovat všechna vyskakovací okna na stránce, je vybrat je podle jejich data-toggleatributu:

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

Popovery ve skupinách tlačítek, vstupních skupinách a tabulkách vyžadují speciální nastavení

Při použití vyskakovacích oken na prvky v rámci a .btn-groupnebo .input-group, nebo na prvky související s tabulkou ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), budete muset specifikovat možnost container: 'body'(zdokumentovanou níže), abyste se vyhnuli nežádoucím vedlejším účinkům (jako je například rozšiřování prvku a/nebo nebo ztráta zaoblených rohů při spuštění vyskakovacího okna).

Nesnažte se zobrazovat vyskakovací okna na skrytých prvcích

Vyvolání $(...).popover('show'), když je cílový prvek display: none;, způsobí, že vyskakovací okno bude nesprávně umístěno.

Popover na deaktivovaných prvcích vyžadují prvky obalu

disabledChcete-li k prvku nebo přidat vyskakovací okno .disabled, vložte prvek dovnitř prvku a a místo toho na něj <div>aplikujte vyskakovací okno <div>.

Víceřádkové odkazy

Někdy chcete k hypertextovému odkazu přidat vyskakovací okno, které zalamuje více řádků. Výchozí chování popover pluginu je vycentrovat jej vodorovně a svisle. Chcete-li se tomu vyhnout, přidejte white-space: nowrap;do kotev.

Příklady

Statický popover

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

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 dole

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

Popover vlevo

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

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

Pro zavření při dalším kliknutí je vyžadováno specifické označení

Pro správné chování mezi prohlížeči a platformami musíte použít <a>značku, nikoli značku <button>, a také musíte zahrnout atributy 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ží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="".

název Typ Výchozí Popis
animace booleovský skutečný Na vyskakovací okno použijte přechod prolínání CSS
kontejner řetězec | Nepravdivé Nepravdivé

Připojí vyskakovací okno ke konkrétnímu prvku. Příklad: container: 'body'. Tato možnost je užitečná zejména v tom, že vám umožňuje umístit vyskakovací okno v toku dokumentu blízko spouštěcího prvku – což zabrání tomu, aby vyskakovací okno odplouval pryč od spouštěcího prvku během změny velikosti okna.

obsah řetězec | funkce ''

Výchozí hodnota obsahu, pokud data-contentatribut není přítomen.

Je-li zadána funkce, bude volána se svou thisreferenční sadou na prvek, ke kterému je popover připojen.

zpoždění číslo | objekt 0

Zpoždění zobrazení a skrytí popoveru (ms) - nevztahuje se na typ ručního spouštění

Pokud je zadáno číslo, použije se prodleva pro skrytí/zobrazení

Struktura objektu je:delay: { "show": 500, "hide": 100 }

html booleovský Nepravdivé Vložte HTML do vyskakovacího okna. Pokud je nepravda, textk vložení obsahu do DOM se použije metoda jQuery. Pokud se obáváte útoků XSS, použijte text.
umístění řetězec | funkce 'že jo'

Jak umístit popover - nahoře | dole | vlevo | vpravo | auto.
Když je zadáno "auto", dynamicky se změní orientace vyskakovacího okna. Pokud je například umístění "automaticky vlevo", vyskakovací okno se zobrazí vlevo, pokud je to možné, jinak se zobrazí vpravo.

Když je k určení umístění použita funkce, je volána s popover uzlem DOM jako prvním argumentem a spouštěcím prvkem DOM uzlem jako druhým. Kontext thisje nastaven na instanci vyskakovacího okna.

volič tětiva Nepravdivé Pokud je k dispozici selektor, překryvné objekty budou delegovány na zadané cíle. V praxi se to používá k umožnění přidávání vyskakovacích oken do dynamického obsahu HTML. Podívejte se na tento a informativní příklad .
šablona tětiva '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

Základní HTML, které se použije při vytváření vyskakovacího okna.

Popover titlebude vstříknut do .popover-title.

Popover contentbude vstříknut do .popover-content.

.arrowse stane šipkou vyskakovacího okna.

Nejvzdálenější prvek obalu by měl mít .popovertřídu.

titul řetězec | funkce ''

Výchozí hodnota názvu, pokud titleatribut není přítomen.

Je-li zadána funkce, bude volána se svou thisreferenční sadou na prvek, ke kterému je popover připojen.

spoušť tětiva 'kliknout' Jak se spouští vyskakovací okno - klikněte | vznášet se | zaměření | manuál. Můžete předat více spouštěčů; oddělte je mezerou. manualnelze kombinovat s žádným jiným spouštěčem.
výřez řetězec | objekt | funkce { selector: 'body', padding: 0 }

Udržuje vyskakovací okno v mezích tohoto prvku. Příklad: viewport: '#viewport'nebo{ "selector": "#viewport", "padding": 0 }

Je-li zadána funkce, je volána s jediným argumentem spouštěcího prvku DOM node. Kontext thisje nastaven na instanci vyskakovacího okna.

Atributy dat pro jednotlivá vyskakovací okna

Volby pro jednotlivá vyskakovací okna lze alternativně specifikovat pomocí datových atributů, jak je vysvětleno výše.

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

Typ události Popis
show.bs.popover Tato událost se spustí okamžitě při showvolání metody instance.
zobrazeno.bs.popover Tato událost se spustí, když se vyskakovací okno zviditelní uživateli (bude čekat na dokončení přechodů CSS).
hide.bs.popover Tato událost se spustí okamžitě po hidezavolání metody instance.
skrytý.bs.popover Tato událost se spustí, když je vyskakovací okno skryto před uživatelem (bude čekat na dokončení přechodů CSS).
vložený.bs.popover Tato událost se spustí po show.bs.popoverudálosti, kdy byla šablona vyskakovacího okna přidána do modelu DOM.
$('#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.

Typ události Popis
zavřít.bs.upozornění Tato událost se spustí okamžitě při closevolání metody instance.
zavřeno.bs.upozornění Tato událost se spustí, když bude výstraha uzavřena (bude čekat na dokončení přechodů CSS).
$('#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ů.

Kompatibilita mezi prohlížeči

Firefox přetrvává stavy řízení formuláře (deaktivace a kontrola) během načítání stránky . Řešením je použití autocomplete="off". Viz chyba Mozilly #654072 .

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.

Použijte jakýkoli stav, který se vám líbí!

Pro tuto ukázku používáme data-loading-texta $().button('loading'), ale to není jediný stav, který můžete použít. Více o tom naleznete níže v $().button(string)dokumentaci .

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

Předem přepnutá tlačítka potřebují .activeaaria-pressed="true"

U předem přepnutých tlačítek musíte přidat .activetřídu a aria-pressed="true"atribut k buttonsobě.

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

Potřebují předvolené možnosti.active

U předem vybraných možností musíte .activetřídu přidat do vstupu labelsami.

Vizuálně kontrolovaný stav se aktualizuje pouze kliknutím

Pokud je zaškrtnutý stav tlačítka zaškrtávacího políčka aktualizován, aniž by se clickna tlačítku spustila událost (např. přes <input type="reset">nebo přes nastavení checkedvlastnosti vstupu), budete muset přepnout .activetřídu na vstupu 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>

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

Závislost na pluginech

Collapse vyžaduje, aby byl ve vaší verzi Bootstrapu zahrnut plugin pro přechody .

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.

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>

Příklad akordeonu

Rozšiřte výchozí chování sbalení a vytvořte harmoniku s komponentou panelu.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad chobotnice. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua dát na něj ptáka chobotnice single-origin coffee nulla expectnda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan kromě řezníka vice lomo. Legíny occaecat řemeslné pivo farma-to-table, syrový denim estetický synth nesciunt pravděpodobně jste o nich neslyšeli accusamus labore udržitelné VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad chobotnice. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua dát na něj ptáka chobotnice single-origin coffee nulla expectnda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan kromě řezníka vice lomo. Legíny occaecat řemeslné pivo farma-to-table, syrový denim estetický synth nesciunt pravděpodobně jste o nich neslyšeli accusamus labore udržitelné VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad chobotnice. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua dát na něj ptáka chobotnice single-origin coffee nulla expectnda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan kromě řezníka vice lomo. Legíny occaecat řemeslné pivo farma-to-table, syrový denim estetický synth nesciunt pravděpodobně jste o nich neslyšeli accusamus labore udržitelné 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 také možné vyměnit .panel-bodys za .list-groups.

  • Bootply
  • Jeden itmus ac facilin
  • Druhý eros

Zpřístupněte ovládací prvky rozbalení/sbalení

Nezapomeňte přidat aria-expandeddo ovládacího prvku. Tento atribut explicitně definuje aktuální stav skládacího prvku pro čtečky obrazovky a podobné asistenční technologie. Pokud je sbalitelný prvek ve výchozím nastavení uzavřen, měl by mít hodnotu aria-expanded="false". Pokud jste sbalitelný prvek nastavili tak, aby byl ve výchozím nastavení otevřený pomocí intřídy, nastavte aria-expanded="true"místo toho na ovládacím prvku. Plugin automaticky přepne tento atribut na základě toho, zda byl skládací prvek otevřen nebo zavřen.

Navíc, pokud váš ovládací prvek cílí na jeden skládací prvek – tj. data-targetatribut ukazuje na idselektor – můžete aria-controlsk ovládacímu prvku přidat další atribut obsahující idskládací prvek. Moderní čtečky obrazovky a podobné asistenční technologie využívají tohoto atributu k tomu, aby uživatelům poskytly další zkratky pro přímou navigaci k samotnému skládacímu prvku.

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

název typ výchozí popis
rodič volič Nepravdivé Pokud je k dispozici selektor, všechny sbalitelné prvky pod zadaným nadřazeným prvkem se při zobrazení této skládací položky uzavřou. (podobné tradičnímu chování na akordeonu - to závisí na paneltřídě)
přepnout booleovský skutečný Přepíná sbalitelný prvek při vyvolání

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

Typ události Popis
show.bs.kolaps Tato událost se spustí okamžitě při showvolání metody instance.
zobrazeno.bs.kolaps Tato událost se spustí, když je prvek sbalení viditelný pro uživatele (bude čekat na dokončení přechodů CSS).
skrýt.bs.kolaps Tato událost se spustí okamžitě po hidezavolání metody.
skrytý.bs.kolaps Tato událost se spustí, když byl prvek sbalení skrytý před uživatelem (bude čekat na dokončení přechodů CSS).
$('#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.

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

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

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

název typ výchozí popis
časový úsek číslo 5000 Doba prodlevy mezi automatickým cyklováním položky. Pokud je hodnota false, karusel se automaticky nezacyklí.
pauza řetězec | nula "vznášet se" Je-li nastaveno na "hover", pozastaví cyklování karuselu mouseentera obnoví cyklování karuselu mouseleave. Pokud je nastaveno na null, umístění kurzoru nad karusel jej nezastaví.
zabalit booleovský skutečný Zda by se měl kolotoč nepřetržitě pohybovat nebo mít tvrdé zastávky.
klávesnice booleovský skutečný Zda má karusel reagovat na události klávesnice.

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

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

Prochází položky karuselu zleva doprava.

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

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

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

Přejde na další položku.

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

Typ události Popis
slide.bs.kolotoč Tato událost se spustí okamžitě při slidevyvolání metody instance.
posuvný.bs.kolotoč Tato událost se spustí, když karusel dokončí svůj posuvný přechod.
$('#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".

název typ výchozí popis
offset číslo | funkce | objekt 10 Pixely k odsazení od obrazovky při výpočtu pozice posouvání. Pokud je zadáno jediné číslo, posun bude použit v horním i dolním směru. Chcete-li poskytnout jedinečný, spodní a horní odsazení, stačí poskytnout objekt offset: { top: 10 }nebo offset: { top: 10, bottom: 5 }. Použijte funkci, když potřebujete dynamicky vypočítat offset.
cílová volič | uzel | prvek jQuery windowobjekt _ Určuje cílový prvek afixu.

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

Typ události Popis
připevnit.bs.připevnit Tato událost se spustí bezprostředně před připojením prvku.
připevněný.bs.připevnit Tato událost se spustí po připojení prvku.
připevnit-top.bs.připevnit Tato událost se spustí bezprostředně předtím, než byl prvek nahoře připevněn.
připevněný-top.bs.připevnit Tato událost se spustí poté, co byl prvek připevněn nahoře.
připevnit-spodní.bs.připevnit Tato událost se spustí bezprostředně předtím, než byl prvek připevněn – dole.
připevněné-dolní.bs.připevnit Tato událost se spustí poté, co byl prvek připevněn dole.