JavaScript
Oživte komponenty Bootstrapu pomocou viac ako tuctu vlastných doplnkov jQuery. Jednoducho ich zahrňte všetky alebo jeden po druhom.
Oživte komponenty Bootstrapu pomocou viac ako tuctu vlastných doplnkov jQuery. Jednoducho ich zahrňte všetky alebo jeden po druhom.
Pluginy môžu byť zahrnuté jednotlivo (pomocou jednotlivých *.js
súborov Bootstrapu) alebo všetky naraz (pomocou bootstrap.js
alebo minifikovaného súboru bootstrap.min.js
).
Oba bootstrap.js
a bootstrap.min.js
obsahujú všetky doplnky v jednom súbore. Zahrňte iba jednu.
Niektoré doplnky a komponenty CSS závisia od iných doplnkov. Ak zahrniete doplnky jednotlivo, nezabudnite skontrolovať tieto závislosti v dokumentoch. Upozorňujeme tiež, že všetky doplnky závisia od jQuery (to znamená, že jQuery musí byť zahrnuté pred súbormi doplnkov). Ak chcete zistiť, ktoré verzie jQuery sú podporované, pozrite si našu stránku.bower.json
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 prvotriedne API Bootstrapu a pri používaní doplnku by ste ho mali najprv 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 dokumente s priestorom názvov data-api
. Toto vyzerá takto:
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:
Nepoužívajte atribúty údajov z viacerých doplnkov v rovnakom prvku. Tlačidlo napríklad nemôže mať popis a zároveň prepínať modal. Aby ste to dosiahli, použite ovíjací prvok.
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á.
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):
Každý doplnok tiež odhaľuje svoj pôvodný konštruktor na Constructor
vlastnosti: $.fn.popover.Constructor
. Ak chcete získať konkrétnu inštanciu doplnku, získajte ju priamo z prvku: $('[rel="popover"]').data('popover')
.
Predvolené nastavenia doplnku môžete zmeniť úpravou Constructor.DEFAULTS
objektu doplnku:
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ť .noConflict
na doplnok, ktorého hodnotu chcete vrátiť.
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.
Od 3.0.0 majú všetky udalosti Bootstrap menný priestor.
Všetky nekonečné udalosti poskytujú preventDefault
funkčnosť. To poskytuje možnosť zastaviť vykonávanie akcie pred jej spustením.
K verzii každého z doplnkov jQuery Bootstrapu je možné pristupovať prostredníctvom VERSION
vlastnosti konštruktora doplnku. Napríklad pre doplnok tooltip:
Doplnky Bootstrapu neklesajú obzvlášť elegantne, keď je JavaScript zakázaný. Ak vám v tomto prípade záleží na používateľskej skúsenosti, použite <noscript>
na vysvetlenie situácie (a ako znova povoliť JavaScript) svojim používateľom a/alebo pridajte svoje vlastné záložné.
Bootstrap oficiálne nepodporuje JavaScriptové knižnice tretích strán, ako je Prototype alebo jQuery UI. Napriek .noConflict
udalostiam s menným priestorom sa môžu vyskytnúť problémy s kompatibilitou, ktoré budete musieť vyriešiť sami.
Pre jednoduché prechodové efekty zahrňte transition.js
raz spolu s ostatnými súbormi JS. Ak používate skompilovaný (alebo miniifikovaný) bootstrap.js
, nie je potrebné ho zahrnúť – už to tam je.
Transition.js je základný pomocník pre transitionEnd
udalosti a tiež emulátor prechodu CSS. Používajú ho ostatné doplnky na kontrolu podpory prechodu CSS a na zachytenie visiacich prechodov.
Prechody je možné globálne deaktivovať pomocou nasledujúceho útržku kódu JavaScript, ktorý musí nasledovať po transition.js
(alebo bootstrap.js
prípadne bootstrap.min.js
) načítaní:
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.
Uistite sa, že neotvárate modal, kým je ešte viditeľný iný. Zobrazenie viac ako jedného modálu súčasne vyžaduje vlastný kód.
Vždy sa snažte umiestniť kód HTML modálu na najvyššiu úroveň vo svojom dokumente, aby ste sa vyhli iným komponentom, ktoré by ovplyvňovali vzhľad a/alebo funkčnosť modálu.
Existuje niekoľko upozornení týkajúcich sa používania modálov na mobilných zariadeniach. Podrobnosti nájdete v našich dokumentoch podpory prehliadača .
Vzhľadom na to, ako HTML5 definuje svoju sémantiku, autofocus
atribút HTML nemá žiadny vplyv na modály Bootstrap. Ak chcete dosiahnuť rovnaký efekt, použite vlastný JavaScript:
Vykreslený modál s hlavičkou, telom a množinou akcií v päte.
Prepnite modal cez JavaScript kliknutím na tlačidlo nižšie. Posunie sa nadol a bude miznúť z hornej časti stránky.
Nezabudnite pridať role="dialog"
a aria-labelledby="..."
, odkazujúc na modálny názov, na .modal
a role="document"
na .modal-dialog
samotný názov.
Okrem toho môžete zadať popis svojho modálneho dialógu aria-describedby
pomocou .modal
.
Vkladanie videí YouTube do modálov vyžaduje dodatočný JavaScript, ktorý nie je súčasťou Bootstrapu, aby sa prehrávanie automaticky zastavilo a ďalšie. Viac informácií nájdete v tomto užitočnom príspevku Stack Overflow .
Modály majú dve voliteľné veľkosti dostupné prostredníctvom tried modifikátorov, ktoré sa umiestnia na .modal-dialog
.
V prípade modálov, ktoré sa jednoducho objavia, než aby sa rozplynuli, odstráňte .fade
triedu zo svojho modálneho označenia.
Ak chcete využiť systém mriežky Bootstrap v rámci modálu, stačí vložiť .row
do .modal-body
a potom použiť triedy normálneho mriežkového systému.
Máte veľa tlačidiel, ktoré spúšťajú rovnaký modál, len s mierne odlišným obsahom? Použite event.relatedTarget
a HTML data-*
atribúty (prípadne cez jQuery ) na zmenu obsahu modálu v závislosti od toho, na ktoré tlačidlo ste klikli. Podrobnosti nájdete v dokumentoch Modal Events relatedTarget
,
Modálny doplnok prepína váš skrytý obsah na požiadanie prostredníctvom atribútov údajov alebo JavaScriptu. Pridáva tiež .modal-open
k <body>
prepísaniu predvoleného správania rolovania a generuje oblasť .modal-backdrop
na kliknutie na zrušenie zobrazených modálov pri kliknutí mimo modálu.
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.
Zavolajte modal s ID myModal
s jedným riadkom JavaScriptu:
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=""
.
názov | typu | predvolená | popis |
---|---|---|---|
pozadie | boolean alebo reťazec'static' |
pravda | Obsahuje prvok modálneho pozadia. Prípadne zadajte static pozadie, ktoré nezatvorí modál po kliknutí. |
klávesnica | boolovská hodnota | pravda | Zatvorí modal po stlačení klávesu Escape |
šou | boolovská hodnota | pravda | Po inicializácii zobrazí modal. |
diaľkový | cesta | falošný | Táto možnosť je od verzie 3.3.0 zastaraná a vo verzii 4 bola odstránená. Namiesto toho odporúčame použiť šablóny na strane klienta alebo rámec viazania údajov, prípadne zavolať jQuery.load sami. Ak je poskytnutá vzdialená adresa URL, obsah sa načíta raz pomocou |
.modal(options)
Aktivuje váš obsah ako modálny. Prijíma voliteľné možnosti object
.
.modal('toggle')
Manuálne prepína modal. Vráti sa k volajúcemu predtým, ako sa modal skutočne ukázal alebo skryl (tj predtým, ako nastane udalosť shown.bs.modal
alebo ).hidden.bs.modal
.modal('show')
Manuálne otvorí modál. Vráti sa k volajúcemu skôr, ako sa modal skutočne ukázal (tj predtým, ako shown.bs.modal
nastane udalosť).
.modal('hide')
Manuálne skryje modal. Vráti sa k volajúcemu skôr, ako bol modal skutočne skrytý (tj predtým, ako hidden.bs.modal
nastane udalosť).
.modal('handleUpdate')
Znova upraví polohu modálu tak, aby čelil posuvnej lište v prípade, že by sa nejaký objavil, čo by spôsobilo skok doľava.
Potrebné iba vtedy, keď sa výška modálu mení, keď je otvorený.
Modálna trieda Bootstrapu odhaľuje niekoľko udalostí na pripojenie k modálnej funkcii.
Všetky modálne udalosti sa spúšťajú na samotnom modale (tj na <div class="modal">
).
Typ udalosti | Popis |
---|---|
show.bs.modal | Táto udalosť sa spustí okamžite po show zavolaní metódy inštancie. Ak je to spôsobené kliknutím, kliknutý prvok je dostupný ako relatedTarget vlastnosť udalosti. |
zobrazené.bs.modálne | Táto udalosť sa spustí, keď bude modal viditeľný pre používateľa (bude čakať na dokončenie prechodov CSS). Ak je to spôsobené kliknutím, kliknutý prvok je dostupný ako relatedTarget vlastnosť udalosti. |
hide.bs.modal | Táto udalosť sa spustí okamžite po hide zavolaní metódy inštancie. |
skrytý.bs.modálny | Táto udalosť sa spustí, keď sa dokončí skrytie modálu pred používateľom (bude čakať na dokončenie prechodov CSS). |
nabitý.bs.modal | Táto udalosť sa spustí, keď modál načíta obsah pomocou remote možnosti. |
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.
Pomocou dátových atribútov alebo JavaScriptu rozbaľovací doplnok prepína skrytý obsah (rozbaľovacie ponuky) prepínaním .open
triedy na nadradenej položke zoznamu.
Na mobilných zariadeniach sa po otvorení rozbaľovacej ponuky pridá .dropdown-backdrop
oblasť klepnutia na zatvorenie rozbaľovacích ponúk pri klepnutí mimo ponuky, čo je požiadavka na správnu podporu systému iOS. To znamená, že prepnutie z otvorenej rozbaľovacej ponuky do inej rozbaľovacej ponuky vyžaduje ďalšie klepnutie na mobilnom zariadení.
Poznámka: data-toggle="dropdown"
Atribút sa používa pri zatváraní rozbaľovacích ponúk na úrovni aplikácie, takže je dobré ho vždy používať.
Pridať data-toggle="dropdown"
k odkazu alebo tlačidlu na prepnutie rozbaľovacej ponuky.
Ak chcete zachovať adresy URL nedotknuté s tlačidlami odkazov, použite data-target
atribút namiesto atribútu href="#"
.
Zavolajte rozbaľovacie ponuky pomocou JavaScriptu:
data-toggle="dropdown"
stále požadovanéBez ohľadu na to, či zavoláte rozbaľovaciu ponuku prostredníctvom JavaScriptu alebo namiesto toho použijete data-api, data-toggle="dropdown"
musí byť vždy prítomná na spúšťacom prvku rozbaľovacej ponuky.
žiadne
$().dropdown('toggle')
Prepína rozbaľovaciu ponuku daného navigačného panela alebo navigácie s kartami.
Všetky udalosti rozbaľovacej ponuky sa spúšťajú v .dropdown-menu
nadradenom prvku .
Všetky udalosti rozbaľovacej ponuky majú relatedTarget
vlastnosť, ktorej hodnotou je prepínací prvok kotvy.
Typ udalosti | Popis |
---|---|
zobraziť rozbaľovaciu ponuku.bs | Táto udalosť sa spustí okamžite, keď je zavolaná metóda show instance. |
zobrazené.bs.rozbaľovacia ponuka | Táto udalosť sa spustí, keď sa rozbaľovacia ponuka zobrazí používateľovi (bude čakať na dokončenie prechodov CSS). |
skryť.bs.rozbaľovacia ponuka | Táto udalosť sa spustí okamžite po zavolaní metódy skrytia inštancie. |
skryté.bs.rozbaľovacia ponuka | Táto udalosť sa spustí, keď sa rozbaľovacia ponuka skončí skrytím pred používateľom (bude čakať na dokončenie prechodov CSS). |
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é.
Ad legíny keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi predtým, ako vypredali qui. Tumblr práva na bicykel od farmy až po stôl. Anim keffiyeh carles cardigan. Fotka užívateľa Velit seitan mcsweeney 3 wolf moon irure. Cosby sveter lomo jean šortky, williamsburg mikina minim qui pravdepodobne ste o nich nepočuli a kardigan trustový fond culpa biodiesel wes anderson estetický. Nihil vytetovaný accusamus, viera irónia bionafta keffiyeh remeselník ullamco consequat.
Skateboard Veniam Marfa fúzy, tuková brada fugiat velit vidly. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat štyri loko nisi, ea helvetica nulla carles. Potetovaný cosby sveter food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 kreatíva. Carles neestetické cvičenie quis genrify. Brooklyn adipisicing remeselné pivo vice keytar dezert.
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á životnosť id vinyl, echo park consequat quis aliquip banh mi vidly. Vero VHS je adipisicing. Minimálna messenger taška Consectetur nisi DIY. Cred ex in, udržateľný delectus consectetur fanny pack iphone.
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.
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 čokoľvek delectus food truck. Predpokladá sa, že ID syntetizátora Sapiente. Locavore sed helvetica klišé irónia, thundercats ste o nich pravdepodobne nepočuli consequat hoodie bezlepkový lo-fi fap aliquip. Labore elitné miesto predtým, než sa vypredali, Terry richardson proident brunch nesciunt quis cosby sveter pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.
Odkazy na navigačnom paneli musia mať rozlíšiteľné ciele ID. Napríklad <a href="#home">home</a>
musí zodpovedať niečomu v DOM, ako je <div id="home"></div>
.
:visible
prvky sú ignorovanéCieľové prvky, ktoré nie sú v :visible
súlade s jQuery , budú ignorované a ich zodpovedajúce navigačné položky nebudú nikdy zvýraznené.
Bez ohľadu na spôsob implementácie, scrollspy vyžaduje použitie position: relative;
na prvku, ktorý špehujete. Vo väčšine prípadov je to <body>
. Keď budete špehovať iné prvky ako <body>
, uistite sa, že máte height
nastavenú a overflow-y: scroll;
aplikovanú položku.
Ak chcete jednoducho pridať rolovacie správanie do navigácie v hornej lište, pridajte data-spy="scroll"
prvok, ktorý chcete špehovať (najčastejšie to bude <body>
). Potom pridajte data-target
atribút s ID alebo triedou nadradeného prvku ľubovoľného .nav
komponentu Bootstrap.
Po pridaní position: relative;
CSS zavolajte scrollspy cez JavaScript:
.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:
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=""
.
názov | typu | predvolená | popis |
---|---|---|---|
offset | číslo | 10 | Pixely na odsadenie zhora pri výpočte polohy rolovania. |
Typ udalosti | Popis |
---|---|
aktivovať.bs.scrollspy | Táto udalosť sa spustí vždy, keď scrollspy aktivuje novú položku. |
Pridajte rýchlu, dynamickú funkciu kariet na prechod cez tably miestneho obsahu, dokonca aj cez rozbaľovacie ponuky. Vnorené karty nie sú podporované.
Raw denim ste o nich pravdepodobne ešte nepočuli džínsové šortky Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Moustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sveter eu banh mi, qui irure terry richardson ex squid. Aliquip miesto na salvia cillum iphone. Seitan aliquip quis cardigan americké oblečenie, mäsiar 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.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.
Tento doplnok rozširuje komponent navigácie s kartami o pridávanie oblastí s tabuľkami.
Povoliť karty s tabuľkami cez JavaScript (každá karta musí byť aktivovaná samostatne):
Jednotlivé karty môžete aktivovať niekoľkými spôsobmi:
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 nav
a nav-tabs
na kartu ul
sa použije štýl karty Bootstrap , zatiaľ čo pridaním tried nav
a nav-pills
sa použije štýl pilulky .
Ak chcete, aby karty vybledli, pridajte .fade
ku každému .tab-pane
. Prvá tabla karty musí tiež .in
zviditeľniť počiatočný obsah.
$().tab
Aktivuje prvok karty a kontajner obsahu. Karta by mala mať buď a data-target
alebo href
zacielenie na kontajnerový uzol v DOM. Vo vyššie uvedených príkladoch sú karty <a>
s s data-toggle="tab"
atribútmi.
.tab('show')
Vyberie danú kartu a zobrazí jej priradený obsah. Akákoľvek iná karta, ktorá bola predtým vybratá, sa zruší a jej priradený obsah sa skryje. Vráti sa k volajúcemu skôr, než sa tabla karty skutočne zobrazí (tj pred výskytom shown.bs.tab
udalosti).
Pri zobrazení novej karty sa udalosti spúšťajú v nasledujúcom poradí:
hide.bs.tab
(na aktuálnej aktívnej karte)show.bs.tab
(na karte, ktorá sa má zobraziť)hidden.bs.tab
(na predchádzajúcej aktívnej karte, rovnaká ako pri hide.bs.tab
udalosti)shown.bs.tab
(na novo aktívnej práve zobrazenej karte, rovnakej ako pri show.bs.tab
udalosti)Ak ešte nebola aktívna žiadna karta, udalosti hide.bs.tab
a hidden.bs.tab
sa nespustia.
Typ udalosti | Popis |
---|---|
zobraziť.bs.tab | Táto udalosť sa spustí pri zobrazení kariet, ale predtým, než sa zobrazí nová karta. Pomocou event.target a event.relatedTarget zacielite na aktívnu kartu a predchádzajúcu aktívnu kartu (ak je k dispozícii). |
zobrazené.bs.tab | Táto udalosť sa spustí pri zobrazení karty po zobrazení karty. Pomocou event.target a event.relatedTarget zacielite na aktívnu kartu a predchádzajúcu aktívnu kartu (ak je k dispozícii). |
skryť.bs.tab | Táto udalosť sa spustí, keď sa má zobraziť nová karta (a teda predchádzajúca aktívna karta má byť skrytá). Pomocou event.target a event.relatedTarget zacielite na aktuálnu aktívnu kartu a novú kartu, ktorá bude čoskoro aktívna. |
skryté.bs.tab | Táto udalosť sa spustí po zobrazení novej karty (a teda predchádzajúca aktívna karta je skrytá). Pomocou event.target a event.relatedTarget zacielite na predchádzajúcu aktívnu kartu a na novú aktívnu kartu. |
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.
Popisy s názvami s nulovou dĺžkou sa nikdy nezobrazujú.
Umiestnením kurzora myši na odkazy nižšie zobrazíte popisy:
Tesné nohavice ďalšej úrovne keffiyeh , o ktorých ste pravdepodobne ešte nepočuli. Photo booth brada raw denim kníhtlač vegan messenger bag stumptown. 8-bitové americké oblečenie z farmy na stôl seitan, mcsweeney's fixie udržateľná quinoa má vinylovú chambray z froté richardson. Beard stumptown, cardigany banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, štyri loko mcsweeney's cleanse vegan chambray. Skutočne ironický remeselník bez ohľadu na klávesnicu, scénár z farmy na stôl Banky Austin twitter zvládnuť freegan cred raw denim single-origin coffee viral.
K dispozícii sú štyri možnosti: zarovnané hore, vpravo, dole a vľavo.
Z výkonnostných dôvodov sú Tooltip a Popover data-apis voliteľné, čo znamená, že ich musíte inicializovať sami .
Jedným zo spôsobov, ako inicializovať všetky popisy na stránke, je vybrať ich podľa ich data-toggle
atribútu:
Doplnok tooltip generuje obsah a značky na požiadanie a v predvolenom nastavení umiestňuje popisky za ich spúšťací prvok.
Spustite popis pomocou JavaScriptu:
Požadované označenie pre popis je iba data
atribút a title
na elemente HTML chcete mať popis. Vygenerované označenie popisku je pomerne jednoduché, hoci vyžaduje pozíciu (v predvolenom nastavení top
ju doplnok nastaví na hodnotu).
Niekedy chcete pridať popis k hypertextovému odkazu, ktorý zalomí viacero riadkov. Predvolené správanie doplnku tooltip je vycentrovať ho horizontálne a vertikálne. Ak sa tomu chcete vyhnúť, pridajte white-space: nowrap;
do svojich ukotvení.
Pri používaní popisov pre prvky v rámci a .btn-group
alebo .input-group
, alebo pre prvky súvisiace s tabuľkou ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, <tfoot>
), budete musieť špecifikovať možnosť container: 'body'
(zdokumentovanú nižšie), aby ste sa vyhli nežiaducim vedľajším účinkom (ako je rozšírenie prvku a/alebo alebo stratou svojich zaoblených rohov pri spustení popisku).
Pre používateľov navigujúcich pomocou klávesnice, a najmä pre používateľov asistenčných technológií, by ste mali pridávať popisy iba k prvkom zameraným na klávesnicu, ako sú odkazy, ovládacie prvky formulárov alebo ľubovoľné prvky s tabindex="0"
atribútom.
Ak chcete pridať popis k prvku disabled
alebo .disabled
prvku, vložte prvok do prvku a a namiesto toho naň <div>
použite popis .<div>
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=""
.
názov | Typ | Predvolené | Popis |
---|---|---|---|
animácie | boolovská hodnota | pravda | Na popis použite prechod zoslabovania CSS |
kontajner | reťazec | falošný | falošný | Pridá popis ku konkrétnemu prvku. Príklad: |
meškanie | číslo | objekt | 0 | Oneskorenie zobrazenia a skrytia tooltipu (ms) – netýka sa manuálneho typu spúšťania Ak je zadané číslo, oneskorenie sa použije na skrytie/zobrazenie Štruktúra objektu je: |
html | boolovská hodnota | falošný | Vložte HTML do popisku. Ak je hodnota false, text na vloženie obsahu do DOM sa použije metóda jQuery. Ak sa obávate útokov XSS, použite text. |
umiestnenie | reťazec | funkciu | 'top' | Ako umiestniť popis – hore | dole | vľavo | vpravo | auto. Keď sa na určenie umiestnenia použije funkcia, volá sa s popisom uzla DOM ako jej prvým argumentom a spúšťacím prvkom uzol DOM ako jej druhým. Kontext |
selektor | reťazec | falošný | Ak je poskytnutý selektor, objekty popisov budú delegované na zadané ciele. V praxi sa to používa na umožnenie pridávania popisov k dynamickému obsahu HTML. Pozrite si tento a informatívny príklad . |
šablóna | reťazec | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
Základné HTML, ktoré sa má použiť pri vytváraní popisku. Popis
Prvok vonkajšieho obalu by mal mať |
titul | reťazec | funkciu | '' | Predvolená hodnota názvu, ak Ak je zadaná funkcia, zavolá sa so svojou |
spúšťač | reťazec | 'hover focus' | Ako sa spúšťa popis – kliknite | vznášať sa | zameranie | Manuálny. Môžete prejsť viacerými spúšťačmi; oddeľte ich medzerou. manual nie je možné kombinovať so žiadnym iným spúšťačom. |
výrez | reťazec | objekt | funkciu | { selector: 'body', padding: 0 } | Udržuje popis v medziach tohto prvku. Príklad: Ak je zadaná funkcia, je volaná so spúšťacím prvkom DOM node ako jej jediným argumentom. Kontext |
Možnosti pre jednotlivé popisy nástrojov možno alternatívne špecifikovať pomocou atribútov údajov, ako je vysvetlené vyššie.
$().tooltip(options)
Ku kolekcii prvkov pripojí popisovač.
.tooltip('show')
Zobrazí popis prvku. Vráti sa k volajúcemu skôr, ako sa skutočne zobrazil popis (tj predtým, ako shown.bs.tooltip
dôjde k udalosti). Toto sa považuje za „manuálne“ spustenie popisku. Popisy s názvami s nulovou dĺžkou sa nikdy nezobrazujú.
.tooltip('hide')
Skryje popis prvku. Vráti sa k volajúcemu skôr, ako bol popis skutočne skrytý (tj pred výskytom hidden.bs.tooltip
udalosti). Toto sa považuje za „manuálne“ spustenie popisku.
.tooltip('toggle')
Prepína popis prvku. Vráti sa k volajúcemu skôr, než sa popis skutočne zobrazí alebo skryje (tj predtým, ako nastane udalosť shown.bs.tooltip
alebo ). hidden.bs.tooltip
Toto sa považuje za „manuálne“ spustenie popisku.
.tooltip('destroy')
Skryje a zničí popis prvku. Popisy, ktoré používajú delegovanie (ktoré sú vytvorené pomocou voľby ) selector
, nemožno jednotlivo zničiť na podradených spúšťacích prvkoch.
Typ udalosti | Popis |
---|---|
zobraziť.bs.popis | Táto udalosť sa spustí okamžite po show zavolaní metódy inštancie. |
zobrazený.bs.tip | Táto udalosť sa spustí, keď sa popis zobrazí používateľovi (bude čakať na dokončenie prechodov CSS). |
hide.bs.tooltip | Táto udalosť sa spustí okamžite po hide zavolaní metódy inštancie. |
skrytý.bs.tip | Táto udalosť sa spustí, keď skončí skrytie popisu pred používateľom (bude čakať na dokončenie prechodov CSS). |
vložený.bs.tip | Táto udalosť sa spustí po show.bs.tooltip udalosti, keď bola šablóna popisu pridaná do modelu DOM. |
Pridajte malé prekryvné vrstvy obsahu, ako sú tie na iPade, do ľubovoľného prvku, aby ste mohli umiestniť sekundárne informácie.
Kontextové okná, ktorých názov aj obsah majú nulovú dĺžku, sa nikdy nezobrazia.
Popovery vyžadujú, aby bol doplnok tooltip zahrnutý do vašej verzie Bootstrapu.
Z výkonnostných dôvodov sú Tooltip a Popover data-apis voliteľné, čo znamená, že ich musíte inicializovať sami .
Jedným zo spôsobov, ako inicializovať všetky kontextové okná na stránke, je vybrať ich podľa ich data-toggle
atribútu:
Pri používaní vyskakovacích okien na prvkoch v rámci .btn-group
alebo .input-group
, alebo na prvkoch súvisiacich s tabuľkou ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, <tfoot>
), budete musieť špecifikovať možnosť container: 'body'
(zdokumentovanú nižšie), aby ste sa vyhli nežiaducim vedľajším účinkom (ako je rozšírenie prvku a/alebo alebo stratou svojich zaoblených rohov pri spustení vyskakovacieho okna).
disabled
Ak chcete k prvku alebo pridať vyskakovací .disabled
prvok, vložte prvok do prvku a a namiesto toho naň <div>
aplikujte vyskakovací prvok.<div>
Niekedy chcete k hypertextovému odkazu pridať kontextové okno, ktoré zalomí viacero riadkov. Predvolené správanie vyskakovacieho doplnku je vycentrovať ho horizontálne a vertikálne. Ak sa tomu chcete vyhnúť, pridajte white-space: nowrap;
do svojich ukotvení.
K dispozícii sú štyri možnosti: zarovnané hore, vpravo, dole a vľavo.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Použite focus
spúšťač na zatvorenie kontextových okien pri ďalšom kliknutí používateľa.
Pre správne správanie medzi prehliadačmi a platformami musíte použiť <a>
značku, nie značku <button>
, a tiež musíte zahrnúť atribúty role="button"
a .tabindex
Povoliť vyskakovacie okná prostredníctvom JavaScriptu:
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=""
.
názov | Typ | Predvolené | Popis |
---|---|---|---|
animácie | boolovská hodnota | pravda | Na vyskakovacie okno použite prechod zoslabovania CSS |
kontajner | reťazec | falošný | falošný | Pripojí popover ku konkrétnemu prvku. Príklad: |
obsahu | reťazec | funkciu | '' |
Ak je zadaná funkcia, bude volaná s |
meškanie | číslo | objekt | 0 | Oneskorenie zobrazenia a skrytia popoveru (ms) – netýka sa manuálneho typu spúšťania Ak je zadané číslo, oneskorenie sa použije na skrytie/zobrazenie Štruktúra objektu je: |
html | boolovská hodnota | falošný | Vložte HTML do kontextového okna. Ak je hodnota false, text na vloženie obsahu do DOM sa použije metóda jQuery. Ak sa obávate útokov XSS, použite text. |
umiestnenie | reťazec | funkciu | 'správny' | Ako umiestniť popover - hore | dole | vľavo | vpravo | auto. Keď sa funkcia používa na určenie umiestnenia, volá sa s popover uzlom DOM ako jej prvým argumentom a spúšťacím prvkom DOM uzlom ako jej druhým. Kontext |
selektor | reťazec | falošný | Ak je poskytnutý selektor, popover objekty budú delegované na špecifikované ciele. V praxi sa to používa na umožnenie pridávania vyskakovacích okien do dynamického obsahu HTML. Pozrite si tento a informatívny príklad . |
šablóna | reťazec | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' |
Základné HTML, ktoré sa má použiť pri vytváraní kontextového okna. Popover Popover
Prvok vonkajšieho obalu by mal mať |
titul | reťazec | funkciu | '' | Predvolená hodnota názvu, ak Ak je zadaná funkcia, bude volaná s |
spúšťač | reťazec | 'klikni' | Ako sa spúšťa kontextové okno - kliknite | vznášať sa | zameranie | Manuálny. Môžete prejsť viacerými spúšťačmi; oddeľte ich medzerou. manual nie je možné kombinovať so žiadnym iným spúšťačom. |
výrez | reťazec | objekt | funkciu | { selector: 'body', padding: 0 } | Udržuje popover v rámci tohto prvku. Príklad: Ak je zadaná funkcia, je volaná so spúšťacím prvkom DOM node ako jej jediným argumentom. Kontext |
Možnosti pre jednotlivé kontextové okná možno alternatívne špecifikovať pomocou atribútov údajov, ako je vysvetlené vyššie.
$().popover(options)
Inicializuje vyskakovacie okná pre kolekciu prvkov.
.popover('show')
Odhalí vyskakovací prvok prvku. Vráti sa k volajúcemu skôr, ako sa skutočne zobrazí kontextové okno (tj predtým, ako shown.bs.popover
dôjde k udalosti). Toto sa považuje za „ručné“ spustenie vyskakovacieho okna. Kontextové okná, ktorých názov aj obsah majú nulovú dĺžku, sa nikdy nezobrazia.
.popover('hide')
Skryje popover prvku. Vráti sa k volajúcemu skôr, ako sa kontextové okno skutočne skrylo (tj predtým, ako hidden.bs.popover
nastane udalosť). Toto sa považuje za „ručné“ spustenie vyskakovacieho okna.
.popover('toggle')
Prepína kontextové okno prvku. Vráti sa k volajúcemu predtým, ako sa kontextové okno skutočne zobrazí alebo skryje (tj predtým, ako nastane udalosť shown.bs.popover
alebo ). hidden.bs.popover
Toto sa považuje za „ručné“ spustenie vyskakovacieho okna.
.popover('destroy')
Skryje a zničí popover prvku. Vyskakovacie okná, ktoré používajú delegovanie (ktoré sú vytvorené pomocou voľby ) selector
, nemožno jednotlivo zničiť na podradených spúšťacích prvkoch.
Typ udalosti | Popis |
---|---|
show.bs.popover | Táto udalosť sa spustí okamžite po show zavolaní metódy inštancie. |
zobrazené.bs.popover | Táto udalosť sa spustí, keď sa kontextové okno zobrazí používateľovi (bude čakať na dokončenie prechodov CSS). |
skryť.bs.popover | Táto udalosť sa spustí okamžite po hide zavolaní metódy inštancie. |
skrytý.bs.popover | Táto udalosť sa spustí, keď sa ukončí skrytie kontextového okna pred používateľom (bude čakať na dokončenie prechodov CSS). |
vložený.bs.popover | Táto udalosť sa spustí po show.bs.popover udalosti, keď bola do modelu DOM pridaná šablóna kontextového okna. |
Pomocou tohto doplnku pridajte do všetkých výstražných správ funkciu odmietnutia.
Pri použití .close
tlačidla musí byť prvým potomkom tlačidla .alert-dismissible
a v označení sa pred ním nesmie nachádzať žiadny textový obsah.
Zmeňte to a to a skúste to znova. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
Stačí pridať data-dismiss="alert"
tlačidlo na zatvorenie, aby sa automaticky aktivovala funkcia zatvorenia upozornenia. Zatvorením upozornenia ho odstránite z DOM.
Ak chcete, aby vaše upozornenia používali pri zatváraní animáciu, uistite sa, že majú .fade
a.in
už majú aplikované triedy
$().alert()
Zabezpečí, aby výstraha počúvala udalosti kliknutia na podradené prvky, ktoré majú tento data-dismiss="alert"
atribút. (Nie je potrebné pri použití automatickej inicializácie data-api.)
$().alert('close')
Zatvorí upozornenie jeho odstránením z DOM. Ak sú na prvku prítomné triedy .fade
a .in
, výstraha pred odstránením zmizne.
Výstražný doplnok Bootstrap odhaľuje niekoľko udalostí na pripojenie k funkcii výstrahy.
Typ udalosti | Popis |
---|---|
zavrieť.bs.upozornenie | Táto udalosť sa spustí okamžite po close zavolaní metódy inštancie. |
zatvorené.bs.upozornenie | Táto udalosť sa spustí po zatvorení upozornenia (bude čakať na dokončenie prechodov CSS). |
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.
Firefox zachováva stavy kontroly formulára (zakázanie a kontrola) počas načítania stránky . Riešením tohto problému je použitie autocomplete="off"
. Pozrite si chybu Mozilly #654072 .
Pridať data-loading-text="Loading..."
, ak chcete použiť stav načítania na tlačidle.
Táto funkcia je od verzie 3.3.5 zastaraná a vo verzii 4 bola odstránená.
V záujme tejto demonštrácie používame data-loading-text
a $().button('loading')
, ale to nie je jediný stav, ktorý môžete použiť. Viac o tom nájdete nižšie v $().button(string)
dokumentácii .
Pridať data-toggle="button"
na aktiváciu prepínania na jednom tlačidle.
.active
aaria-pressed="true"
Pre vopred prepnuté tlačidlá musíte pridať .active
triedu a aria-pressed="true"
atribút k button
sebe.
Pridajte data-toggle="buttons"
do .btn-group
obsahujúceho začiarkavacieho políčka alebo rádiových vstupov, aby ste umožnili prepínanie ich príslušných štýlov.
.active
Pre predvolené možnosti musíte .active
triedu pridať do vstupu label
sami.
Ak sa začiarknutý stav tlačidla zaškrtávacieho políčka aktualizuje bez spustenia click
udalosti na tlačidle (napr. cez <input type="reset">
alebo cez nastavenie checked
vlastnosti vstupu), budete musieť prepnúť .active
triedu na vstupe label
sami.
$().button('toggle')
Prepína stav push. Dodáva tlačidlu vzhľad, že bolo aktivované.
$().button('reset')
Resetuje stav tlačidla - zamení text na pôvodný text. Táto metóda je asynchrónna a vracia sa skôr, ako sa resetovanie skutočne dokončí.
$().button(string)
Zamení text do ľubovoľného textového stavu definovaného údajmi.
Flexibilný doplnok, ktorý využíva niekoľko tried na jednoduché prepínanie správania.
Collapse vyžaduje, aby bol vo vašej verzii Bootstrapu zahrnutý prechodový doplnok .
Kliknutím na tlačidlá nižšie zobrazíte a skryjete ďalší prvok prostredníctvom zmien triedy:
.collapse
skrýva obsah.collapsing
sa aplikuje pri prechodoch.collapse.in
zobrazuje obsahMôžete použiť odkaz s href
atribútom alebo tlačidlo s data-target
atribútom. V oboch prípadoch data-toggle="collapse"
sa vyžaduje.
Rozšírte predvolené správanie zbalenia, aby ste vytvorili akordeón s komponentom panelu.
Je tiež možné vymeniť .panel-body
s za .list-group
s.
Nezabudnite pridať aria-expanded
do ovládacieho prvku. Tento atribút explicitne definuje aktuálny stav skladacieho prvku pre čítačky obrazovky a podobné asistenčné technológie. Ak je skladací prvok predvolene zatvorený, mal by mať hodnotu aria-expanded="false"
. Ak ste nastavili, aby bol skladací prvok predvolene otvorený pomocou in
triedy, nastavte aria-expanded="true"
ho na ovládacom prvku. Doplnok automaticky prepne tento atribút na základe toho, či bol alebo nebol skladací prvok otvorený alebo zatvorený.
Okrem toho, ak je váš ovládací prvok zameraný na jeden skladací prvok – tj data-target
atribút ukazuje na id
selektor – môžete aria-controls
k ovládaciemu prvku pridať ďalší atribút obsahujúci id
skladací prvok. Moderné čítačky obrazovky a podobné asistenčné technológie využívajú tento atribút na to, aby používateľom poskytli ďalšie skratky na prechod priamo na samotný skladací prvok.
Zásuvný modul používa niekoľko tried na zvládnutie ťažkého zdvíhania:
.collapse
skrýva obsah.collapse.in
zobrazuje obsah.collapsing
sa pridá pri spustení prechodu a odstráni sa po jeho dokončeníTieto triedy nájdete v component-animations.less
.
Stačí pridať data-toggle="collapse"
a data-target
k prvku a automaticky priradiť ovládanie skladacieho prvku. Atribút data-target
akceptuje selektor CSS, na ktorý sa má použiť zbalenie. Nezabudnite pridať triedu collapse
do 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.
Povoliť manuálne pomocou:
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=""
.
názov | typu | predvolená | popis |
---|---|---|---|
rodič | selektor | falošný | Ak je k dispozícii selektor, všetky skladacie prvky pod zadaným nadradeným objektom sa po zobrazení tejto skladacej položky zatvoria. (podobné tradičnému správaniu na akordeóne - to závisí od panel triedy) |
prepnúť | boolovská hodnota | pravda | Prepína zbaliteľný prvok pri vyvolaní |
.collapse(options)
Aktivuje váš obsah ako skladací prvok. Prijíma voliteľné možnosti object
.
.collapse('toggle')
Prepne zbaliteľný prvok na zobrazený alebo skrytý. Vráti sa k volajúcemu skôr, ako sa skladací prvok skutočne zobrazí alebo skryje (tj predtým, ako nastane udalosť shown.bs.collapse
alebo ).hidden.bs.collapse
.collapse('show')
Zobrazuje skladací prvok. Vráti sa k volajúcemu skôr, ako sa skladací prvok skutočne zobrazí (tj pred výskytom shown.bs.collapse
udalosti).
.collapse('hide')
Skryje skladací prvok. Vráti sa k volajúcemu skôr, ako bol skladací prvok skutočne skrytý (tj predtým, ako hidden.bs.collapse
dôjde k udalosti).
Trieda zbalenia Bootstrapu odhaľuje niekoľko udalostí na pripojenie k funkcii zbalenia.
Typ udalosti | Popis |
---|---|
show.bs.kolaps | Táto udalosť sa spustí okamžite po show zavolaní metódy inštancie. |
zobrazené.bs.kolaps | Táto udalosť sa spustí, keď je prvok zbalenia viditeľný pre používateľa (bude čakať na dokončenie prechodov CSS). |
skryť.bs.kolaps | Táto udalosť sa spustí okamžite po hide zavolaní metódy. |
skrytý.bs.kolaps | Táto udalosť sa spustí, keď bol prvok zbalenia skrytý pred používateľom (bude čakať na dokončenie prechodov CSS). |
Komponent prezentácie na prepínanie medzi prvkami, ako je kolotoč. Vnorené karusely nie sú podporované.
Komponent karuselu vo všeobecnosti nie je v súlade s normami prístupnosti. Ak potrebujete byť v súlade, zvážte ďalšie možnosti prezentácie obsahu.
Bootstrap používa pre svoje animácie výhradne CSS3, ale Internet Explorer 8 a 9 nepodporujú potrebné vlastnosti CSS. Pri používaní týchto prehliadačov teda neexistujú žiadne animácie prechodov medzi snímkami. Zámerne sme sa rozhodli nezahrnúť do prechodov núdzové riešenia založené na jQuery.
Triedu .active
je potrebné pridať na jednu zo snímok. V opačnom prípade nebude kolotoč viditeľný.
Triedy .glyphicon .glyphicon-chevron-left
a .glyphicon .glyphicon-chevron-right
nie sú nevyhnutne potrebné pre ovládacie prvky. Bootstrap poskytuje .icon-prev
a .icon-next
ako obyčajné unicode alternatívy.
Pridajte titulky na svoje snímky jednoducho pomocou .carousel-caption
prvku v ľubovoľnom súbore .item
. Umiestnite sem takmer ľubovoľný voliteľný kód HTML a automaticky sa zarovná a naformátuje.
Pre správne fungovanie karuselov je potrebné použiť id
na vonkajšom kontajneri ( ). .carousel
Pri pridávaní viacerých karuselov alebo pri zmene karuselu id
nezabudnite aktualizovať príslušné ovládacie prvky.
Pomocou atribútov údajov môžete jednoducho ovládať polohu karuselu. data-slide
akceptuje kľúčové slová prev
alebo next
, ktoré zmenia pozíciu snímky vzhľadom na jej aktuálnu pozíciu. Prípadne použite data-slide-to
na odovzdanie nespracovaného indexu snímky do karuselu data-slide-to="2"
, ktorý posunie pozíciu snímky na konkrétny index začínajúci na 0
.
Atribút data-ride="carousel"
sa používa na označenie karuselu ako animovaného pri načítaní stránky. Nemožno ho použiť v kombinácii s (nadbytočnou a nepotrebnou) explicitnou inicializáciou JavaScriptu toho istého karuselu.
Zavolajte karusel manuálne pomocou:
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-interval=""
.
názov | typu | predvolená | popis |
---|---|---|---|
interval | číslo | 5000 | Čas oneskorenia medzi automatickým cyklovaním položky. Ak je hodnota false, karusel sa nebude automaticky cyklovať. |
pauza | reťazec | nulový | "vznášať sa" | Ak je nastavené na "hover" , pozastaví cyklovanie kolotoča mouseenter a obnoví cyklovanie kolotoča zapnuté mouseleave . Ak je nastavená na null , umiestnením kurzora myši nad kolotoč ho nezastavíte. |
zabaliť | boolovská hodnota | pravda | Či má kolotoč nepretržite cyklovať alebo má mať tvrdé zastávky. |
klávesnica | boolovská hodnota | pravda | Či má kolotoč reagovať na udalosti klávesnice. |
.carousel(options)
Inicializuje kolotoč s voliteľnými možnosťami object
a začne cyklicky prechádzať položkami.
.carousel('cycle')
Prechádza položkami kolotoča zľava doprava.
.carousel('pause')
Zastaví kolotoč prechádzať položkami.
.carousel(number)
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.
Trieda karuselu Bootstrap odhaľuje dve udalosti na pripojenie k funkcii karuselu.
Obe udalosti majú nasledujúce ďalšie vlastnosti:
direction
: Smer, v ktorom sa kolotoč posúva (buď "left"
alebo "right"
).relatedTarget
: Prvok DOM, ktorý sa posúva na miesto ako aktívna položka.Všetky udalosti karuselu sa spúšťajú na samotnom kolotoči (tj na <div class="carousel">
).
Typ udalosti | Popis |
---|---|
slide.bs.kolotoč | Táto udalosť sa spustí okamžite pri slide vyvolaní metódy inštancie. |
posuvný.bs.kolotoč | Táto udalosť sa spustí, keď karusel dokončí svoj posuvný prechod. |
Doplnok pre pripojenie sa zapína position: fixed;
a vypína a napodobňuje efekt nájdený pomocou position: sticky;
. Podnavigácia na pravej strane je živá ukážka doplnku afix.
Použite afixový plugin cez dátové atribúty alebo manuálne pomocou vlastného JavaScriptu. V oboch situáciách musíte poskytnúť CSS pre umiestnenie a šírku vášho pripojeného obsahu.
Poznámka: Z dôvodu chyby vykresľovania prehliadača Safari nepoužívajte doplnok pre pripojenie na prvok obsiahnutý v relatívne umiestnenom prvku, ako je napríklad vytiahnutý alebo posunutý stĺpec .
Doplnok afixu prepína medzi tromi triedami, z ktorých každá predstavuje konkrétny stav: .affix
, .affix-top
, a .affix-bottom
. Musíte poskytnúť štýly, s výnimkou position: fixed;
dňa .affix
, pre tieto triedy sami (nezávisle od tohto doplnku), aby ste mohli zvládnuť skutočné pozície.
Takto funguje doplnok pre pripojenie:
.affix-top
, aby naznačil, že prvok je na najvyššej pozícii. V tomto bode nie je potrebné žiadne umiestnenie CSS..affix
nahrádza .affix-top
a nastavuje position: fixed;
(poskytuje ho CSS Bootstrap)..affix
znakom .affix-bottom
. Keďže posuny sú voliteľné, nastavenie jedného vyžaduje, aby ste nastavili príslušný CSS. V tomto prípade pridajte position: absolute;
podľa potreby. Doplnok používa atribút údajov alebo možnosť JavaScript na určenie, kam umiestniť prvok odtiaľ.Podľa vyššie uvedených krokov nastavte CSS pre niektorú z možností použitia nižšie.
Ak chcete jednoducho pridať správanie pri pripájaní k akémukoľvek prvku, stačí pridať data-spy="affix"
k prvku, ktorý chcete špehovať. Pomocou posunov definujte, kedy sa má prepnúť pripnutie prvku.
Zavolajte doplnok na pripojenie cez JavaScript:
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"
.
názov | typu | predvolená | popis |
---|---|---|---|
offset | číslo | funkcia | objekt | 10 | Pixely na odsadenie od obrazovky pri výpočte polohy rolovania. Ak zadáte jedno číslo, posun sa použije v hornom aj dolnom smere. Ak chcete poskytnúť jedinečný, spodný a horný posun, stačí poskytnúť objekt offset: { top: 10 } alebo offset: { top: 10, bottom: 5 } . Použite funkciu, keď potrebujete dynamicky vypočítať posun. |
cieľ | volič | uzol | prvok jQuery | window objekt _ |
Určuje cieľový prvok afixu. |
.affix(options)
Aktivuje váš obsah ako pripojený obsah. Prijíma voliteľné možnosti object
.
.affix('checkPosition')
Prepočíta stav afixu na základe rozmerov, polohy a polohy rolovania príslušných prvkov. Triedy .affix
, .affix-top
, a .affix-bottom
sú pridané alebo odstránené z pripojeného obsahu podľa nového stavu. Túto metódu je potrebné volať vždy, keď sa zmenia rozmery pripojeného obsahu alebo cieľového prvku, aby sa zabezpečilo správne umiestnenie pripojeného obsahu.
Prídavný doplnok Bootstrap odhaľuje niekoľko udalostí na pripojenie k funkciám prípon.
Typ udalosti | Popis |
---|---|
pripevniť.bs.pripevniť | Táto udalosť sa spustí bezprostredne pred pripevnením prvku. |
pripevnený.bs.pripevniť | Táto udalosť sa spustí po pripojení prvku. |
pripevniť-top.bs.pripevniť | Táto udalosť sa spustí bezprostredne pred pripevnením prvku hore. |
affixed-top.bs.affix | Táto udalosť sa spustí po pripojení prvku hore. |
pripevniť-dole.bs.pripevniť | Táto udalosť sa spustí bezprostredne predtým, ako bol prvok pripevnený dole. |
pripevnené-dole.bs.pripevniť | Táto udalosť sa spustí po pripojení prvku dole. |