Individuálne alebo zostavené

Pluginy môžu byť zahrnuté jednotlivo (hoci niektoré majú požadované závislosti) alebo všetky naraz. Bootstrap.js aj bootstrap.min.js obsahujú všetky pluginy v jednom súbore.

Atribúty údajov

Všetky doplnky Bootstrap môžete používať výlučne prostredníctvom značkovacieho API bez toho, aby ste museli písať jediný riadok JavaScriptu. Toto je API prvej triedy Bootstrapu a pri používaní doplnku by ste ho mali najskôr zvážiť.

To znamená, že v niektorých situáciách môže byť žiaduce túto funkciu vypnúť. Preto poskytujeme aj možnosť deaktivovať API dátových atribútov zrušením väzby všetkých udalostí v tele s priestorom názvov `'data-api'`. Toto vyzerá takto:

$ ( 'telo' ). vypnuté ( '.data-api' )

Ak chcete zacieliť na konkrétny doplnok, stačí zahrnúť názov doplnku ako priestor názvov spolu s priestorom názvov data-api, ako je tento:

$ ( 'telo' ). vypnuté ( '.alert.data-api' )

Programové rozhranie API

Tiež sa domnievame, že by ste mali mať možnosť používať všetky doplnky Bootstrap výhradne cez JavaScript API. Všetky verejné rozhrania API sú jednoduché, reťaziteľné metódy a vracajú kolekciu, podľa ktorej sa koná.

$ ( ".btn.nebezpečenstvo" ). tlačidlo ( "prepnúť" ). addClass ( "tuk" )

Všetky metódy by mali akceptovať voliteľný objekt volieb, reťazec, ktorý je zacielený na konkrétnu metódu, alebo nič (čo spustí doplnok s predvoleným správaním):

$ ( "#myModal" ). modal () // inicializovaný s predvolenými hodnotami                       
$ ( "#myModal" ). modálny ({ keyboard : false }) // inicializovaný bez klávesnice     
$ ( "#myModal" ). modal ( 'show' ) // okamžite inicializuje a vyvolá show                

Každý doplnok tiež odhaľuje svoj nespracovaný konštruktor na vlastnosti `Constructor`: $.fn.popover.Constructor. Ak chcete získať konkrétnu inštanciu doplnku, získajte ju priamo z prvku: $('[rel=popover]').data('popover').

Žiadny konflikt

Niekedy je potrebné použiť Bootstrap pluginy s inými UI frameworkami. Za týchto okolností môže občas dôjsť ku kolíziám menného priestoru. Ak sa tak stane, môžete zavolať .noConflictna doplnok, ktorého hodnotu chcete vrátiť.

var bootstrapButton = $ . fn . tlačidlo . noConflict () // vráti $.fn.button na predtým priradenú hodnotu 
$ . fn . bootstrapBtn = bootstrapButton             // dá $().bootstrapBtn funkciu bootstrap

Diania

Bootstrap poskytuje vlastné udalosti pre väčšinu jedinečných akcií doplnkov. Vo všeobecnosti sú vo forme infinitívu a minulého príčastia – kde infinitív (napr. show) sa spúšťa na začiatku udalosti a jeho minulá forma príčastia (napr. shown) sa spúšťa pri dokončení akcie.

Všetky nekonečné udalosti poskytujú funkciu preventDefault. To poskytuje možnosť zastaviť vykonávanie akcie pred jej spustením.

$ ( '#myModal' ). on ( 'show' , function ( e ) {   
    ak (! údaje ) vráti e . preventDefault () // zastaví zobrazovanie modalu   
})

O prechodoch

Pre jednoduché prechodové efekty zahrňte bootstrap-transition.js raz spolu s ostatnými súbormi JS. Ak používate skompilovaný (alebo miniifikovaný) bootstrap.js , nie je potrebné ho pridávať – už tam je.

Prípady použitia

Niekoľko príkladov prechodového doplnku:

