Individuální nebo sestavené

Pokud jste si stáhli nejnovější verzi Bootstrap, bootstrap.js i bootstrap.min.js obsahují všechny pluginy uvedené na této stránce.

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 první třída API Bootstrapu a při používání zásuvného modulu 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ých atributů zrušením vazby všech událostí v těle s jmenným prostorem `'data-api'`. Tohle vypadá takto:

$ ( 'tělo' ). vypnuto ( '.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:

$ ( 'tělo' ). vypnuto ( '.alert.data-api' )

Programatické rozhraní API

Také se domníváme, že byste měli mít možnost používat všechny zásuvné moduly Bootstrap čistě prostřednictvím JavaScript API. Všechna veřejná rozhraní API jsou jediné, zřetězitelné metody a vracejí kolekci, podle které se jedná.

$ ( ".btn.danger" ). tlačítko ( "přepnout" ). addClass ( "tlustý" )

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 () // inicializován s výchozími hodnotami                       
$ ( "#myModal" ). modální ({ keyboard : false }) // inicializováno bez klávesnice     
$ ( "#myModal" ). modal ( 'show' ) // okamžitě inicializuje a vyvolá show                

Každý plugin také zpřístupňuje svůj nezpracovaný konstruktor ve vlastnosti `Constructor`: $.fn.popover.Constructor. Pokud chcete získat konkrétní instanci pluginu, načtěte ji přímo z prvku: $('[rel=popover]').data('popover').

Události

Bootstrap poskytuje vlastní události pro většinu jedinečných akcí pluginu. 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 tvar minulého příčestí (např. shown) se spouští při dokončení akce.

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

$ ( '#myModal' ). on ( 'show' , function ( e ) {   
    jestliže (! data ) vrátí e . preventDefault () // zastaví zobrazování modalu   
})

O přechodech

Pro jednoduché přechodové efekty zahrňte bootstrap-transition.js jednou vedle ostatních souborů JS. Pokud používáte zkompilovaný (nebo minifikovaný) soubor bootstrap.js, není nutné jej zahrnout – již existuje.

Případy užití

Několik příkladů přechodového pluginu:

• Posouvání nebo mizení v modálech
• Vyblednutí karet
• Slábnoucí upozornění
• Posuvné karuselové panely

Příklady

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.

Statický příklad

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

<div class = "modal hide fade" > 
  <div class = "modal-header" > 
    < typ tlačítka = "button" class = "zavřít" data-dismiss = "modální" aria-hidden = "true" > × </button>    
    <h3> Modální záhlaví </h3>
  </div>
  <div class = "modal-body" > 
    <p> Jedno jemné tělo… </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" > Zavřít </a>  
    <a href = "#" class = "btn btn-primary" > Uložit změny </a>  
  </div>
</div>

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

<-- Tlačítko pro modální spuštění -->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Spustit demo modal </a>    
 
<-- Modální -->
<div class = "modal" id = "myModal" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true" >      
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>    
    <h3 id = "myModalLabel" > Modální záhlaví </h3> 
  </div>
  <div class = "modal-body" > 
    <p> Jedno jemné tělo… </p>
  </div>
  <div class = "modal-footer" > 
    <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > Zavřít </button>   
    <button class = "btn btn-primary" > Uložit změny </button> 
  </div>
</div>

Používání

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" > Spustit modální </button>   

Prostřednictvím JavaScriptu

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

$ ( '#myModal' ). modální ( možnosti )

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' ). modální ({
  klávesnice : false 
})

.modal('toggle')

Ručně přepíná modal.

$ ( '#myModal' ). modální ( 'přepnout' )

.modal('show')

Ručně otevře modal.

$ ( '#myModal' ). modální ( 'ukázat' )

.modal('hide')

Ručně skryje modal.

$ ( '#myModal' ). modální ( 'skrýt' )

Události

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

$ ( '#myModal' ). on ( 'hidden' , function () {   
  // dělej něco…
})

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 karet

