Individuální nebo sestavené

Pluginy mohou být zahrnuty jednotlivě (ačkoli některé mají požadované závislosti) nebo všechny najednou. Oba bootstrap.js i bootstrap.min.js obsahují všechny pluginy v jednom souboru.

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

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" ). 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é odhaluje svůj nezpracovaný konstruktor na 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').

Žá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 _ tlačítko . noConflict () // vrátí $.fn.button na dříve přiřazenou hodnotu 
$ . fn _ bootstrapBtn = bootstrapButton             // dá $().bootstrapBtn funkci bootstrap

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 minulý tvar participia (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ý) bootstrap.js , není potřeba jej zahrnout – už to tam je.

Případy užití

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

• Posouvání nebo blednutí 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 id = "myModal" class = "modal hide fade" 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" data-toggle = "dropdown" 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

$().dropdown('toggle')

Programové rozhraní API pro přepínání 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 pro přechod mezi 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 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.

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

Z důvodů výkonu jsou tooltip a popover data-apis aktivovány, což znamená, že je musíte inicializovat sami .

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

Čtyři směry

Popisky ve vstupních skupinách

Při používání popisků a vyskakovacích oken se vstupními skupinami Bootstrap budete muset nastavit možnost container(popsáno níže), abyste se vyhnuli nežádoucím vedlejším účinkům.

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í

<a href = "#" data-toggle = "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, k libovolnému prvku pro uložení sekundárních informací. Vyskakovací okno spustíte najetím na tlačítko. Vyžaduje zahrnutí Tooltip .

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

Čtyři směry

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í

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

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 ( 'uzavřeno' , funkce () {   
  // 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í

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

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

Jediný přepínač

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

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

Zaškrtávací políčko

Přidat 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 btn-primary" > Left </button>  
  <button type = "button" class = "btn btn-primary" > Middle </button>  
  <button type = "button" class = "btn btn-primary" > Right </button>  
</div>

Rádio

Přidat 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 btn-primary" > Left </button>  
  <button type = "button" class = "btn btn-primary" > Middle </button>  
  <button type = "button" class = "btn btn-primary" > Right </button>  
</div>

Používání

Povolit tlačítka prostřednictvím 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:

<div class = "akordeon" id = "akordeon2" >  
  <div class = "akordeon-skupina" > 
    <div class = "akordeon-heading" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >    
        Položka skládací skupiny č. 1
      </a>
    </div>
    <div id = "collapseOne" class = "kolaps těla harmoniky v" >  
      <div class = "akordeon-vnitřní" > 
        Anim pariatur klišé...
      </div>
    </div>
  </div>
  <div class = "akordeon-skupina" > 
    <div class = "akordeon-heading" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >    
        Položka skládací skupiny č. 2
      </a>
    </div>
    <div id = "collapseTwo" class = "kolaps těla harmoniky" >  
      <div class = "akordeon-vnitřní" > 
        Anim pariatur klišé...
      </div>
    </div>
  </div>
</div>
...

Plugin můžete použít i bez označení akordeonu. Vytvořit tlačítko přepíná rozbalení a sbalení jiného prvku.

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

Second Thumbnail label

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.

Third Thumbnail label

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" >  
  <ol class = "carusel-indicators" > 
    <li data-target = "#myCarousel" data-slide-to = "0" class = "active" ></li>   
    <li data-target = "#myCarousel" data-slide-to = "1" ></li>  
    <li data-target = "#myCarousel" data-slide-to = "2" ></li>  
  </ol>
  <!-- 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ů

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. Alternativně použijte data-slide-tok předání nezpracovaného indexu snímku do karuselu data-slide-to="2", který přeskočí pozici snímku na konkrétní index začínající na 0.

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

Budete chtít nastavit autocomplete="off", aby se výchozí nabídky prohlížeče nezobrazovaly nad rozevíracím seznamem typu Bootstrap.

Používání

Prostřednictvím datových atributů

Přidáním atributů dat zaregistrujete prvek s funkcí napřed, 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="".

Metody

.typeahead(options)

Inicializuje vstup s přepisem.

Příklad

Subnavigace vlevo je živou ukázkou pluginu afixu.

Používání

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. Poté pomocí posunů definujte, kdy zapnout a vypnout připnutí prvku.

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

Prostřednictvím JavaScriptu

Zavolejte plugin pro připojení pomocí JavaScriptu:

$ ( '#navbar' ). připojit ()

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