• Kĺzanie alebo blednutie v modáloch
• Zmiznutie kariet
• Stlmenie upozornení
• Posuvné karuselové tabule

Príklady

Modály sú zjednodušené, ale flexibilné dialógové výzvy s minimálnou požadovanou funkčnosťou a inteligentnými predvolenými nastaveniami.

Statický príklad

Vykreslený modál s hlavičkou, telom a množinou akcií v päte.

<div class = "modal hide fade" > 
  <div class = "modal-header" > 
    < typ tlačidla = "tlačidlo" class = "zavrieť" data-dismiss = "modálne" aria-hidden = "pravda" > × </button>    
    <h3> Modálna hlavička </h3>
  </div>
  <div class = "modal-body" > 
    <p> Jedno jemné telo… </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" > Zavrieť </a>  
    <a href = "#" class = "btn btn-primary" > Uložiť zmeny </a>  
  </div>
</div>

Živá ukážka

Prepnite modal cez JavaScript kliknutím na tlačidlo nižšie. Posunie sa nadol a bude miznúť z hornej časti stránky.

<!-- Tlačidlo na spustenie modálneho režimu -->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Spustiť demo modal </a>    
 
<!-- Modálny -->
<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álna hlavička </h3> 
  </div>
  <div class = "modal-body" > 
    <p> Jedno jemné telo… </p>
  </div>
  <div class = "modal-footer" > 
    <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > Zavrieť </button>   
    <button class = "btn btn-primary" > Uložiť zmeny </button> 
  </div>
</div>

Použitie

Cez dátové atribúty

Aktivujte modál bez písania JavaScriptu. Nastavte data-toggle="modal"na prvku ovládača, ako je tlačidlo, spolu s data-target="#foo"alebo href="#foo"na zacielenie na konkrétny modál na prepínanie.

<button type = "button" data-toggle = "modal" data-target = "#myModal" > Spustiť modálne </button>   

Cez JavaScript

Zavolajte modal s ID myModals jedným riadkom JavaScriptu:

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

možnosti

Možnosti môžu byť odovzdané prostredníctvom dátových atribútov alebo JavaScriptu. Pre atribúty údajov pripojte názov voľby k data-, ako v data-backdrop="".

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

Metódy

.modal(options)

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

$ ( '#myModal' ). modálny ({
  klávesnica : nepravda 
})

.modal('toggle')

Manuálne prepína modal.

$ ( '#myModal' ). modálny ( 'prepnúť' )

.modal('show')

Manuálne otvorí modál.

$ ( '#myModal' ). modálny ( 'zobraziť' )

.modal('hide')

Manuálne skryje modal.

$ ( '#myModal' ). modálny ( 'skryť' )

Diania

Modálna trieda Bootstrapu odhaľuje niekoľko udalostí na pripojenie k modálnej funkcii.

$ ( '#myModal' ). on ( 'skryté' , funkcia () {   
  // urob niečo…
})

Príklady

Pomocou tohto jednoduchého doplnku môžete pridať rozbaľovacie ponuky takmer ku všetkému, vrátane navigačného panela, kariet a tabliet.

V rámci navigačnej lišty

V rámci kariet

Použitie

Cez dátové atribúty

Pridať data-toggle="dropdown"k odkazu alebo tlačidlu na prepnutie rozbaľovacej ponuky.

<div class = "dropdown" > 
  <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" > Spúšťač rozbaľovacej ponuky </a>   
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

Ak chcete zachovať adresy URL nedotknuté, použite data-targetatribút namiesto atribútu href="#".

<div class = "dropdown" > 
  <a class = "dropdown-toggle" id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html" >      
    Rozbaľovacia ponuka
    <b class = "caret" </b> 
  </a>
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

Cez JavaScript

Zavolajte rozbaľovacie ponuky pomocou JavaScriptu:

$ ( '.dropdown-toggle' ). rozbaľovacia ponuka ()

možnosti

žiadne

Metódy

$().dropdown('toggle')

Programové rozhranie API na prepínanie ponúk pre danú navigačnú lištu alebo navigáciu s kartami.