Používání

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" > 
  <a class = "dropdown-toggle" href = "#" > Spouštěč rozbalovací nabídky </a>  
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

Chcete-li adresy URL zachovat nedotčené, použijte data-targetnamísto atributu atribut href="#".

<div class = "dropdown" > 
  <a class = "dropdown-toggle" id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html" >      
    Rozbalovací nabídka
    <b class = "caret" ></b> 
  </a>
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

Prostřednictvím JavaScriptu

Vyvolejte rozevírací seznamy pomocí JavaScriptu:

$ ( '.dropdown-toggle' ). rozbalovací nabídka ()

Možnosti

Žádný

Metody

$().rozbalovací nabídka()

Programové rozhraní API pro aktivaci nabídek pro daný navigační panel nebo navigaci s kartami.

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í

Prostřednictvím datových atributů

Chcete-li snadno přidat scrollspy chování do vaší navigace na horní liště, stačí přidat data-spy="scroll"prvek, který chcete špehovat (nejčastěji by to bylo tělo), a data-target=".navbar"vybrat, kterou navigaci použít. Budete chtít použít scrollspy s .navkomponentou.

<body data-spy = "scroll" data-target = ".navbar" > ... </body>  

Prostřednictvím JavaScriptu

Zavolejte scrollspy přes JavaScript:

$ ( '#navbar' ). scrollspy ()

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"]' ). každý ( function () {  
  var $spy = $ ( toto ). scrollspy ( 'obnovit' )
});

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

Příklady karet

Přidejte rychlou, dynamickou funkci karet k přechodu přes panely místního obsahu, a to i prostřednictvím rozbalovacích nabídek.

Používání

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

$ ( '#myTab a' ). klikni ( funkce ( e ) {  
  e . preventDefault ();
  $ ( toto ). karta ( 'zobrazit' );
})

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

$ ( '#myTab a[href="#profile"]' ). karta ( 'zobrazit' ); // Vyberte kartu podle názvu 
$ ( '#myTab a:first' ). karta ( 'zobrazit' ); // Vyberte první kartu 
$ ( '#myTab a:last' ). karta ( 'zobrazit' ); // Vyberte poslední kartu 
$ ( '#myTab li:eq(2) a' ). karta ( 'zobrazit' ); // Vyberte třetí kartu (indexováno 0) 

Označení

Můžete aktivovat navigaci pomocí karty nebo pilulky bez psaní jakéhokoli JavaScriptu pouhým zadáním prvku data-toggle="tab"nebo data-toggle="pill"na prvek. Přidáním tříd nava nav-tabsna kartu ulse použije styl karty Bootstrap.

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > Domovská stránka </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > Profil </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > Zprávy </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > Nastavení </a></li>  
</ul>

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.

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "active" ><a href = "#home" > Home </a></li>  
  <li><a href = "#profile" > Profil </a></li> 
  <li><a href = "#messages" > Zprávy </a></li> 
  <li><a href = "#settings" > Nastavení </a></li> 
</ul>
 
<div class = "tab-content" > 
  <div class = "tab-pane active" id = "home" > ... </div>  
  <div class = "tab-pane" id = "profile" > ... </div>  
  <div class = "tab-pane" id = "messages" > ... </div>  
  <div class = "tab-pane" id = "settings" > ... </div>  
</div>
 
<script>
  $ ( function () {  
    $ ( '#myTab a:last' ). karta ( 'zobrazit' );
  })
</script>

Události

$ ( 'a[data-toggle="tab"]' ). on ( 'show' , function ( e ) {   
  e . target // aktivovaná karta
  e . relatedTarget // předchozí záložka
})

Příklady

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

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

Čtyři směry

Používání

Spusťte popis pomocí JavaScriptu:

$ ( '#příklad' ). popis ( možnosti )

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

Označení

Z důvodů výkonu jsou povolena data-apis Tooltip a Popover. Pokud je chcete používat, zadejte možnost výběru.

<a href = "#" rel = "tooltip" title = "first tooltip" > najeďte na mě </a>   

Metody

