JavaScript
Atgaivinkite „Bootstrap“ komponentus naudodami daugiau nei tuziną tinkintų „jQuery“ papildinių. Lengvai įtraukite juos visus arba po vieną.
Atgaivinkite „Bootstrap“ komponentus naudodami daugiau nei tuziną tinkintų „jQuery“ papildinių. Lengvai įtraukite juos visus arba po vieną.
Papildiniai gali būti įtraukti atskirai (naudojant atskirus Bootstrap *.js
failus) arba visus iš karto (naudojant bootstrap.js
arba sumažintą bootstrap.min.js
).
Abu bootstrap.js
ir bootstrap.min.js
yra visi papildiniai viename faile. Įtraukite tik vieną.
Kai kurie papildiniai ir CSS komponentai priklauso nuo kitų papildinių. Jei įskiepius įtraukiate atskirai, būtinai patikrinkite, ar dokumentuose nėra šių priklausomybių. Taip pat atminkite, kad visi papildiniai priklauso nuo jQuery (tai reiškia, kad jQuery turi būti įtrauktas prieš papildinio failus). Norėdami sužinoti, kurios jQuery versijos palaikomos, kreipkitės į mus .bower.json
Visus „Bootstrap“ papildinius galite naudoti tik per žymėjimo API, neįrašydami nė vienos „JavaScript“ eilutės. Tai yra pirmos klasės „Bootstrap“ API ir pirmiausia turėtumėte į tai atsižvelgti, kai naudojate papildinį.
Tačiau kai kuriais atvejais gali būti pageidautina išjungti šią funkciją. Todėl taip pat suteikiame galimybę išjungti duomenų atributo API, atjungiant visus įvykius dokumente, kurio vardų sritis yra data-api
. Tai atrodo taip:
Arba, jei norite taikyti konkretų papildinį, tiesiog įtraukite papildinio pavadinimą kaip vardų erdvę kartu su data-api vardų erdve, pvz.:
Tam pačiame elemente nenaudokite kelių papildinių duomenų atributų. Pavyzdžiui, mygtukas negali turėti ir patarimo, ir perjungti modalą. Norėdami tai padaryti, naudokite vyniojimo elementą.
Taip pat manome, kad turėtumėte turėti galimybę naudoti visus „Bootstrap“ papildinius tik per „JavaScript“ API. Visos viešosios API yra pavieniai, grandininiai metodai ir grąžina rinkinį, pagal kurį buvo imtasi veiksmų.
Visi metodai turi priimti pasirenkamų parinkčių objektą, eilutę, kuri taikoma tam tikram metodui, arba nieko (kuris inicijuoja papildinį su numatytuoju elgesiu):
Kiekvienas papildinys taip pat atskleidžia savo neapdorotą konstruktorių Constructor
nuosavybėje: $.fn.popover.Constructor
. Jei norite gauti konkretų papildinio egzempliorių, gaukite jį tiesiai iš elemento: $('[rel="popover"]').data('popover')
.
Galite pakeisti numatytuosius papildinio nustatymus pakeisdami papildinio Constructor.DEFAULTS
objektą:
Kartais reikia naudoti Bootstrap papildinius su kitomis vartotojo sąsajos sistemomis. Tokiomis aplinkybėmis kartais gali įvykti vardų erdvės susidūrimai. Jei taip atsitiks, galite iškviesti .noConflict
papildinį, kurio vertę norite grąžinti.
„Bootstrap“ teikia tinkintus įvykius daugumos unikalių papildinių veiksmams. Paprastai jie būna įnagininko ir būtojo laiko formos – kai įnagininkas (pvz. show
, ) suaktyvinamas įvykio pradžioje, o jo būtojo laiko forma (pvz. shown
, ) – baigus veiksmą.
Nuo 3.0.0 visi „Bootstrap“ įvykiai yra vardų erdvėje.
Visi begaliniai įvykiai suteikia preventDefault
funkcionalumo. Tai suteikia galimybę sustabdyti veiksmo vykdymą prieš jam pradedant.
Kiekvieno Bootstrap jQuery įskiepio versiją galima pasiekti per VERSION
papildinio konstruktoriaus ypatybę. Pavyzdžiui, patarimo įskiepiui:
Kai „JavaScript“ išjungta, „Bootstrap“ įskiepiai neatsiranda ypač gražiai. Jei šiuo atveju jums rūpi naudotojo patirtis, naudokite <noscript>
norėdami paaiškinti situaciją (ir kaip iš naujo įgalinti „JavaScript“) savo naudotojams ir (arba) pridėti savo pasirinktinių atsarginių variantų.
„Bootstrap“ oficialiai nepalaiko trečiųjų šalių „JavaScript“ bibliotekų , tokių kaip „Prototype“ arba „jQuery“ vartotojo sąsaja. Nepaisant .noConflict
įvykių su pavadinimais, gali kilti suderinamumo problemų, kurias turėsite išspręsti patys.
Norėdami gauti paprastų perėjimo efektų, transition.js
vieną kartą įtraukite kartu su kitais JS failais. Jei naudojate kompiliuotą (arba sumažintą) bootstrap.js
, nereikia to įtraukti – jis jau yra.
Transition.js yra pagrindinis transitionEnd
įvykių pagalbininkas, taip pat CSS perėjimo emuliatorius. Jį naudoja kiti įskiepiai, norėdami patikrinti, ar yra CSS perėjimo palaikymas, ir užfiksuoti kabančius perėjimus.
Perėjimus galima visuotinai išjungti naudojant šį „JavaScript“ fragmentą, kuris turi būti įkeltas transition.js
(arba bootstrap.js
arba bootstrap.min.js
, atsižvelgiant į atvejį):
Modalai yra supaprastinti, bet lankstūs dialogo raginimai su minimaliomis būtinomis funkcijomis ir išmaniaisiais numatytais nustatymais.
Būtinai neatidarykite modalo, kol dar matomas kitas. Norint vienu metu rodyti daugiau nei vieną modalą, reikia pasirinktinio kodo.
Visada stenkitės modalo HTML kodą įdėti į aukščiausio lygio dokumentą, kad išvengtumėte kitų komponentų, turinčių įtakos modalo išvaizdai ir (arba) funkcionalumui.
Yra keletas įspėjimų, susijusių su modalų naudojimu mobiliuosiuose įrenginiuose. Daugiau informacijos rasite mūsų naršyklės palaikymo dokumentuose .
Dėl to, kaip HTML5 apibrėžia savo semantiką, autofocus
HTML atributas Bootstrap modaluose neveikia. Norėdami pasiekti tą patį efektą, naudokite tam tikrą tinkintą „JavaScript“:
Pateiktas modalas su antrašte, turiniu ir veiksmų rinkiniu poraštėje.
Perjunkite modalą naudodami „JavaScript“ spustelėdami toliau esantį mygtuką. Jis slinks žemyn ir išnyks nuo puslapio viršaus.
Būtinai pridėkite role="dialog"
ir aria-labelledby="..."
, nurodydami modalinį pavadinimą, .modal
ir role="document"
į .modal-dialog
patį pavadinimą.
Be to, galite pateikti modalinio dialogo aprašą aria-describedby
naudodami .modal
.
Norint įterpti „YouTube“ vaizdo įrašus modaluose, reikia papildomo „JavaScript“, ne „Bootstrap“, kad būtų automatiškai sustabdytas atkūrimas ir kt. Norėdami gauti daugiau informacijos, žr. šį naudingą „Stack Overflow“ įrašą .
Modalai turi du pasirenkamus dydžius, kuriuos galima pateikti per modifikatorių klases .modal-dialog
.
Modalams, kurie tiesiog pasirodo, o ne išnyksta, pašalinkite .fade
klasę iš modalinio žymėjimo.
Norėdami pasinaudoti Bootstrap tinklelio sistema modale, tiesiog įdėkite .row
s į modulį .modal-body
ir naudokite įprastas tinklelio sistemos klases.
Ar turite daugybę mygtukų, kurie visi paleidžia tą patį modalą, tik su šiek tiek skirtingu turiniu? Naudokite event.relatedTarget
ir HTML data-*
atributus (galbūt per jQuery ), kad pakeistumėte modalo turinį, priklausomai nuo to, kuris mygtukas buvo spustelėtas. Daugiau informacijos apie , žr. Modalinių įvykių dokumentuose relatedTarget
,
Modalinis papildinys perjungia paslėptą turinį pagal poreikį, naudodamas duomenų atributus arba „JavaScript“. Jis taip pat papildo .modal-open
numatytąjį <body>
slinkimo veiksmą ir sukuria .modal-backdrop
spustelėjimo sritį, skirtą atmesti rodomus modalus spustelėjus už modalo ribų.
Suaktyvinkite modalą neįrašę JavaScript. Nustatykite data-toggle="modal"
valdiklio elementą, pvz., mygtuką, kartu su data-target="#foo"
arba href="#foo"
, kad nukreiptumėte į konkretų modalą, kad perjungtumėte.
Iškvieskite modalą su ID myModal
su viena JavaScript eilute:
Parinktys gali būti perduodamos naudojant duomenų atributus arba JavaScript. Duomenų atributams pridėkite parinkties pavadinimą prie data-
, kaip ir data-backdrop=""
.
vardas | tipo | numatytas | apibūdinimas |
---|---|---|---|
fonas | boolean arba eilutę'static' |
tiesa | Apima modalinio fono elementą. Arba nurodykite static foną, kuris neuždaro modalo spustelėjus. |
klaviatūra | loginis | tiesa | Uždaromas modalas, kai paspaudžiamas pabėgimo klavišas |
Rodyti | loginis | tiesa | Rodo modalą, kai jis inicijuojamas. |
Nuotolinis | kelias | klaidinga | Ši parinktis nebenaudojama nuo 3.3.0 ir buvo pašalinta iš 4 versijos. Vietoj to rekomenduojame naudoti kliento šabloną arba duomenų susiejimo sistemą arba pačiam iškviesti jQuery.load . Jei pateikiamas nuotolinis URL, turinys bus įkeltas vieną kartą naudojant jQuery |
.modal(options)
Suaktyvina jūsų turinį kaip modalą. Priima pasirenkamas parinktis object
.
.modal('toggle')
Rankiniu būdu perjungia modalą. Grįžta į skambinantįjį, kol modalas iš tikrųjų buvo parodytas arba paslėptas (ty prieš įvykstant shown.bs.modal
arba hidden.bs.modal
įvykiui).
.modal('show')
Modalą atidaro rankiniu būdu. Grįžta į skambinantįjį, kol modalas iš tikrųjų nebuvo parodytas (ty prieš shown.bs.modal
įvykį).
.modal('hide')
Rankiniu būdu paslepia modalą. Grįžta į skambinantįjį, kol modalas iš tikrųjų buvo paslėptas (ty prieš hidden.bs.modal
įvykį).
.modal('handleUpdate')
Iš naujo sureguliuoja modalo padėtį, kad būtų išvengta slinkties juostos, jei ji atsirastų, dėl kurios modalas šoktų į kairę.
Reikalingas tik tada, kai keičiasi modalo aukštis, kol jis atidarytas.
„Bootstrap“ modalinė klasė atskleidžia keletą įvykių, kad būtų galima prisijungti prie modalinės funkcijos.
Visi modaliniai įvykiai nukreipiami į patį modalą (ty į <div class="modal">
).
Renginio tipas | apibūdinimas |
---|---|
show.bs.modal | Šis įvykis suaktyvinamas iš karto, kai show iškviečiamas egzemplioriaus metodas. Jei jį sukėlė paspaudimas, spustelėtas elementas pasiekiamas kaip relatedTarget įvykio nuosavybė. |
parodyta.bs.modal | Šis įvykis suaktyvinamas, kai modalas tampa matomas vartotojui (lauks, kol bus baigti CSS perėjimai). Jei jį sukėlė paspaudimas, spustelėtas elementas pasiekiamas kaip relatedTarget įvykio nuosavybė. |
slėpti.bs.modal | Šis įvykis suaktyvinamas iš karto, kai hide iškviečiamas egzemplioriaus metodas. |
paslėptas.bs.modalinis | Šis įvykis suaktyvinamas, kai modalas baigiamas paslėpti nuo vartotojo (lauks, kol bus baigti CSS perėjimai). |
pakrautas.bs.modal | Šis įvykis suaktyvinamas, kai modalas įkelia turinį naudodamas remote parinktį. |
Naudodami šį paprastą papildinį pridėkite išskleidžiamųjų meniu beveik prie bet ko, įskaitant naršymo juostą, skirtukus ir tabletes.
Naudodamas duomenų atributus arba „JavaScript“, išskleidžiamasis papildinys perjungia paslėptą turinį (išskleidžiamuosius meniu), perjungdamas .open
klasę pirminio sąrašo elemente.
Mobiliuosiuose įrenginiuose atidarius išskleidžiamąjį meniu, pridedama .dropdown-backdrop
kaip bakstelėjimo sritis, skirta uždaryti išskleidžiamuosius meniu, kai bakstelėjate už meniu, o tai yra tinkamo iOS palaikymo reikalavimas. Tai reiškia, kad norint perjungti iš atviro išskleidžiamojo meniu į kitą išskleidžiamąjį meniu, reikia papildomai bakstelėti mobiliajame telefone.
Pastaba: data-toggle="dropdown"
atributu remiamasi uždarant išskleidžiamuosius meniu programos lygiu, todėl verta jį naudoti visada.
Pridėkite data-toggle="dropdown"
prie nuorodos arba mygtuko, kad perjungtumėte išskleidžiamąjį meniu.
Jei norite, kad URL būtų nepažeisti su nuorodų mygtukais, naudokite data-target
atributą, o ne href="#"
.
Iškvieskite išskleidžiamuosius meniu naudodami „JavaScript“:
data-toggle="dropdown"
vis dar reikalingasNepriklausomai nuo to, ar iškviečiate išskleidžiamąjį meniu naudodami „JavaScript“, ar vietoj to naudojate duomenų API, data-toggle="dropdown"
visada turi būti išskleidžiamojo meniu aktyviklio elemente.
Nė vienas
$().dropdown('toggle')
Perjungia tam tikros naršymo juostos arba skirtukų naršymo išskleidžiamąjį meniu.
Visi išskleidžiamojo meniu įvykiai suaktyvinami .dropdown-menu
pirminiame elemente.
Visi išskleidžiamojo meniu įvykiai turi relatedTarget
savybę, kurios reikšmė yra perjungimo prierašo elementas.
Renginio tipas | apibūdinimas |
---|---|
Rodyti.bs.išskleidžiamąjį meniu | Šis įvykis suaktyvinamas iš karto, kai iškviečiamas rodyti egzempliorių metodas. |
rodomas.bs.išskleidžiamasis meniu | Šis įvykis suaktyvinamas, kai išskleidžiamasis meniu tampa matomas vartotojui (lauks, kol bus atliktas CSS perėjimas). |
paslėpti.bs.išskleidžiamąjį meniu | Šis įvykis suaktyvinamas iš karto, kai iškviečiamas slėpimo egzemplioriaus metodas. |
paslėptas.bs.išskleidžiamasis meniu | Šis įvykis suaktyvinamas, kai išskleidžiamasis meniu baigiamas paslėpti nuo vartotojo (lauks, kol bus atlikti CSS perėjimai). |
„ScrollSpy“ papildinys skirtas automatiškai atnaujinti navigacijos taikinius pagal slinkties padėtį. Slinkite po naršymo juosta esančia sritimi ir stebėkite aktyvios klasės pasikeitimą. Taip pat bus paryškinti išskleidžiamieji antriniai elementai.
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi, kol jie nebuvo išparduoti. Tumblr dviračių teisės nuo ūkio iki stalo. Anim keffiyeh carles megztinis. Velit seitan mcsweeney foto kabina 3 wolf moon irure. Cosby megztinis lomo jean šortai, williamsburg hoodie minim qui tikriausiai nesate apie juos girdėję ir kardiganų patikos fondas culpa biodyzel wes anderson estetika. Nihil tatuiruotas accusamus, cred ironija biodyzelinas keffiyeh artisan ullamco consequat.
Veniam marfa riedlentė su ūsais, prigludusi fugiat velit šakių barzda. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tatuiruotas cosby megztinis maisto sunkvežimis, Mcsweeney quis non freegan vinilas. Lo-fi Wesas Andersonas +1 sartorial. Carles ne estetinis pratimas quis gentrify. Brooklyn adipisicing craft alaus vice keytar deseruntas.
Occaecat commodo aliqua delectus. Fap craft beer deserunt riedlentė ea. Lomo dviračių teisės adipisicing banh mi, velit ea sunt next level locavore vienos kilmės kava magna veniam. High life ID vinilas, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi „pasidaryk pats“ minimalus pasiuntinių krepšys. Cred ex in, tvarus 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 tinklaraštis, culpa pasiuntinių krepšys marfa whatever delectus food truck. Sapiente synth id guessnda. Locavore sed helvetica klišinė ironija, perkūno katės, apie kurias tikriausiai negirdėjote, konsequat gobtuvas be glitimo lo-fi fap aliquip. Labore elit placeat prieš išparduodant, Terry richardson proident priešpiečiai nesciunt quis cosby megztinis pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.
Naršymo juostos nuorodos turi turėti išsprendžiamus ID tikslus. Pavyzdžiui, <a href="#home">home</a>
turi atitikti kažką DOM, pvz ., <div id="home"></div>
.
:visible
netiksliniai elementaiTiksliniai elementai, neatitinkantys :visible
„jQuery “, bus ignoruojami, o atitinkami navigacijos elementai niekada nebus paryškinti.
Nepriklausomai nuo diegimo metodo, „scrollspy“ reikalauja naudoti position: relative;
elementą, kurį šnipinėjate. Daugeliu atvejų tai yra <body>
. Slinkdami kitus elementus nei <body>
, būtinai height
nustatykite ir overflow-y: scroll;
pritaikykite.
Norėdami lengvai pridėti slinkties elgseną prie viršutinės juostos naršymo, pridėkite data-spy="scroll"
elementą, kurį norite šnipinėti (dažniausiai tai būtų <body>
). Tada pridėkite atributą su bet kurio Bootstrap komponento data-target
pirminio elemento ID arba klase ..nav
Pridėję position: relative;
CSS, iškvieskite scrollspy naudodami „JavaScript“:
.scrollspy('refresh')
Kai naudojate scrollspy kartu su elementų pridėjimu arba pašalinimu iš DOM, turėsite iškviesti atnaujinimo metodą, pavyzdžiui:
Parinktys gali būti perduodamos naudojant duomenų atributus arba JavaScript. Duomenų atributams pridėkite parinkties pavadinimą prie data-
, kaip ir data-offset=""
.
vardas | tipo | numatytas | apibūdinimas |
---|---|---|---|
kompensuoti | numerį | 10 | Pikseliai, skirti nuo viršaus, skaičiuojant slinkties padėtį. |
Renginio tipas | apibūdinimas |
---|---|
activate.bs.scrollspy | Šis įvykis suaktyvinamas, kai scrollspy suaktyvina naują elementą. |
Pridėkite greitą, dinamišką skirtukų funkciją, kad galėtumėte pereiti per vietinio turinio sritis, net naudodami išskleidžiamuosius meniu. Įdėtieji skirtukai nepalaikomi.
Neapdorotas džinsas, ko gero, apie juos negirdėjote džinsų šortai Austin. Nesciunt tofu stumptown aliqua, retro synth master valymo priemonė. Ūsų klišė tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh Dreamcatcher synth. Cosby megztinis eu banh mi, qui irure Terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis megztinis amerikietiškas drabužis, mėsininkas 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.
Šis papildinys išplečia naršymo skirtukų komponentą , kad būtų pridėta skirtukų sričių.
Įgalinti skirtukų skirtukus naudodami „JavaScript“ (kiekvieną skirtuką reikia suaktyvinti atskirai):
Atskirus skirtukus galite suaktyvinti keliais būdais:
Galite suaktyvinti skirtuką arba piliulės naršymą neįrašydami jokio „JavaScript“, tiesiog nurodydami data-toggle="tab"
arba data-toggle="pill"
ant elemento. Pridėjus nav
ir nav-tabs
klases prie skirtuko ul
bus taikomas Bootstrap skirtuko stilius , o pridėjus nav
ir nav-pills
klases bus taikomas tablečių stilius .
Jei norite, kad skirtukai išnyktų, pridėkite .fade
prie kiekvieno .tab-pane
. Pirmojo skirtuko srityje taip pat turi būti .in
matomas pradinis turinys.
$().tab
Suaktyvina skirtuko elementą ir turinio konteinerį. Skirtuko lape turi būti a data-target
arba href
DOM sudėtinio rodinio mazgas. Aukščiau pateiktuose pavyzdžiuose skirtukai yra <a>
s su data-toggle="tab"
atributais.
.tab('show')
Parenka nurodytą skirtuką ir parodo su juo susijusį turinį. Bet kuris kitas anksčiau pasirinktas skirtukas bus nepažymėtas, o su juo susijęs turinys paslėptas. Grįžta į skambinantįjį, kol skirtuko sritis iš tikrųjų nebuvo parodyta (ty prieš shown.bs.tab
įvykį).
Kai rodomas naujas skirtukas, įvykiai suaktyvinami tokia tvarka:
hide.bs.tab
(dabartiniame aktyviame skirtuke)show.bs.tab
(skirtuke, kurį reikia rodyti)hidden.bs.tab
(ankstesniame aktyviame skirtuke tas pats, kaip ir hide.bs.tab
įvykio)shown.bs.tab
(naujai suaktyvintame, ką tik parodytame skirtuke, tas pats kaip ir show.bs.tab
įvykio)Jei joks skirtukas dar nebuvo aktyvus, hide.bs.tab
ir hidden.bs.tab
įvykiai nebus suaktyvinti.
Renginio tipas | apibūdinimas |
---|---|
Rodyti.bs.tab | Šis įvykis suaktyvinamas rodant skirtuką, bet anksčiau nei rodomas naujas skirtukas. Naudokite event.target ir event.relatedTarget , kad nukreiptumėte atitinkamai į aktyvų skirtuką ir ankstesnį aktyvų skirtuką (jei yra). |
rodomas.bs.tab | Šis įvykis suaktyvinamas rodant skirtuką, kai rodomas skirtukas. Naudokite event.target ir event.relatedTarget , kad nukreiptumėte atitinkamai į aktyvų skirtuką ir ankstesnį aktyvų skirtuką (jei yra). |
hide.bs.tab | Šis įvykis suaktyvinamas, kai turi būti rodomas naujas skirtukas (taigi, ankstesnis aktyvus skirtukas turi būti paslėptas). Naudokite event.target ir event.relatedTarget , kad nukreiptumėte atitinkamai į dabartinį aktyvų skirtuką ir į naują, kuris netrukus bus aktyvus. |
paslėptas.bs.tab | Šis įvykis suaktyvinamas, kai parodomas naujas skirtukas (taigi ankstesnis aktyvus skirtukas yra paslėptas). Naudokite event.target ir event.relatedTarget , kad nukreiptumėte atitinkamai į ankstesnį aktyvų skirtuką ir naują aktyvų skirtuką. |
Įkvėptas puikaus jQuery.tipsy įskiepio, kurį parašė Jason Frame; Patarimai yra atnaujinta versija, kuri nepriklauso nuo vaizdų, naudoja CSS3 animacijai ir duomenų atributus vietiniam pavadinimo saugojimui.
Patarimai su nulinio ilgio pavadinimais niekada nerodomi.
Užveskite pelės žymeklį ant toliau pateiktų nuorodų, kad pamatytumėte patarimus:
Aptemptos kelnės kito lygio keffiyeh tikriausiai nesate apie jas girdėję. Nuotraukų kabina barzda, neapdorotas džinsas, veganiškas pasiuntinių krepšys stumptown. 8 bitų amerikietiški drabužiai nuo ūkio iki stalo, mcsweeney's fixie tvarūs quinoa , turi kilpinį richardson vinilo chambray. Beard stumptown, megztiniai banh mi lomo thundercats. Tofu biodyzelinas williamsburg marfa, keturių loko mcsweeney's cleanse vegan chambray. Tikrai ironiškas amatininkas , kad ir koks būtų raktas , scenografija nuo ūkio iki stalo banksy Austin twitter rankena freegan cred neapdoroto džinsinio vienos kilmės kavos virusas.
Galimos keturios parinktys: viršuje, dešinėje, apačioje ir kairėje.
Dėl našumo galima pasirinkti „Tooltip“ ir „Popover“ duomenų apis, o tai reiškia, kad turite juos inicijuoti patys .
Vienas iš būdų inicijuoti visus patarimus puslapyje būtų pasirinkti juos pagal data-toggle
atributą:
Patarimų papildinys generuoja turinį ir žymėjimą pagal poreikį ir pagal numatytuosius nustatymus pateikia patarimus po jų aktyviklio elemento.
Suaktyvinkite patarimą naudodami „JavaScript“:
Reikalingas patarimo žymėjimas yra tik data
atributas ir title
HTML elemente, kuriame norite turėti patarimą. Sugeneruotas patarimo žymėjimas yra gana paprastas, nors tam reikia padėties (pagal numatytuosius nustatymus, top
kurią nustato papildinys).
Kartais prie hipersaito, apvyniojančio kelias eilutes, norite pridėti patarimą. Numatytasis patarimo įskiepio elgesys yra centruoti jį horizontaliai ir vertikaliai. Pridėkite white-space: nowrap;
prie savo inkarų, kad to išvengtumėte.
Naudodami patarimus apie elementus, esančius a .btn-group
arba .input-group
, arba su lentele susijusius elementus ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, <tfoot>
), turėsite nurodyti parinktį container: 'body'
(dokumentuota toliau), kad išvengtumėte nepageidaujamų šalutinių poveikių (pvz., elemento platėjimo ir/ arba praranda užapvalintus kampus, kai suveikia patarimas).
Naudotojams, naršantiesiems naudojant klaviatūrą, ypač pagalbinių technologijų naudotojams, patarimai turėtų būti pridėti tik prie klaviatūros elementų, pvz., nuorodų, formų valdiklių ar bet kokio savavališko elemento su tabindex="0"
atributu.
Norėdami pridėti patarimą prie elemento disabled
arba .disabled
elemento, įdėkite elementą į a <div>
ir pritaikykite patarimą <div>
.
Parinktys gali būti perduodamos naudojant duomenų atributus arba JavaScript. Duomenų atributams pridėkite parinkties pavadinimą prie data-
, kaip ir data-animation=""
.
vardas | Tipas | Numatytas | apibūdinimas |
---|---|---|---|
animacija | loginis | tiesa | Patarimui pritaikykite CSS išnykimo perėjimą |
konteineris | styga | klaidinga | klaidinga | Prideda patarimą prie konkretaus elemento. Pavyzdys |
uždelsimas | numeris | objektas | 0 | Patarimo rodymo ir slėpimo delsa (ms) – netaikoma rankinio paleidimo tipui Jei numeris pateikiamas, uždelsimas taikomas abiem slėptuvėms/rodyti Objekto struktūra yra tokia: |
html | loginis | klaidinga | Įdėkite HTML į patarimą. Jei klaidinga, text turiniui įterpti į DOM bus naudojamas jQuery metodas. Jei nerimaujate dėl XSS atakų, naudokite tekstą. |
išdėstymas | styga | funkcija | "viršuje" | Kaip išdėstyti patarimo vietą – viršuje | apačioje | paliko | dešinėje | automatinis. Kai funkcija naudojama vietai nustatyti, ji iškviečiama, kai pirmasis argumentas yra patarimo DOM mazgas, o antrasis – aktyvuojantis elementas DOM mazgas. Kontekstas |
parinkiklis | styga | klaidinga | Jei yra parinkiklis, patarimo objektai bus deleguoti nurodytiems tikslams. Praktiškai tai naudojama norint įgalinti dinaminį HTML turinį įtraukti patarimus. Žiūrėkite tai ir informatyvų pavyzdį . |
šabloną | styga | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
Pagrindinis HTML, naudojamas kuriant patarimą. Įrankio antgalis
Tolimiausias apvyniojimo elementas turi turėti |
titulą | styga | funkcija | '' | Numatytoji pavadinimo reikšmė, jei Jei funkcija duota, ji bus iškviesta |
paleidiklis | styga | „fokusuoti ant pelės žymeklio“ | Kaip suaktyvinamas patarimas – spustelėkite | užveskite | fokusuoti | vadovas. Galite perduoti kelis aktyviklius; atskirkite juos tarpu. manual negali būti derinamas su jokiu kitu paleidikliu. |
peržiūros sritis | styga | objektas | funkcija | { parinkiklis: 'body', padding: 0 } | Patarimas išlaikomas šio elemento ribose. Pavyzdys: Jei funkcija yra pateikta, ji iškviečiama su paleidimo elementu DOM mazgas kaip vieninteliu argumentu. Kontekstas |
Atskirų patarimų parinktis taip pat galima nurodyti naudojant duomenų atributus, kaip paaiškinta aukščiau.
$().tooltip(options)
Prie elementų rinkinio prideda patarimo tvarkyklę.
.tooltip('show')
Atskleidžia elemento patarimą. Grįžta į skambinantįjį, kol patarimas iš tikrųjų nebuvo parodytas (ty prieš shown.bs.tooltip
įvykį). Tai laikoma „rankiniu“ patarimo paleidimu. Patarimai su nulinio ilgio pavadinimais niekada nerodomi.
.tooltip('hide')
Slepia elemento patarimą. Grįžta į skambinantįjį, kol patarimas iš tikrųjų buvo paslėptas (ty prieš hidden.bs.tooltip
įvykį). Tai laikoma „rankiniu“ patarimo paleidimu.
.tooltip('toggle')
Perjungia elemento patarimą. Grįžta į skambinantįjį, kol patarimas iš tikrųjų buvo parodytas arba paslėptas (ty prieš įvykstant shown.bs.tooltip
arba hidden.bs.tooltip
įvykiui). Tai laikoma „rankiniu“ patarimo paleidimu.
.tooltip('destroy')
Slepia ir sunaikina elemento patarimą. Įrankių patarimai, kuriuose naudojamas delegavimas (kurie sukurti naudojant parinktį selector
) , negali būti sunaikinami atskirai dėl palikuonių aktyviklio elementų.
Renginio tipas | apibūdinimas |
---|---|
Rodyti.bs.patarimą | Šis įvykis suaktyvinamas iš karto, kai show iškviečiamas egzemplioriaus metodas. |
parodyta.bs.patarimas | Šis įvykis suaktyvinamas, kai patarimas tampa matomas vartotojui (lauks, kol bus baigti CSS perėjimai). |
paslėpti.bs.patarimas | Šis įvykis suaktyvinamas iš karto, kai hide iškviečiamas egzemplioriaus metodas. |
paslėptas.bs.patarimas | Šis įvykis suaktyvinamas, kai patarimas baigiamas paslėpti nuo vartotojo (lauks, kol bus baigti CSS perėjimai). |
įterptas.bs.patarimas | Šis įvykis suaktyvinamas po show.bs.tooltip įvykio, kai patarimo šablonas buvo įtrauktas į DOM. |
Prie bet kurio elemento pridėkite mažas turinio perdangas, pvz., esančias iPad.
Iššokantys langai, kurių pavadinimas ir turinys yra nulinio ilgio, niekada nerodomi.
Iššokant reikia, kad į jūsų „Bootstrap“ versiją būtų įtrauktas patarimo įskiepis .
Dėl našumo galima pasirinkti „Tooltip“ ir „Popover“ duomenų apis, o tai reiškia, kad turite juos inicijuoti patys .
Vienas iš būdų inicijuoti visus puslapio iššokančius langus būtų pasirinkti juos pagal data-toggle
atributą:
Kai naudojate iššokančius elementus elementuose, esančiuose a .btn-group
arba .input-group
, arba su lentele susijusiuose elementuose ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, <tfoot>
), turėsite nurodyti parinktį container: 'body'
(dokumentuota toliau), kad išvengtumėte nepageidaujamų šalutinių poveikių (pvz., elemento platėjimo ir/ arba praranda užapvalintus kampus, kai suaktyvinamas iššokimas).
Norėdami pridėti iššokantįjį langą prie elemento disabled
arba .disabled
, įdėkite elementą į a <div>
ir pritaikykite iššokantįjį langą <div>
.
Kartais prie hipersaito, apvyniojančio kelias eilutes, norite pridėti iššokantįjį langą. Numatytasis iššokančiojo įskiepio elgesys yra centruoti jį horizontaliai ir vertikaliai. Pridėkite white-space: nowrap;
prie savo inkarų, kad to išvengtumėte.
Galimos keturios parinktys: viršuje, dešinėje, apačioje ir kairėje.
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.
Naudokite focus
aktyviklį, kad atsisakytumėte iššokančių langų po kito naudotojo paspaudimo.
Norėdami tinkamai veikti įvairiose naršyklėse ir įvairiose platformose, turite naudoti <a>
žymą, o ne<button>
žymą, taip pat turite įtraukti atributus role="button"
ir .tabindex
Įgalinti iššokančius langus naudojant „JavaScript“:
Parinktys gali būti perduodamos naudojant duomenų atributus arba JavaScript. Duomenų atributams pridėkite parinkties pavadinimą prie data-
, kaip ir data-animation=""
.
vardas | Tipas | Numatytas | apibūdinimas |
---|---|---|---|
animacija | loginis | tiesa | Iššokančiai langui pritaikykite CSS išnykimo perėjimą |
konteineris | styga | klaidinga | klaidinga | Prideda iššokantįjį langą prie konkretaus elemento. Pavyzdys |
turinys | styga | funkcija | '' | Numatytoji turinio vertė if Jei funkcija duota, ji bus iškviesta |
uždelsimas | numeris | objektas | 0 | Iššokančiojo lango rodymo ir slėpimo delsa (ms) – netaikoma rankinio paleidimo tipui Jei numeris pateikiamas, uždelsimas taikomas abiem slėptuvėms/rodyti Objekto struktūra yra tokia: |
html | loginis | klaidinga | Įdėkite HTML į iškylantįjį langą. Jei klaidinga, text turiniui įterpti į DOM bus naudojamas jQuery metodas. Jei nerimaujate dėl XSS atakų, naudokite tekstą. |
išdėstymas | styga | funkcija | 'teisingai' | Kaip išdėstyti iššokantįjį langą - viršuje | apačioje | paliko | dešinėje | automatinis. Kai funkcija naudojama vietai nustatyti, ji iškviečiama, kai pirmasis argumentas yra iššokantis DOM mazgas, o antrasis – aktyvuojantis elementas DOM mazgas. Kontekstas |
parinkiklis | styga | klaidinga | Jei yra parinkiklis, iššokantys objektai bus deleguojami nurodytiems tikslams. Praktiškai tai naudojama norint įgalinti dinaminį HTML turinį pridėti iššokančių langų. Žiūrėkite tai ir informatyvų pavyzdį . |
šabloną | styga | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' |
Pagrindinis HTML, naudojamas kuriant iššokantįjį langą. Popover Popover
Tolimiausias apvyniojimo elementas turi turėti |
titulą | styga | funkcija | '' | Numatytoji pavadinimo reikšmė, jei Jei funkcija duota, ji bus iškviesta |
paleidiklis | styga | 'spustelėkite' | Kaip suaktyvinamas iššokantis langas – spustelėkite | užveskite | fokusuoti | vadovas. Galite perduoti kelis aktyviklius; atskirkite juos tarpu. manual negali būti derinamas su jokiu kitu paleidikliu. |
peržiūros sritis | styga | objektas | funkcija | { parinkiklis: 'body', padding: 0 } | Išlaiko iššokantįjį elementą šio elemento ribose. Pavyzdys: Jei funkcija yra pateikta, ji iškviečiama su paleidimo elementu DOM mazgas kaip vieninteliu argumentu. Kontekstas |
Atskirų iššokančių langų parinktys gali būti nurodytos naudojant duomenų atributus, kaip paaiškinta aukščiau.
$().popover(options)
Inicijuoja elementų rinkinio iššokančius langus.
.popover('show')
Atskleidžia elemento iššokimą. Grįžta į skambinantįjį, kol iššokantis pranešimas iš tikrųjų nebuvo parodytas (ty prieš shown.bs.popover
įvykį). Tai laikoma „rankiniu“ iššokančiojo ekrano paleidimu. Iššokantys langai, kurių pavadinimas ir turinys yra nulinio ilgio, niekada nerodomi.
.popover('hide')
Slepia elemento iššokimą. Grįžta į skambinantįjį, kol iššokantis langas iš tikrųjų buvo paslėptas (ty prieš hidden.bs.popover
įvykį). Tai laikoma „rankiniu“ iššokančiojo ekrano paleidimu.
.popover('toggle')
Perjungia elemento iššokantįjį langą. Grįžta į skambinantįjį, kol iššokantis langas iš tikrųjų buvo parodytas arba paslėptas (ty prieš įvykstant shown.bs.popover
arba hidden.bs.popover
įvykiui). Tai laikoma „rankiniu“ iššokančiojo ekrano paleidimu.
.popover('destroy')
Slepia ir sunaikina elemento iššokimą. Iššokančių langų, kuriuose naudojamas delegavimas (kurie sukuriami naudojant parinktį selector
) , negalima atskirai sunaikinti palikuonių aktyviklio elementuose.
Renginio tipas | apibūdinimas |
---|---|
rodyti.bs.popover | Šis įvykis suaktyvinamas iš karto, kai show iškviečiamas egzemplioriaus metodas. |
parodyta.bs.popover | Šis įvykis suaktyvinamas, kai iššokantis langas tampa matomas vartotojui (lauks, kol bus baigti CSS perėjimai). |
paslėpti.bs.popover | Šis įvykis suaktyvinamas iš karto, kai hide iškviečiamas egzemplioriaus metodas. |
paslėptas.bs.popover | Šis įvykis suaktyvinamas, kai iššokantis ekranas baigiamas paslėpti nuo vartotojo (lauks, kol bus baigti CSS perėjimai). |
įterpta.bs.popover | Šis įvykis suaktyvinamas po show.bs.popover įvykio, kai prie DOM pridedamas iššokantis šablonas. |
Pridėkite atmetimo funkciją prie visų įspėjimų pranešimų naudodami šį papildinį.
Kai naudojamas .close
mygtukas, jis turi būti pirmasis antrinis .alert-dismissible
ir joks tekstinis turinys negali būti prieš jį žymėjime.
Pakeiskite šį bei tą ir bandykite dar kartą. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
Tiesiog pridėkite data-dismiss="alert"
prie uždarymo mygtuko, kad automatiškai suteiktų įspėjimo uždarymo funkciją. Uždarius įspėjimą jis pašalinamas iš DOM.
Jei norite, kad įspėjimai uždarant naudotų animaciją, įsitikinkite, kad jiems jau pritaikytos .fade
ir .in
klasės.
$().alert()
Įspėja apie paspaudimų įvykius ant palikuonių elementų, turinčių data-dismiss="alert"
atributą. (Nebūtina, kai naudojamas duomenų API automatinis inicijavimas.)
$().alert('close')
Perspėjimas uždaromas pašalinus jį iš DOM. Jei elemente yra .fade
ir .in
klasės, įspėjimas išnyks prieš jį pašalinant.
„Bootstrap“ įspėjimo papildinys atskleidžia keletą įvykių, kad būtų galima prisijungti prie įspėjimo funkcijų.
Renginio tipas | apibūdinimas |
---|---|
uždaryti.bs.alert | Šis įvykis suaktyvinamas iš karto, kai close iškviečiamas egzemplioriaus metodas. |
uždarytas.bs.alert | Šis įvykis suaktyvinamas, kai įspėjimas uždaromas (lauks, kol bus baigti CSS perėjimai). |
Padarykite daugiau naudodami mygtukus. Valdykite mygtukų būsenas arba sukurkite mygtukų grupes daugiau komponentų, pvz., įrankių juostoms.
Įkeliant puslapį „Firefox“ išlieka formos valdymo būsenos (neįgalumas ir patikrinimas) . Išeitis yra naudoti autocomplete="off"
. Žr . „Mozilla“ klaidą Nr. 654072 .
Pridėti data-loading-text="Loading..."
, jei norite naudoti mygtuko įkėlimo būseną.
Ši funkcija nebenaudojama nuo 3.3.5 versijos ir buvo pašalinta iš 4 versijos.
Šiam demonstravimui naudojame data-loading-text
ir $().button('loading')
, bet tai nėra vienintelė būsena, kurią galite naudoti. Daugiau apie tai skaitykite toliau pateiktoje $().button(string)
dokumentacijoje .
Pridėti data-toggle="button"
, kad suaktyvintumėte perjungimą vienu mygtuku.
.active
iraria-pressed="true"
Jei mygtukai yra iš anksto perjungti, turite pridėti .active
klasę ir aria-pressed="true"
atributą prie button
savęs.
Įtraukite data-toggle="buttons"
į .btn-group
žymimąjį laukelį arba radijo įvestis, kad galėtumėte perjungti atitinkamus stilius.
.active
Jei norite pasirinkti iš anksto pasirinktas parinktis, turite patys pridėti .active
klasę prie įvesties label
.
Jei pažymėta žymimojo laukelio mygtuko būsena atnaujinama nesuaktyvinant mygtuko click
įvykio (pvz., per <input type="reset">
arba per nustatant checked
įvesties ypatybę), turėsite patys perjungti .active
įvesties klasę label
.
$().button('toggle')
Perjungia stūmimo būseną. Mygtukui atrodo, kad jis buvo suaktyvintas.
$().button('reset')
Iš naujo nustato mygtuko būseną – pakeičia tekstą į pradinį tekstą. Šis metodas yra asinchroninis ir grąžinamas dar nepasibaigus iš naujo.
$().button(string)
Pakeičia tekstą į bet kurią duomenų apibrėžtą teksto būseną.
Lankstus papildinys, kuris naudoja keletą klasių, kad būtų lengva perjungti.
Sutraukti reikia, kad į jūsų „Bootstrap“ versiją būtų įtrauktas perėjimų papildinys .
Spustelėkite toliau pateiktus mygtukus, kad peržiūrint klasę būtų rodomas ir paslėptas kitas elementas:
.collapse
slepia turinį.collapsing
taikomas perėjimų metu.collapse.in
rodo turinįGalite naudoti nuorodą su href
atributu arba mygtuką su data-target
atributu. Abiem atvejais data-toggle="collapse"
būtina.
Išplėskite numatytąjį sutraukimo veiksmą, kad sukurtumėte akordeoną su skydelio komponentu.
Taip pat galima pakeisti .panel-body
s su .list-group
s.
Būtinai pridėkite aria-expanded
prie valdymo elemento. Šis atributas aiškiai apibrėžia dabartinę sutraukiamo elemento būseną ekrano skaitytuvams ir panašioms pagalbinėms technologijoms. Jei sutraukiamas elementas uždarytas pagal numatytuosius nustatymus, jo vertė turėtų būti aria-expanded="false"
. Jei naudodami in
klasę nustatėte, kad sutraukiamasis elementas būtų atidarytas pagal numatytuosius nustatymus, aria-expanded="true"
vietoj jo nustatykite valdiklį. Papildinys automatiškai perjungs šį atributą, atsižvelgdamas į tai, ar sutraukiamas elementas buvo atidarytas ar uždarytas.
Be to, jei jūsų valdymo elementas taikomas vienam sutraukiamam elementui – ty data-target
atributas nurodo id
parinkiklį – prie valdymo elemento galite pridėti papildomą aria-controls
atributą, kuriame yra id
sutraukiamas elementas. Šiuolaikiniai ekrano skaitytuvai ir panašios pagalbinės technologijos naudoja šį atributą, kad suteiktų vartotojams papildomų sparčiųjų klavišų, leidžiančių tiesiogiai pereiti prie paties sutraukiamo elemento.
Sutraukimo papildinys naudoja keletą klasių, kad galėtų susidoroti su sunkiu kėlimu:
.collapse
slepia turinį.collapse.in
rodo turinį.collapsing
pridedamas, kai prasideda perėjimas, ir pašalinamas, kai jis baigiasiŠias klases galima rasti component-animations.less
.
Tiesiog pridėkite data-toggle="collapse"
ir a data-target
prie elemento, kad automatiškai priskirtumėte sulankstomo elemento valdymą. data-target
Atributas priima CSS parinkiklį, kuriam taikomas sutraukimas . Būtinai pridėkite klasę collapse
prie sutraukiamo elemento. Jei norite, kad jis būtų atidarytas pagal numatytuosius nustatymus, pridėkite papildomą klasę in
.
Norėdami pridėti į akordeoną panašų grupės valdymą prie sutraukiamo valdiklio, pridėkite duomenų atributą data-parent="#selector"
. Peržiūrėkite demonstracinę versiją, kad pamatytumėte, kaip tai veikia.
Įgalinti rankiniu būdu su:
Parinktys gali būti perduodamos naudojant duomenų atributus arba JavaScript. Duomenų atributams pridėkite parinkties pavadinimą prie data-
, kaip ir data-parent=""
.
vardas | tipo | numatytas | apibūdinimas |
---|---|---|---|
tėvas | parinkiklis | klaidinga | Jei pateikiamas parinkiklis, visi sutraukiami elementai pagal nurodytą pirminį elementą bus uždaryti, kai bus parodytas šis sutraukiamas elementas. (panašus į tradicinį akordeono elgesį – tai priklauso nuo panel klasės) |
perjungti | loginis | tiesa | Perjungia sutraukiamą elementą iškvietimo metu |
.collapse(options)
Suaktyvina turinį kaip sulankstomą elementą. Priima pasirenkamas parinktis object
.
.collapse('toggle')
Perjungia sutraukiamą elementą į rodomą arba paslėptą. Grįžta į skambinantįjį, kol sutraukiamas elementas iš tikrųjų buvo parodytas arba paslėptas (ty prieš įvykį shown.bs.collapse
arba hidden.bs.collapse
įvykį).
.collapse('show')
Rodo sulankstomą elementą. Grįžta į skambinantįjį, kol iš tikrųjų nebuvo parodytas sutraukiamas elementas (ty prieš shown.bs.collapse
įvykį).
.collapse('hide')
Slepia sulankstomą elementą. Grįžta į skambinantįjį, kol sutraukiamas elementas iš tikrųjų buvo paslėptas (ty prieš hidden.bs.collapse
įvykį).
„Bootstrap“ sutraukimo klasė atskleidžia keletą įvykių, kad būtų galima prisijungti prie sutraukimo funkcijos.
Renginio tipas | apibūdinimas |
---|---|
parodyti.bs.griūti | Šis įvykis suaktyvinamas iš karto, kai show iškviečiamas egzemplioriaus metodas. |
parodyta.bs.griūtis | Šis įvykis suaktyvinamas, kai sutraukimo elementas tampa matomas vartotojui (lauks, kol bus baigti CSS perėjimai). |
paslėpti.bs.griūti | Šis įvykis suaktyvinamas iš karto, kai hide iškviečiamas metodas. |
paslėptas.bs.žlugimas | Šis įvykis suaktyvinamas, kai sutraukimo elementas buvo paslėptas nuo vartotojo (lauks, kol bus baigti CSS perėjimai). |
Skaidrių demonstravimo komponentas, skirtas važiuoti per elementus, pavyzdžiui, karuselę. Įdėtos karuselės nepalaikomos.
Karuselės komponentas paprastai neatitinka pritaikymo neįgaliesiems standartų. Jei reikia laikytis reikalavimų, apsvarstykite kitas turinio pateikimo galimybes.
„Bootstrap“ animacijai naudoja tik CSS3, tačiau „Internet Explorer 8“ ir „9“ nepalaiko būtinų CSS ypatybių. Taigi naudojant šias naršykles nėra skaidrių perėjimo animacijos. Sąmoningai nusprendėme neįtraukti jQuery pagrįstų atsarginių perėjimų.
.active
Klasę reikia įtraukti į vieną iš skaidrių . Priešingu atveju karuselė nebus matoma.
Klasės .glyphicon .glyphicon-chevron-left
ir .glyphicon .glyphicon-chevron-right
nebūtinai reikalingos valdikliams. „Bootstrap“ pateikia .icon-prev
ir .icon-next
kaip paprastas unikodo alternatyvas.
Lengvai pridėkite antraštes skaidrėse naudodami .carousel-caption
elementą bet kuriame .item
. Įdėkite ten beveik bet kokį pasirenkamą HTML ir jis bus automatiškai sulygiuotas ir suformatuotas.
Kad karuselės valdikliai veiktų tinkamai id
, tolimiausiame konteineryje ( ) reikia naudoti karuselės. .carousel
Pridėdami kelias karuseles arba keisdami karuselę id
būtinai atnaujinkite atitinkamus valdiklius.
Naudokite duomenų atributus, kad lengvai valdytumėte karuselės padėtį. data-slide
priima raktinius žodžius prev
arba next
, kuris pakeičia skaidrės padėtį, palyginti su dabartine padėtimi. Arba naudokite data-slide-to
neapdorotą skaidrės rodyklę perduoti į karuselę data-slide-to="2"
, kuri perkelia skaidrės padėtį į tam tikrą indeksą, prasidedantį 0
.
Atributas naudojamas data-ride="carousel"
norint pažymėti karuselę kaip animacinę, pradedant nuo puslapio įkėlimo. Jo negalima naudoti kartu su (pertekline ir nereikalinga) aiškia tos pačios karuselės „JavaScript“ iniciacija.
Skambinkite į karuselę rankiniu būdu naudodami:
Parinktys gali būti perduodamos naudojant duomenų atributus arba JavaScript. Duomenų atributams pridėkite parinkties pavadinimą prie data-
, kaip ir data-interval=""
.
vardas | tipo | numatytas | apibūdinimas |
---|---|---|---|
intervalas | numerį | 5000 | Laikas, per kurį reikia uždelsti tarp automatinio elemento paleidimo. Jei klaidinga, karuselė automatiškai nepasikeis. |
Pauzė | styga | nulinis | "svyruoti" | Jei nustatyta "hover" , pristabdo karuselės judėjimą mouseenter ir atnaujina karuselės judėjimą mouseleave . Jei nustatyta į null , užvedus pelės žymeklį virš karuselės ji nebus pristabdyta. |
apvynioti | loginis | tiesa | Ar karuselė turi važiuoti nuolat, ar sunkiai sustoti. |
klaviatūra | loginis | tiesa | Ar karuselė turėtų reaguoti į klaviatūros įvykius. |
.carousel(options)
Inicijuoja karuselę su pasirenkamomis parinktimis object
ir pradeda važiuoti per elementus.
.carousel('cycle')
Važiuoja per karuselės elementus iš kairės į dešinę.
.carousel('pause')
Sustabdo karuselės judėjimą per daiktus.
.carousel(number)
Perkelia karuselę į tam tikrą kadrą (pagrįsta 0, panašiai kaip masyvas).
.carousel('prev')
Perkeliama į ankstesnį elementą.
.carousel('next')
Perkeliama į kitą elementą.
„Bootstrap“ karuselės klasė atskleidžia du įvykius, kad būtų galima prisijungti prie karuselės funkcijų.
Abu įvykiai turi šias papildomas savybes:
direction
: kryptis, kuria slysta karuselė ( "left"
arba "right"
).relatedTarget
: DOM elementas, kuris stumiamas į vietą kaip aktyvus elementas.Visi karuselės įvykiai suaktyvinami pačioje karuselėje (ty į <div class="carousel">
).
Renginio tipas | apibūdinimas |
---|---|
skaidrė.bs.karuselė | Šis įvykis suaktyvinamas iš karto, kai slide iškviečiamas egzemplioriaus metodas. |
slid.bs.karuselė | Šis įvykis suaktyvinamas, kai karuselė baigia skaidrės perėjimą. |
Afix įskiepis įjungiamas position: fixed;
ir išjungiamas, mėgdžiodamas efektą, rastą naudojant position: sticky;
. Subnavigacija dešinėje yra tiesioginė priedėlio įskiepio demonstracija.
Naudokite priedų papildinį naudodami duomenų atributus arba rankiniu būdu naudodami savo „JavaScript“. Abiem atvejais turite pateikti CSS, kad nustatytumėte pridėto turinio vietą ir plotį.
Pastaba: nenaudokite priedėlio papildinio elemente, esančiame santykinai išdėstytame elemente, pvz., ištrauktame arba stumtame stulpelyje dėl „ Safari“ pateikimo klaidos .
Prietaiso papildinys perjungia tris klases, kurių kiekviena reiškia tam tikrą būseną: .affix
, .affix-top
, ir .affix-bottom
. Jūs turite patys pateikti šių klasių stilius (nepriklausomai position: fixed;
nuo šio papildinio), kad galėtumėte tvarkyti faktines pozicijas..affix
Štai kaip veikia priedų papildinys:
.affix-top
, kad parodytų, kad elementas yra aukščiausioje padėtyje. Šiuo metu CSS padėties nustatymo nereikia..affix
pakeičiami .affix-top
ir nustatomi position: fixed;
(pateikiami Bootstrap CSS)..affix
pakeistas .affix-bottom
. Kadangi poslinkiai yra neprivalomi, norint juos nustatyti, reikia nustatyti atitinkamą CSS. Tokiu atveju pridėkite position: absolute;
, kai reikia. Papildinys naudoja duomenų atributą arba „JavaScript“ parinktį, kad nustatytų, kur išdėstyti elementą.Atlikite anksčiau nurodytus veiksmus, kad nustatytumėte CSS bet kuriai iš toliau pateiktų naudojimo parinkčių.
Norėdami lengvai pridėti prie bet kurio elemento priedą, tiesiog pridėkite data-spy="affix"
prie elemento, kurį norite šnipinėti. Naudokite poslinkius, kad nustatytumėte, kada perjungti elemento prisegimą.
Iškvieskite affix papildinį naudodami „JavaScript“:
Parinktys gali būti perduodamos naudojant duomenų atributus arba JavaScript. Duomenų atributams pridėkite parinkties pavadinimą prie data-
, kaip ir data-offset-top="200"
.
vardas | tipo | numatytas | apibūdinimas |
---|---|---|---|
kompensuoti | numeris | funkcija | objektas | 10 | Pikseliai, skirti nuo ekrano, skaičiuojant slinkties padėtį. Jei pateikiamas vienas skaičius, poslinkis bus taikomas ir viršuje, ir apačioje. Norėdami pateikti unikalų poslinkį apačioje ir viršuje, tiesiog pateikite objektą offset: { top: 10 } arba offset: { top: 10, bottom: 5 } . Naudokite funkciją, kai reikia dinamiškai apskaičiuoti poslinkį. |
taikinys | parinkiklis | mazgas | jQuery elementas | window objektą _ |
Nurodo tikslinį afikso elementą. |
.affix(options)
Suaktyvina jūsų turinį kaip pridėtą turinį. Priima pasirenkamas parinktis object
.
.affix('checkPosition')
Perskaičiuoja priedėlio būseną pagal atitinkamų elementų matmenis, padėtį ir slinkties padėtį. , .affix
, .affix-top
ir .affix-bottom
klasės pridedamos prie pridėto turinio arba pašalinamos iš jo pagal naują būseną. Šį metodą reikia iškviesti kiekvieną kartą, kai keičiami pritvirtinto turinio arba tikslinio elemento matmenys, kad būtų užtikrinta teisinga pritvirtinto turinio padėtis.
„Bootstrap“ priedų papildinys atskleidžia kelis įvykius, kad būtų galima prisijungti prie priedų funkcijos.
Renginio tipas | apibūdinimas |
---|---|
affix.bs.affix | Šis įvykis suaktyvinamas prieš pat elemento pritvirtinimą. |
pritvirtintas.bs.afiksas | Šis įvykis suaktyvinamas priklijavus elementą. |
affix-top.bs.affix | Šis įvykis suaktyvinamas prieš pat elemento pritvirtinimą viršuje. |
affixed-top.bs.affix | Šis įvykis suaktyvinamas po to, kai elementas yra pritvirtintas viršuje. |
affix-bottom.bs.affix | Šis įvykis suaktyvinamas prieš pat elemento pritvirtinimą apačioje. |
affixed-bottom.bs.affix | Šis įvykis suaktyvinamas po to, kai elementas yra pritvirtintas apačioje. |