Príklad v navigačnej lište

Doplnok ScrollSpy slúži na automatickú aktualizáciu cieľov navigácie na základe pozície posúvania. Prejdite oblasťou pod navigačnou lištou a sledujte, ako sa aktívna trieda mení. Rozbaľovacie podpoložky budú tiež zvýraznené.

Použitie

Cez dátové atribúty

Ak chcete jednoducho pridať rolovacie správanie do navigácie v hornej lište, jednoducho pridajte data-spy="scroll"prvok, ktorý chcete špehovať (najčastejšie by to bolo telo), a data-target=".navbar"vyberte, ktorú navigáciu chcete použiť. Budete chcieť použiť scrollspy s .navkomponentom.

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

Cez JavaScript

Zavolajte scrollspy cez JavaScript:

$ ( '#navbar' ). scrollspy ()

Metódy

.scrollspy('refresh')

Keď používate scrollspy v spojení s pridávaním alebo odstraňovaním prvkov z DOM, budete musieť zavolať metódu refresh takto:

$ ( '[data-spy="scroll"]' ). každý ( function () {  
  var $spy = $ ( toto ). scrollspy ( 'obnoviť' )
});

možnosti

Možnosti môžu byť odovzdané prostredníctvom dátových atribútov alebo JavaScriptu. Pre atribúty údajov pripojte názov voľby k data-, ako v data-offset="".

Diania

Príklady kariet

Pridajte rýchlu, dynamickú funkciu kariet na prechod cez tably miestneho obsahu, dokonca aj cez rozbaľovacie ponuky.

Použitie

Povoliť karty s tabuľkami cez JavaScript (každá karta musí byť aktivovaná samostatne):

$ ( '#myTab a' ). klikni ( funkcia ( e ) {  
  e . zabrániťPredvolené ();
  $ ( toto ). karta ( 'zobraziť' );
})

Jednotlivé karty môžete aktivovať niekoľkými spôsobmi:

$ ( '#myTab a[href="#profile"]' ). karta ( 'zobraziť' ); // Vyberte kartu podľa názvu 
$ ( '#myTab a:first' ). karta ( 'zobraziť' ); // Vyberte prvú kartu 
$ ( '#myTab a:last' ). karta ( 'zobraziť' ); // Vyberte poslednú kartu 
$ ( '#myTab li:eq(2) a' ). karta ( 'zobraziť' ); // Vyberte tretiu kartu (indexovaná 0) 

Označenie

Môžete aktivovať navigáciu na karte alebo tablete bez písania akéhokoľvek JavaScriptu jednoduchým zadaním data-toggle="tab"alebo data-toggle="pill"na prvku. Pridaním tried nava nav-tabsna kartu ulsa použije štýl karty Bootstrap.

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > Domov </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > Profil </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > Správy </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > Nastavenia </a></li>  
</ul>

Metódy

$().tab

Aktivuje prvok karty a kontajner obsahu. Karta by mala mať buď a data-targetalebo hrefzacielenie na kontajnerový uzol v DOM.

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "active" ><a href = "#home" > Domov </a></li>  
  <li><a href = "#profile" > Profil </a></li> 
  <li><a href = "#messages" > Správy </a></li> 
  <li><a href = "#settings" > Nastavenia </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>
  $ ( funkcia () {  
    $ ( '#myTab a:last' ). karta ( 'zobraziť' );
  })
</script>

Diania

$ ( 'a[data-toggle="tab"]' ). on ( 'zobrazené' , funkcia ( e ) {   
  e . target // aktivovaná karta
  e . relatedTarget // predchádzajúca karta
})

Príklady

Inšpirované vynikajúcim doplnkom jQuery.tipsy, ktorý napísal Jason Frame; Popisy sú aktualizovanou verziou, ktorá sa nespolieha na obrázky, používa CSS3 na animácie a dátové atribúty na lokálne ukladanie titulkov.

Z dôvodov výkonu sú popis a popover data-apis aktivované, čo znamená, že ich musíte inicializovať sami .