$().tooltip(options)

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

.tooltip('show')

Zobrazí popisek prvku.

$ ( '#element' ). popis ( 'zobrazit' )

.tooltip('hide')

Skryje popisek prvku.

$ ( '#element' ). popis ( 'skrýt' )

.tooltip('toggle')

Přepíná popisek prvku.

$ ( '#element' ). popis ( 'přepnout' )

.tooltip('destroy')

Skryje a zničí popisek prvku.

$ ( '#element' ). tooltip ( 'zničit' )

Příklady

Přidejte malé překryvné vrstvy obsahu, jako jsou ty na iPadu, do libovolného prvku pro uložení sekundárních informací. Vyskakovací okno spustíte najetím na tlačítko. Vyžaduje zahrnutí popisku .

Statický popover

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

dataZ JavaScriptu a obsahu v rámci atributu nejsou generovány žádné značky zobrazené jako vyskakovací okna .

Živé demo

Používání

Povolit vyskakovací okna prostřednictvím JavaScriptu:

$ ( '#příklad' ). vyskakovací okno ( možnosti )

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

Označení

Z důvodů výkonu jsou povolena data-apis Tooltip a Popover. Pokud je chcete používat, zadejte možnost výběru.

Metody

$().popover(options)

Inicializuje vyskakovací okna pro kolekci prvků.

.popover('show')

Odhalí vyskakovací okno prvků.

$ ( '#element' ). vyskakovací okno ( 'ukázat' )

.popover('hide')

Skryje vyskakovací okno prvků.

$ ( '#element' ). vyskakovací okno ( 'skrýt' )

.popover('toggle')

Přepíná vyskakovací okno prvků.

$ ( '#element' ). vyskakovací okno ( 'přepnout' )

.popover('zničit')

Skryje a zničí popover prvku.

$ ( '#element' ). vyskakovací okno ( 'zničit' )

Příklad upozornění

Přidejte pomocí tohoto pluginu funkci odmítnutí do všech výstražných zpráv.

Používání

Povolit odmítnutí upozornění pomocí JavaScriptu:

$ ( ".upozornění" ). upozornění ()

Označení

Stačí přidat data-dismiss="alert"k vašemu tlačítku zavřít a automaticky poskytnout funkci uzavření upozornění.

<a class = "zavřít" data-dismiss = "alert" href = "#" > × </a>   

Metody

$().alert()

Zabalí všechny výstrahy s funkcí zavření. Chcete-li, aby se vaše upozornění po zavření animovala, ujistěte se, že na ně již byla použita třída .fadea ..in

.alert('zavřít')

Zavře upozornění.

$ ( ".upozornění" ). upozornění ( 'zavřít' )

Události

Výstražná třída Bootstrapu odhaluje několik událostí pro zapojení do funkce výstrah.

$ ( '#my-upozornění' ). bind ( 'closed' , function () {   
  // dělej něco…
})

Příklady použití

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í

Chcete-li použít stav načítání na tlačítku, přidejte data-loading-text="Loading...".

<button type = "button" class = "btn btn-primary" data-loading-text = "Načítání..." > Stav načítání </button>   

Jediný přepínač

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

<button type = "button" class = "btn" data-toggle = "button" > Single Toggle </button>   

Zaškrtávací políčko

Přidejte data-toggle="buttons-checkbox" pro přepínání stylu zaškrtávacího políčka na skupině btn.

<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button type = "button" class = "btn" > Left </button>  
  <button type = "button" class = "btn" > Middle </button>  
  <button type = "button" class = "btn" > Right </button>  
</div>

Rádio

Přidejte data-toggle="buttons-radio" pro přepínání stylu rádia na skupině btn.

<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button type = "button" class = "btn" > Left </button>  
  <button type = "button" class = "btn" > Middle </button>  
  <button type = "button" class = "btn" > Right </button>  
</div>

Používání

Povolit tlačítka pomocí JavaScriptu:

$ ( '.nav-tabs' ). tlačítko ()

Označení

Atributy dat jsou nedílnou součástí pluginu tlačítka. Podívejte se na níže uvedený příklad kódu pro různé typy označení.

Možnosti

Žádný

Metody

$().button('toggle')

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

<button type = "button" class = "btn" data-toggle = "button" > … </button>    

$().button('načítání')

Nastaví stav tlačítka na načítání - deaktivuje tlačítko a zamění text za načítání textu. Text načítání by měl být definován na prvku tlačítka pomocí atributu data data-loading-text.

<button type = "button" class = "btn" data-loading-text = "loading things..." > ... </button>    

$().button('reset')

Resetuje stav tlačítka - zamění text za původní text.

$().tlačítko(řetězec)

Resetuje stav tlačítka – přepne text do libovolného datově definovaného textového stavu.

< typ tlačítka = "button" class = "btn" data-complete-text = "dokončeno!" > ... </button>    
<script>
  $ ( '.btn' ). tlačítko ( 'kompletní' )
</script>

O

Získejte základní styly a flexibilní podporu pro skládací komponenty, jako jsou akordeony a navigace.

* Vyžaduje zahrnutí pluginu Transitions.

Příklad akordeonu

Pomocí pluginu pro sbalení jsme vytvořili jednoduchý widget ve stylu akordeonu:

< typ tlačítka = "button" class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >    
  jednoduchý skládací
</button>
 
<div id = "demo" class = "collapse in" > … </div>  

Používání

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á použít sbalení. 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" ). kolaps ()

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' ). kolaps ({
  přepnout : nepravda 
})

.collapse('toggle')

Přepne sbalitelný prvek na zobrazený nebo skrytý.

.collapse('show')

Zobrazuje skládací prvek.

.collapse('skrýt')

Skrývá skládací prvek.

Události

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

$ ( '#myCollapsible' ). on ( 'hidden' , function () {   
  // dělej něco…
})

Příklad kolotoče

Níže uvedená prezentace ukazuje obecný plugin a komponentu pro procházení prvků, jako je karusel.

První štítek miniatury

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Druhý štítek miniatury

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Třetí štítek miniatury

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

‹ ›

<div id = "myCarousel" class = "carousel slide" >  
  <!-- Položky karuselu -->
  <div class = "carousel-inner" > 
    <div class = "aktivní položka" > … </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <!-- Carousel nav -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "předchozí" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "další" > › </a>   
</div>

Používání

Prostřednictvím datových atributů

...

Prostřednictvím JavaScriptu

Zavolejte karusel ručně pomocí:

$ ( '.carousel' ). kolotoč ()

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' ). kolotoč ({
  interval : 2000 
})

.carousel('cyklus')

Prochází položky karuselu zleva doprava.

.carousel('pauza')

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

.carousel(číslo)

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

.carousel('předchozí')

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

.carousel('další')

Přejde na další položku.

Události

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

Příklad

Základní, snadno rozšířený plugin pro rychlé vytváření elegantních textových předloh s libovolným textovým vstupem z formuláře.

<input type = "text" data-provide = "typeahead" >  

Používání

Prostřednictvím datových atributů

Přidejte datové atributy, abyste registrovali prvek s funkcí typu ahead, jak je znázorněno v příkladu výše.

Prostřednictvím JavaScriptu

Zavolejte typahead ručně pomocí:

$ ( '.typeahead' ). překlep ()

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

Methods

.typeahead(options)

Initializes an input with a typeahead.

Example

The subnavigation on the left is a live demo of the affix plugin.

Usage

Via data attributes

To easily add affix behavior to any element, just add data-spy="affix" to the element you want to spy on. Then use offsets to define when to toggle the pinning of an element on and off.

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

Via JavaScript

Call the affix plugin via JavaScript:

$('#navbar').affix()

Methods

.affix('refresh')

When using affix in conjunction with adding or removing of elements from the DOM, you'll want to call the refresh method:

$('[data-spy="affix"]').each(function () {
  $(this).affix('refresh')
});

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-offset-top="200".