Umiestnením kurzora myši na odkazy nižšie zobrazíte popisy:

Štyri smery

Popisy vo vstupných skupinách

Keď používate popisky a kontextové okná so vstupnými skupinami Bootstrap, budete musieť nastaviť možnosť container(dokumentovaná nižšie), aby ste sa vyhli nežiaducim vedľajším účinkom.

Použitie

Spustite popis pomocou JavaScriptu:

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

možnosti

Možnosti môžu byť odovzdané prostredníctvom dátových atribútov alebo JavaScriptu. Pre atribúty údajov pripojte názov voľby k data-, ako v data-animation="".

Označenie

<a href = "#" data-toggle = "tooltip" title = "first tooltip" > umiestnite kurzor myši na mňa </a>   

Metódy

$().tooltip(options)

Ku kolekcii prvkov pripojí popisovač.

.tooltip('show')

Zobrazí popis prvku.

$ ( '#element' ). popis ( 'zobraziť' )

.tooltip('hide')

Skryje popis prvku.

$ ( '#element' ). popis ( 'skryť' )

.tooltip('toggle')

Prepína popis prvku.

$ ( '#element' ). popis ( 'prepnúť' )

.tooltip('destroy')

Skryje a zničí popis prvku.

$ ( '#element' ). popis ( 'zničiť' )

Príklady

Pridajte malé prekryvné vrstvy obsahu, ako sú tie na iPade, do ľubovoľného prvku, aby ste mohli umiestniť sekundárne informácie. Ak chcete spustiť kontextové okno, umiestnite kurzor myši na tlačidlo. Vyžaduje sa zahrnutie popisu .

Statický popover

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

Z JavaScriptu a obsahu v rámci atribútu sa negenerujú žiadne značky zobrazené ako kontextové okná data.

Živá ukážka

Štyri smery

Použitie

Povoliť vyskakovacie okná prostredníctvom JavaScriptu:

$ ( '#príklad' ). vyskakovacie okno ( možnosti )

možnosti

Možnosti môžu byť odovzdané prostredníctvom dátových atribútov alebo JavaScriptu. Pre atribúty údajov pripojte názov voľby k data-, ako v data-animation="".

Označenie

Z výkonnostných dôvodov sú povolené Tooltip a Popover data-apis. Ak ich chcete použiť, stačí zadať možnosť výberu.

Metódy

$().popover(options)

Inicializuje vyskakovacie okná pre kolekciu prvkov.

.popover('show')

Odhaľuje kontextové okno prvkov.

$ ( '#element' ). vyskakovacie okno ( 'zobraziť' )

.popover('hide')

Skryje vyskakovacie okno prvkov.

$ ( '#element' ). vyskakovacie okno ( 'skryť' )

.popover('toggle')

Prepína vyskakovacie okno prvkov.

$ ( '#element' ). vyskakovacie okno ( 'prepnúť' )

.popover('zničiť')

Skryje a zničí popover prvku.

$ ( '#element' ). vyskakovacie okno ( 'zničiť' )

Príklady upozornení

Pomocou tohto doplnku pridajte do všetkých výstražných správ funkciu odmietnutia.

Použitie

Povoliť zrušenie upozornenia prostredníctvom JavaScriptu:

$ ( ".upozornenie" ). upozornenie ()

Označenie

Stačí pridať data-dismiss="alert"tlačidlo na zatvorenie, aby sa automaticky aktivovala funkcia zatvorenia upozornenia.

<a class = "close" data-dismiss = "alert" href = "#" > × </a>   

Metódy

$().alert()

Zabalí všetky upozornenia do funkcie blízkej. Ak chcete, aby sa vaše upozornenia po zatvorení animovali, uistite sa, že už majú aplikovanú triedu .fadea ..in

.alert('zavrieť')

Zatvorí upozornenie.

$ ( ".upozornenie" ). upozornenie ( 'zavrieť' )

Diania

Výstražná trieda Bootstrapu odhaľuje niekoľko udalostí na pripojenie k funkcii výstrahy.

$ ( '#my-upozornenie' ). bind ( 'zatvorené' , funkcia () {   
  // urob niečo…
})

Príklady použitia

Urobte viac s tlačidlami. Stavy ovládacích tlačidiel alebo vytváranie skupín tlačidiel pre viac komponentov, ako sú panely s nástrojmi.

Štátny

Pridať data-loading-text="Loading...", ak chcete použiť stav načítania na tlačidle.

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

Jediný prepínač

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

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

začiarkavacie políčko

Pridať data-toggle="buttons-checkbox"pre prepínanie štýlu začiarkavacieho políčka na skupine 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

Pridať data-toggle="buttons-radio"pre prepínanie štýlu rádia v skupine 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žitie

Povoliť tlačidlá cez JavaScript:

$ ( '.nav-tabs' ). tlačidlo ()

Označenie

Atribúty údajov sú neoddeliteľnou súčasťou doplnku tlačidiel. Pozrite si príklad kódu nižšie pre rôzne typy značiek.

možnosti

žiadne

Metódy

$().button('toggle')

Prepína stav push. Dodáva tlačidlu vzhľad, že bolo aktivované.

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

$().button('načítava sa')

Nastaví stav tlačidla na načítanie - deaktivuje tlačidlo a zamení text za načítaný text. Načítavaný text by mal byť definovaný na prvku button pomocou atribútu data data-loading-text.

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

$().button('reset')

Resetuje stav tlačidla - zamení text na pôvodný text.

$().tlačidlo(reťazec)

Resetuje stav tlačidla - prepne text do ľubovoľného stavu textu definovaného údajmi.

< typ tlačidla = "button" class = "btn" data-complete-text = "dokončené!" > ... </button>    
<script>
  $ ( '.btn' ). tlačidlo ( 'kompletné' )
</script>

O

Získajte základné štýly a flexibilnú podporu pre skladacie komponenty, ako sú akordeóny a navigácia.

* Vyžaduje, aby bol zahrnutý doplnok Transitions.

Príklad akordeónu

Pomocou doplnku na zbalenie sme vytvorili jednoduchý widget v štýle akordeónu:

<div class = "akordeón" id = "akordeón2" >  
  <div class = "akordeónová skupina" > 
    <div class = "akordeón-hlavička" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >    
        Skladacia skupinová položka č. 1
      </a>
    </div>
    <div id = "collapseOne" class = "zrútenie tela harmoniky v" >  
      <div class = "akordeón-vnútorná" > 
        Anim pariatur klišé...
      </div>
    </div>
  </div>
  <div class = "akordeónová skupina" > 
    <div class = "akordeón-hlavička" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >    
        Skladacia skupinová položka č. 2
      </a>
    </div>
    <div id = "collapseTwo" class = "kolaps tela harmoniky" >  
      <div class = "akordeón-vnútorná" > 
        Anim pariatur klišé...
      </div>
    </div>
  </div>
</div>
...

Doplnok môžete použiť aj bez označenia akordeónu. Vytvoriť tlačidlo na prepínanie rozbalenia a zbalenia iného prvku.

<button type = "button" class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >    
  jednoduchý skladací
</button>
 
<div id = "demo" class = "collapse in" > … </div>  

Použitie

Cez dátové atribúty

Stačí pridať data-toggle="collapse"a data-targetdo prvku, aby ste automaticky priradili kontrolu nad skladacím prvkom. Atribút data-targetakceptuje selektor css, na ktorý sa má použiť zbalenie. Nezabudnite pridať triedu collapsedo skladacieho prvku. Ak chcete, aby bola predvolene otvorená, pridajte ďalšiu triedu in.

Ak chcete do skladacieho ovládacieho prvku pridať správu skupiny podobnú akordeónu, pridajte atribút data data-parent="#selector". Pozrite si ukážku, aby ste to videli v akcii.

Cez JavaScript

Povoliť manuálne pomocou:

$ ( ".collapse" ). kolaps ()

možnosti

Možnosti môžu byť odovzdané prostredníctvom dátových atribútov alebo JavaScriptu. Pre atribúty údajov pripojte názov voľby k data-, ako v data-parent="".

Metódy

.collapse(možnosti)

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

$ ( '#myCollapsible' ). kolaps ({
  prepnúť : nepravda 
})

.collapse('toggle')

Prepne zbaliteľný prvok na zobrazený alebo skrytý.

.collapse('show')

Zobrazuje skladací prvok.

.collapse('skryť')

Skryje skladací prvok.

Diania

Trieda zbalenia Bootstrapu odhaľuje niekoľko udalostí na pripojenie k funkcii zbalenia.

$ ( '#myCollapsible' ). on ( 'skryté' , funkcia () {   
  // urob niečo…
})

Príklad kolotoča

Nižšie uvedená prezentácia zobrazuje všeobecný doplnok a komponent na prepínanie medzi prvkami, ako je kolotoč.

Prvý štítok s miniatúrou

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 = "active item" > … </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <!-- Carousel nav -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "next" > › </a>   
</div>

Použitie

Cez dátové atribúty

Pomocou atribútov údajov môžete jednoducho ovládať polohu karuselu. data-slideakceptuje kľúčové slová prevalebo next, ktoré zmenia pozíciu snímky vzhľadom na jej aktuálnu pozíciu. Prípadne použite data-slide-tona odovzdanie nespracovaného indexu snímky do karuselu data-slide-to="2", ktorý preskočí na pozíciu snímky na konkrétny index začínajúci na 0.

Cez JavaScript

Zavolajte karusel manuálne pomocou:

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

možnosti

Možnosti môžu byť odovzdané prostredníctvom dátových atribútov alebo JavaScriptz. Pre atribúty údajov pripojte názov voľby k data-, ako v data-interval="".

Metódy

.kolotoč (možnosti)

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

$ ( '.kolotoč' ). kolotoč ({
  interval : 2000 
})

.carousel('cyklus')

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

.carousel('pauza')

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

.carousel(číslo)

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

.carousel('prev')

Prejde na predchádzajúcu položku.

.carousel('next')

Prejde na ďalšiu položku.

Diania

Trieda karuselu Bootstrap odhaľuje dve udalosti na pripojenie k funkcii karuselu.

Príklad

Základný, ľahko rozšírený plugin na rýchle vytváranie elegantných hlások s ľubovoľným zadávaním textu z formulára.

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

Budete chcieť nastaviť autocomplete="off", aby sa predvolené ponuky prehliadača nezobrazovali v rozbaľovacom zozname typu Bootstrap.

Použitie

Cez dátové atribúty

Pridajte atribúty údajov na registráciu prvku s funkciou prepisu, ako je uvedené v príklade vyššie.

Cez JavaScript

Zavolajte prepis manuálne pomocou:

$ ( '.typeahead' ). písať dopredu ()

možnosti

Možnosti môžu byť odovzdané prostredníctvom dátových atribútov alebo JavaScriptu. Pre atribúty údajov pripojte názov voľby k data-, ako v data-source="".

Metódy

.typeahead(options)

Inicializuje vstup písaním dopredu.

Príklad

Subnavigácia vľavo je živá ukážka doplnku afix.

Použitie

Cez dátové atribúty

Ak chcete jednoducho pridať správanie pri pripájaní k akémukoľvek prvku, stačí pridať data-spy="affix"k prvku, ktorý chcete špehovať. Potom pomocou posunov definujte, kedy zapnúť a vypnúť pripnutie prvku.

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

Cez JavaScript

Zavolajte doplnok na pripojenie cez JavaScript:

$ ( '#navbar' ). pripojiť ()

možnosti

Možnosti môžu byť odovzdané prostredníctvom dátových atribútov alebo JavaScriptu. Pre atribúty údajov pripojte názov voľby k data-, ako v data-offset-top="200".