JavaScript
Muutke Bootstrapi komponendid ellu enam kui tosina kohandatud jQuery pistikprogrammiga. Lisage need lihtsalt kõik või ükshaaval.
Muutke Bootstrapi komponendid ellu enam kui tosina kohandatud jQuery pistikprogrammiga. Lisage need lihtsalt kõik või ükshaaval.
Pluginaid saab lisada eraldi (kasutades Bootstrapi üksikuid *.js
faile) või kõik korraga (kasutades bootstrap.js
või minimeeritud bootstrap.min.js
).
Mõlemad bootstrap.js
ja bootstrap.min.js
sisaldavad kõiki pistikprogramme ühes failis. Kaasake ainult üks.
Mõned pistikprogrammid ja CSS-i komponendid sõltuvad teistest pistikprogrammidest. Kui lisate pistikprogrammid eraldi, kontrollige kindlasti nende sõltuvuste olemasolu dokumentidest. Pange tähele ka seda, et kõik pistikprogrammid sõltuvad jQueryst (see tähendab, et jQuery peab olema lisatud enne pluginafaile). Konsulteerige meiegabower.json
, et näha, milliseid jQuery versioone toetatakse.
Saate kasutada kõiki Bootstrapi pistikprogramme puhtalt märgistus-API kaudu, kirjutamata ühtegi JavaScripti rida. See on Bootstrapi esmaklassiline API ja see peaks olema pistikprogrammi kasutamisel esimene kaalutlus.
Sellegipoolest võib mõnes olukorras olla soovitav see funktsioon välja lülitada. Seetõttu pakume ka võimalust keelata andmeatribuudi API, tühistades kõik sündmused dokumendis, mille nimeruumis on data-api
. See näeb välja selline:
Teise võimalusena lisage konkreetse pistikprogrammi sihtimiseks lihtsalt pistikprogrammi nimi nimeruumina koos data-api nimeruumiga, näiteks järgmiselt:
Ärge kasutage sama elemendi puhul mitme pistikprogrammi andmeatribuute. Näiteks ei saa nupul olla nii tööriistavihje kui ka modaali vahetamine. Selle saavutamiseks kasutage ümbriselementi.
Samuti usume, et peaksite saama kasutada kõiki Bootstrapi pistikprogramme ainult JavaScripti API kaudu. Kõik avalikud API-d on üksikud, aheldatavad meetodid ja tagastavad kogu, mille alusel on tegu.
Kõik meetodid peaksid aktsepteerima valikuliste suvandite objekti, stringi, mis sihib konkreetset meetodit, või mitte midagi (mis käivitab vaikekäitumisega pistikprogrammi):
Iga pistikprogramm avaldab ka oma töötlemata konstruktori Constructor
atribuudil: $.fn.popover.Constructor
. Kui soovite hankida konkreetse pistikprogrammi eksemplari, hankige see otse elemendist: $('[rel="popover"]').data('popover')
.
Saate muuta pistikprogrammi vaikesätteid, muutes pistikprogrammi Constructor.DEFAULTS
objekti.
Mõnikord on vaja Bootstrapi pistikprogramme kasutada koos teiste kasutajaliidese raamistikega. Sellistel juhtudel võib aeg-ajalt tekkida nimeruumi kokkupõrkeid. Kui see juhtub, võite helistada .noConflict
pistikprogrammile, mille väärtust soovite taastada.
Bootstrap pakub kohandatud sündmusi enamiku pistikprogrammide ainulaadsete toimingute jaoks. Tavaliselt esinevad need infinitiivi ja mineviku osastava vormina – kus infinitiiv (nt show
) käivitatakse sündmuse alguses ja selle mineviku osastava vorm (nt shown
) käivitatakse toimingu lõppedes.
Alates versioonist 3.0.0 on kõik Bootstrapi sündmused nimeruumid.
Kõik infinitiivsed sündmused pakuvad preventDefault
funktsionaalsust. See annab võimaluse toimingu sooritamine enne selle algust peatada.
Iga Bootstrapi jQuery pistikprogrammi versioonile pääseb juurde VERSION
pistikprogrammi konstruktori atribuudi kaudu. Näiteks tööriistavihje pistikprogrammi jaoks:
Bootstrapi pistikprogrammid ei lange eriti graatsiliselt tagasi, kui JavaScript on keelatud. Kui teile meeldib sel juhul kasutajakogemus, kasutage <noscript>
olukorra selgitamiseks (ja JavaScripti uuesti lubamiseks) oma kasutajatele ja/või oma kohandatud varude lisamiseks.
Bootstrap ei toeta ametlikult kolmandate osapoolte JavaScripti teeke , nagu Prototype või jQuery kasutajaliides. Vaatamata .noConflict
ja nimeruumiga sündmustele võib esineda ühilduvusprobleeme, mille peate ise lahendama.
Lihtsate üleminekuefektide jaoks lisage transition.js
üks kord teiste JS-failide kõrvale. Kui kasutate kompileeritud (või minimeeritud) bootstrap.js
, pole seda vaja lisada – see on juba olemas.
Transition.js on transitionEnd
sündmuste põhiabiline ja ka CSS-i ülemineku emulaator. Teised pistikprogrammid kasutavad seda CSS-i ülemineku toe kontrollimiseks ja rippuvate üleminekute tabamiseks.
Üleminekuid saab globaalselt keelata järgmise JavaScripti koodilõigu abil, mis peab tulema pärast transition.js
(või bootstrap.js
või bootstrap.min.js
, vastavalt olukorrale) laadimist:
Modaalid on voolujoonelised, kuid paindlikud, minimaalse nõutava funktsionaalsuse ja nutikate vaikeseadetega dialoogiviibad.
Ärge avage modaali, kui teine on veel nähtaval. Rohkem kui ühe modaali korraga kuvamiseks on vaja kohandatud koodi.
Püüdke alati paigutada modaali HTML-kood oma dokumendis kõrgeima taseme positsioonile, et vältida muid komponente, mis modaali välimust ja/või funktsionaalsust mõjutavad.
Mobiilseadmetes modaalide kasutamisel on mõned hoiatused. Vaadake üksikasju meie brauseri tugidokumentidest .
HTML5 semantika määratlemise tõttu autofocus
ei mõjuta HTML-i atribuut Bootstrapi modaalides. Sama efekti saavutamiseks kasutage mõnda kohandatud JavaScripti:
Renderdatud modaal koos päise, keha ja jaluses olevate toimingute komplektiga.
Lülitage modaal JavaScripti kaudu sisse, klõpsates alloleval nupul. See libiseb alla ja tuhmub lehe ülaosast sisse.
Kindlasti lisage role="dialog"
ja aria-labelledby="..."
, viidates modaalsele pealkirjale , .modal
ja role="document"
iseendale .modal-dialog
.
Lisaks võite anda oma modaalse dialoogi aria-describedby
kirjelduse .modal
.
YouTube'i videote modaalidesse manustamiseks on vaja täiendavat JavaScripti, mis ei ole Bootstrapis, et taasesitus automaatselt peatada ja palju muud. Lisateabe saamiseks vaadake seda kasulikku Stack Overflow postitust .
Modaalidel on kaks valikulist suurust, mis on saadaval modifikaatoriklasside kaudu, mis asetatakse .modal-dialog
.
Modaalide puhul, mis lihtsalt ilmuvad, mitte ei tuhmu vaatamiseks, eemaldage .fade
klass oma modaalimärgistusest.
Modaalis Bootstrapi ruudustikusüsteemi eeliste kasutamiseks pesake .row
s lihtsalt ruudustiku sisse .modal-body
ja seejärel kasutage tavalisi ruudustikusüsteemi klasse.
Kas teil on hunnik nuppe, mis kõik käivitavad sama modaali, kuid veidi erineva sisuga? Kasutage event.relatedTarget
ja HTML - data-*
atribuute (võimalik , et jQuery kaudu ), et muuta modaali sisu sõltuvalt sellest, millisel nupul klõpsati. Vaadake üksikasju Modal Events'i dokumentidest relatedTarget
,
Modaalne pistikprogramm lülitab teie peidetud sisu nõudmisel andmeatribuutide või JavaScripti kaudu sisse. Samuti lisab .modal-open
see <body>
kerimise vaikekäitumise alistamise ja loob .modal-backdrop
klõpsuala kuvatavate modaalide kõrvalejätmiseks, kui klõpsate väljaspool modaali.
Aktiveerige modaal JavaScripti kirjutamata. Seadistage data-toggle="modal"
kontrolleri element, nagu nupp, koos data-target="#foo"
või href="#foo"
, et sihtida ümberlülitamiseks konkreetset modaali.
Kutsuge modaali ID myModal
-ga ühe JavaScripti reaga:
Valikud saab edastada andmeatribuutide või JavaScripti kaudu. Andmeatribuutide jaoks lisage valiku nimi data-
, nagu data-backdrop=""
.
Nimi | tüüp | vaikimisi | kirjeldus |
---|---|---|---|
taustaks | tõeväärtus või string'static' |
tõsi | Sisaldab modaalset taustaelementi. Teise võimalusena määrake static taust, mis ei sulge modaali klõpsamisel. |
klaviatuur | tõeväärtus | tõsi | Sulgeb modaali, kui vajutada paoklahvi |
näidata | tõeväärtus | tõsi | Initsialiseerimisel kuvatakse modaal. |
kaugjuhtimispult | tee | vale | See suvand on alates versioonist 3.3.0 aegunud ja versioonis 4 on see eemaldatud. Soovitame selle asemel kasutada kliendipoolset malli või andmete sidumise raamistikku või helistada ise failile jQuery.load . Kui antakse kaug-URL, laaditakse sisu üks kord jQuery |
.modal(options)
Aktiveerib teie sisu modaalina. Aktsepteerib valikulisi valikuid object
.
.modal('toggle')
Lülitab modaali käsitsi ümber. Naaseb helistaja juurde enne, kui modaal on tegelikult näidatud või peidetud (st enne shown.bs.modal
või hidden.bs.modal
sündmuse toimumist).
.modal('show')
Avab modaali käsitsi. Naaseb helistaja juurde enne, kui modaali on tegelikult näidatud (st enne shown.bs.modal
sündmuse toimumist).
.modal('hide')
Peidab modaali käsitsi. Naaseb helistaja juurde enne, kui modaal on tegelikult peidetud (st enne hidden.bs.modal
sündmuse toimumist).
.modal('handleUpdate')
Reguleerib modaali positsioneerimist, et vältida kerimisriba, kui see peaks ilmuma, mis paneks modaali vasakule hüppama.
Vajalik ainult siis, kui modaali kõrgus muutub selle avatud ajal.
Bootstrapi modaalklass paljastab mõned sündmused modaalse funktsionaalsusega ühendamiseks.
Kõik modaalsündmused käivitatakse modaali enda (st <div class="modal">
) suunas.
Sündmuse tüüp | Kirjeldus |
---|---|
show.bs.modal | See sündmus käivitub kohe, kui show eksemplari meetod kutsutakse. Kui selle põhjuseks on klõps, on klõpsatud element saadaval relatedTarget sündmuse atribuudina. |
näidatud.bs.modal | See sündmus käivitatakse, kui modaal on kasutajale nähtavaks tehtud (ootab CSS-i üleminekut). Kui selle põhjuseks on klõps, on klõpsatud element saadaval relatedTarget sündmuse atribuudina. |
peida.bs.modal | See sündmus käivitatakse kohe, kui hide eksemplari meetod on välja kutsutud. |
peidetud.bs.modal | See sündmus käivitatakse, kui modaal on kasutaja eest peitmise lõpetanud (ootab, kuni CSS-i üleminekud on lõpule viidud). |
loaded.bs.modal | See sündmus käivitatakse, kui modaal on remote suvandit kasutades sisu laadinud. |
Lisage selle lihtsa pistikprogrammi abil rippmenüüd peaaegu kõigele, sealhulgas navigeerimisribale, vahelehtedele ja tablettidele.
Andmeatribuutide või JavaScripti kaudu lülitab rippmenüü pistikprogramm peidetud sisu (rippmenüüd) sisse, lülitades .open
klassi ülemloendi üksusel.
Mobiilseadmetes lisab rippmenüü avamine .dropdown-backdrop
puudutusala rippmenüüde sulgemiseks, kui puudutate väljaspool menüüd, mis on iOS-i nõuetekohase toe nõue. See tähendab, et avatud rippmenüüst teisele rippmenüüle lülitumiseks on vaja mobiilis täiendavat puudutust.
Märkus. data-toggle="dropdown"
Atribuuti kasutatakse rakenduse tasemel rippmenüüde sulgemisel, seega on hea mõte seda alati kasutada.
Lisage data-toggle="dropdown"
lingile või nupule rippmenüü sisselülitamiseks.
URL-ide linginuppudega puutumatuna hoidmiseks kasutage data-target
atribuuti href="#"
.
Kutsuge rippmenüüd JavaScripti kaudu:
data-toggle="dropdown"
ikka nõutudOlenemata sellest, kas helistate rippmenüüsse JavaScripti kaudu või kasutate selle asemel andmeapi-d, data-toggle="dropdown"
peab rippmenüü päästikuelemendil alati olema.
Mitte ühtegi
$().dropdown('toggle')
Lülitab antud navigeerimisriba või vahelehtedega navigeerimise rippmenüü sisse- ja väljalülitamiseks.
Kõik rippmenüü sündmused käivitatakse .dropdown-menu
ülemelemendis.
Kõigil rippmenüü sündmustel on relatedTarget
atribuut, mille väärtus on lülitusankurelement.
Sündmuse tüüp | Kirjeldus |
---|---|
näita.bs.rippmenüüd | See sündmus käivitub kohe, kui kutsutakse näitamise eksemplari meetod. |
kuvatud.bs.rippmenüü | See sündmus käivitatakse, kui rippmenüü on kasutajale nähtavaks tehtud (ootab CSS-i üleminekuid, et lõpetada). |
hide.bs.rippmenüü | See sündmus käivitatakse kohe, kui peida eksemplari meetod on välja kutsutud. |
peidetud.bs.rippmenüü | See sündmus käivitatakse, kui rippmenüü on kasutaja eest peitmise lõpetanud (ootab CSS-i üleminekuid, et lõpetada). |
ScrollSpy pistikprogramm on mõeldud navigeerimissihtmärkide automaatseks värskendamiseks kerimisasendi alusel. Kerige navigeerimisriba all olevat ala ja vaadake aktiivse klassi muutumist. Samuti tõstetakse esile rippmenüü alamüksused.
Kuulutus säärised keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi, enne kui need välja müüdi. Tumblr talust lauani jalgrattaõigused mis iganes. Anim keffiyeh carles kardigan. Velit seitan mcsweeney fotokabiin 3 hunt moon irure. Cosby kampsun lomo jean lühikesed püksid, williamsburgi hoodie minim qui te pole ilmselt neist kuulnud ja kardigan usaldusfond culpa biodiesel wes anderson esteetiline. Nihil tätoveeritud accusamus, cred iroonia biodiisel keffiyeh artisan ullamco consequat.
Veniam marfa vuntsidega rula, imev fugiat velit pitchfork habe. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat neli loko nisi, ea helvetica nulla carles. Tätoveeritud cosby kampsun food truck, mcsweeney quis non-freegan vinüül. Lo-fi wes anderson +1 sartorial. Carles mitte esteetiline treening quis gentrify. Brooklyni maitsev käsitööõlu vicekeytar deserunt.
Occaecat commodo aliqua delectus. Fap käsitööõlu deserunt rula ea. Lomo jalgrattaõigused adipisicing banh mi, velit ea sunt next level locavore ühe päritoluga kohv magna veniam. High life ID vinüül, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger kott. Cred ex in, jätkusuutlik 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 blogi, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id oletatav. Locavore sed helvetica klišee iroonia, äikesekassid, millest te ilmselt pole kuulnudki, consequat kapuutsiga gluteenivaba lo-fi fap aliquip. Labore elit placeat, enne kui need välja müüdi, Terry richardson proident brunch nesciunt quis cosby kampsun pariatur keffiyeh ut helvetica artisan. Cardigan käsitööõlu seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.
Navigeerimisriba linkidel peavad olema lahendatavad ID sihtmärgid. Näiteks <a href="#home">home</a>
peab vastama millelegi DOM-is nagu <div id="home"></div>
.
:visible
elemente eiratiSihtelemente, mis ei vasta :visible
jQueryle , ignoreeritakse ja neile vastavaid navigeerimisüksusi ei tõsteta kunagi esile.
Olenemata rakendusmeetodist nõuab scrollspy kasutamist position: relative;
elemendil, mille järele luurate. Enamikul juhtudel on see <body>
. Kui sirvite muid elemente peale <body>
, veenduge, et teil oleks height
komplekt ja overflow-y: scroll;
rakendatud.
Scrollspy käitumise hõlpsaks lisamiseks ülemise riba navigeerimisse lisage data-spy="scroll"
element, mida soovite luurata (tavaliselt on see <body>
). Seejärel lisage atribuut mis tahes Bootstrapi komponendi data-target
algelemendi ID või klassiga ..nav
Pärast position: relative;
CSS-i lisamist kutsuge JavaScripti kaudu scrollspy:
.scrollspy('refresh')
Kui kasutate scrollspy-d koos DOM-i elementide lisamise või eemaldamisega, peate välja kutsuma värskendusmeetodi järgmiselt:
Valikud saab edastada andmeatribuutide või JavaScripti kaudu. Andmeatribuutide jaoks lisage valiku nimi data-
, nagu data-offset=""
.
Nimi | tüüp | vaikimisi | kirjeldus |
---|---|---|---|
nihe | number | 10 | Pikslid nihutamiseks ülevalt kerimise asukoha arvutamisel. |
Sündmuse tüüp | Kirjeldus |
---|---|
activate.bs.scrollspy | See sündmus käivitub alati, kui scrollspy aktiveerib uue üksuse. |
Lisage kiire ja dünaamilise vahekaardi funktsionaalsus, et liikuda läbi kohaliku sisu paanide, isegi rippmenüüde kaudu. Pesastatud vahelehti ei toetata.
Toores teksapüksid, Austin, te pole neist ilmselt kuulnud. Nesciunt tofu stumptown aliqua, retro süntekameistri puhastus. Vuntside kliše tempor, williamsburg carles vegan helvetica. Rerehenderit butcher retro keffiyeh Dreamcatcher sünt. Cosby kampsun eu banh mi, qui irure terry richardson ex squid. Aliquip placeat Salvia cillum iphone. Seitan aliquip quis kardigan Ameerika rõivad, lihunik 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.
See pistikprogramm laiendab vahekaartidega navigeerimiskomponenti , et lisada vahekaartide alasid.
Lubage vahekaartide vahekaardid JavaScripti kaudu (iga vahekaart tuleb eraldi aktiveerida):
Üksikuid vahekaarte saate aktiveerida mitmel viisil.
Saate aktiveerida vahelehe või pilli navigeerimise ilma JavaScripti kirjutamata, lihtsalt elemendi täpsustades data-toggle="tab"
või peal. Klasside ja vahekaardile lisamisel rakendatakse vahekaardi Bootstrap data-toggle="pill"
stiili , klasside ja lisamisel aga pilli stiili .nav
nav-tabs
ul
nav
nav-pills
Vahelehtede tuhmumiseks lisage .fade
igale .tab-pane
. Esimene vahelehepaan peab ka .in
esialgse sisu nähtavaks tegema.
$().tab
Aktiveerib vahekaardi elemendi ja sisu konteineri. Vahekaardil peaks olema DOM-is kas konteineri sõlm data-target
või sihtimispunkt. href
Ülaltoodud näidetes on vahekaardid atribuutidega <a>
s .data-toggle="tab"
.tab('show')
Valib antud vahekaardi ja näitab sellega seotud sisu. Kõik muud varem valitud vahekaardid tühistatakse ja nendega seotud sisu peidetakse. Naaseb helistaja juurde enne vahekaardipaani tegelikku näitamist (st enne shown.bs.tab
sündmuse toimumist).
Uue vahelehe kuvamisel käivituvad sündmused järgmises järjekorras.
hide.bs.tab
(praegusel aktiivsel vahekaardil)show.bs.tab
(näitataval vahekaardil)hidden.bs.tab
(eelmisel aktiivsel vahekaardil sama, mis hide.bs.tab
sündmuse puhul)shown.bs.tab
(äsja aktiivsel just kuvatud vahekaardil sama, mis show.bs.tab
sündmuse puhul)Kui ükski vahekaart ei olnud juba aktiivne, siis sündmusi hide.bs.tab
ja hidden.bs.tab
ei käivitata.
Sündmuse tüüp | Kirjeldus |
---|---|
show.bs.tab | See sündmus käivitub vahekaardi kuvamisel, kuid enne uue vahekaardi kuvamist. Kasutage event.target ja event.relatedTarget , et sihtida vastavalt aktiivset vahekaarti ja eelmist aktiivset vahekaarti (kui see on saadaval). |
näidatud.bs.tab | See sündmus käivitub vahekaardi kuvamisel pärast vahekaardi kuvamist. Kasutage event.target ja event.relatedTarget , et sihtida vastavalt aktiivset vahekaarti ja eelmist aktiivset vahekaarti (kui see on saadaval). |
hide.bs.tab | See sündmus käivitub, kui kuvatakse uus vahekaart (ja seega eelmine aktiivne vahekaart peidetakse). Kasutage event.target ja event.relatedTarget , et sihtida vastavalt praegust aktiivset vahekaarti ja uut peagi aktiivset vahekaarti. |
peidetud.bs.tab | See sündmus käivitub pärast uue vahekaardi kuvamist (ja seega on eelmine aktiivne vahekaart peidetud). Kasutage event.target ja event.relatedTarget , et sihtida vastavalt eelmist aktiivset vahekaarti ja uut aktiivset vahekaarti. |
Inspireeritud suurepärasest jQuery.tipsy pistikprogrammist, mille on kirjutanud Jason Frame; Tööriistavihjed on värskendatud versioon, mis ei tugine piltidele, kasutavad animatsioonide jaoks CSS3 ja kohaliku pealkirja salvestamiseks andmeatribuute.
Nullpikkusega pealkirjadega vihjeid ei kuvata kunagi.
Tööriistanäpunäidete nägemiseks hõljutage kursorit allolevate linkide kohal.
Kitsad püksid järgmise taseme keffiyeh , te pole neist ilmselt kuulnud. Fotokabiini habe toores teksast kõrgtrüki vegan messenger bag stumptown. Farmist lauale seitan, Mcsweeney fixie säästva kinoa 8-bitine Ameerika rõivas on frotee richardsoni vinüül chambray. Beard stumptown, kardiganid banh mi lomo thundercats. Tofu biodiisel williamsburg marfa, neli loko mcsweeney puhast vegan chambray. Tõeliselt irooniline käsitööline , olenemata klaviatuurist , farmist lauale, Austini Twitteri käepidemega freegan cred toores teksariidest ühe päritoluga kohviviirus.
Saadaval on neli valikut: ülemine, parem, alumine ja vasakule joondatud.
Toimivuse huvides on tööriistavihje ja Popoveri andmeapis lubatud, mis tähendab, et peate need ise lähtestama .
Üks viis lehe kõigi tööriistavihjete lähtestamiseks on valida need nende data-toggle
atribuudi järgi:
Tööriistavihje pistikprogramm loob nõudmisel sisu ja märgistuse ning asetab vaikimisi vihjed nende päästikuelemendi järele.
Käivitage kohtspikker JavaScripti kaudu:
Tööriistaspikri nõutav märgistus on ainult data
atribuut ja title
HTML-elemendil, mille kohta soovite vihjet, on. Tööriistaspikri loodud märgistus on üsna lihtne, kuigi see nõuab positsiooni (vaikimisi top
on pistikprogrammi poolt määratud).
Mõnikord soovite hüperlingile lisada kohtspikri, mis murrab mitut rida. Tööriistavihje pistikprogrammi vaikimisi käitumine on selle tsentreerimine horisontaalselt ja vertikaalselt. Selle vältimiseks lisage white-space: nowrap;
oma ankrutele.
Kui kasutate tööriistavihjeid elementide a .btn-group
või elementide .input-group
või tabeliga seotud elementide ( <td>
, <th>
, <tr>
, , , , , , , , , <thead>
, <tbody>
, <tfoot>
) kohta, peate container: 'body'
soovimatute kõrvalmõjude vältimiseks (nt elemendi laiemaks muutumine ja/ või ümarate nurkade kaotamine tööriistaspikri käivitamisel).
Klaviatuuriga navigeerivad kasutajad, eriti abitehnoloogiate kasutajad, peaksite lisama tööriistavihjeid ainult klaviatuurile keskenduvatele elementidele, nagu lingid, vormi juhtelemendid või mis tahes suvaline tabindex="0"
atribuudiga element.
disabled
Elemendile või elemendile kohtspikri lisamiseks .disabled
asetage element a sisse <div>
ja rakendage selle <div>
asemel kohtspikker.
Valikud saab edastada andmeatribuutide või JavaScripti kaudu. Andmeatribuutide jaoks lisage valiku nimi data-
, nagu data-animation=""
.
Nimi | Tüüp | Vaikimisi | Kirjeldus |
---|---|---|---|
animatsioon | tõeväärtus | tõsi | Rakendage kohtspikrile CSS-i tuhmumise üleminek |
konteiner | string | vale | vale | Lisab kohtspikri konkreetsele elemendile. Näide: |
viivitus | number | objektiks | 0 | Tööriistavihje kuvamise ja peitmise viivitus (ms) – ei kehti käsitsi käivitamise tüübi puhul Kui number on esitatud, rakendatakse viivitust mõlemale peitmisele/näitamisele Objekti struktuur on järgmine: |
html | tõeväärtus | vale | Sisestage kohtspikrisse HTML. Kui see on vale, text kasutatakse sisu DOM-i sisestamiseks jQuery meetodit. Kui olete XSS-i rünnakute pärast mures, kasutage teksti. |
paigutus | string | funktsiooni | 'ülemine' | Kuidas asetada kohtspikker – top | alumine | vasakule | paremal | auto. Kui funktsiooni kasutatakse paigutuse määramiseks, kutsutakse see välja, mille esimeseks argumendiks on tööriistavihje DOM-sõlm ja teiseks käivitava elemendi DOM-sõlm. Kontekst |
valija | string | vale | Kui valija on ette nähtud, delegeeritakse tööriistavihje objektid määratud sihtmärkidele. Praktikas kasutatakse seda dünaamilise HTML-sisu tööriistavihjete lisamiseks. Vaadake seda ja informatiivset näidet . |
malli | string | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
Algne HTML, mida kasutada kohtspikri loomisel. Tööriistavihje
Kõige välimisel ümbriselemendil peaks olema |
pealkiri | string | funktsiooni | '' | Pealkirja vaikeväärtus, kui Kui funktsioon on antud, kutsutakse see välja koos |
päästik | string | 'hover fookus' | Kuidas tööriistavihje käivitatakse – klõpsake | hõljuda | keskenduda | manuaal. Võite läbida mitu päästikut; eraldage need tühikuga. manual ei saa kombineerida ühegi teise päästikuga. |
vaateava | string | objekt | funktsiooni | { valija: 'keha', polster: 0 } | Hoiab kohtspikri selle elemendi piires. Näide: Kui funktsioon on antud, kutsutakse see välja, mille ainsaks argumendiks on käivitav element DOM-sõlm. Kontekst |
Üksikute tööriistavihjete valikuid saab alternatiivselt määrata andmeatribuutide abil, nagu eespool selgitatud.
$().tooltip(options)
Kinnitab elemendikogule tööriistaspikri töötleja.
.tooltip('show')
Näitab elemendi kohtspikri. Naaseb helistaja juurde enne, kui vihje on tegelikult näidatud (st enne shown.bs.tooltip
sündmuse toimumist). Seda peetakse kohtspikri "käsitsi" käivitamiseks. Nullpikkusega pealkirjadega vihjeid ei kuvata kunagi.
.tooltip('hide')
Peidab elemendi kohtspikri. Naaseb helistaja juurde enne, kui kohtspikker on tegelikult peidetud (st enne hidden.bs.tooltip
sündmuse toimumist). Seda peetakse kohtspikri "käsitsi" käivitamiseks.
.tooltip('toggle')
Lülitab elemendi kohtspikri. Naaseb helistaja juurde enne, kui kohtspikker on tegelikult näidatud või peidetud (st enne shown.bs.tooltip
või hidden.bs.tooltip
sündmuse toimumist). Seda peetakse kohtspikri "käsitsi" käivitamiseks.
.tooltip('destroy')
Peidab ja hävitab elemendi kohtspikri. Delegeerimist kasutavaid tööriistavihjeid (mis luuakse suvandiga selector
) ei saa järeltulijate päästikuelementide puhul eraldi hävitada.
Sündmuse tüüp | Kirjeldus |
---|---|
show.bs.tööriistavihje | See sündmus käivitub kohe, kui show eksemplari meetod kutsutakse. |
näidatud.bs.tööriistavihje | See sündmus käivitatakse, kui kohtspikker on kasutajale nähtavaks tehtud (ootab, kuni CSS-i üleminekud on lõpule viidud). |
peida.bs.tööriistavihje | See sündmus käivitatakse kohe, kui hide eksemplari meetod on välja kutsutud. |
peidetud.bs.tööriistavihje | See sündmus käivitatakse, kui kohtspikker on kasutaja eest peitmise lõpetanud (ootab, kuni CSS-i üleminekud on lõpule viidud). |
sisestatud.bs.tööriistavihje | See sündmus käivitatakse pärast show.bs.tooltip sündmust, kui kohtspikri mall on DOM-i lisatud. |
Lisage sekundaarse teabe paigutamiseks mis tahes elemendile väikesed sisu ülekatted, nagu iPadis.
Hüpikaknaid, mille pealkiri ja sisu on nullpikkused, ei kuvata kunagi.
Hüpikaknad nõuavad, et teie Bootstrapi versioonile oleks kaasatud kohtspikker .
Toimivuse huvides on tööriistavihje ja Popoveri andmeapis lubatud, mis tähendab, et peate need ise lähtestama .
Üks viis kõigi lehe hüpikaknate lähtestamiseks on valida need nende data-toggle
atribuudi järgi:
Kui kasutate hüpikaknaid elementides a .btn-group
või elemendis .input-group
või tabeliga seotud elementides ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, <tfoot>
), peate container: 'body'
soovimatute kõrvalmõjude vältimiseks (nt elemendi laiemaks muutumine ja/) määrama valiku (dokumenteeritud allpool). või hüpikakna käivitamisel ümarate nurkade kaotamine).
disabled
Elemendile või .disabled
elemendile hüpikakna lisamiseks asetage element elemendi a sisse <div>
ja rakendage selle <div>
asemel hüpikakna.
Mõnikord soovite lisada hüpikakna hüperlingile, mis murrab mitut rida. Popover-plugina vaikimisi käitumine on selle tsentreerimine horisontaalselt ja vertikaalselt. Selle vältimiseks lisage white-space: nowrap;
oma ankrutele.
Saadaval on neli valikut: ülemine, parem, alumine ja vasakule joondatud.
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.
Kasutage focus
päästikut hüpikaknate tühistamiseks järgmisel kasutaja klõpsul.
Õigeks brauseri- ja platvormiüleseks käitumiseks peate kasutama <a>
märgendit, mitte<button>
märgendit, ning lisama ka atribuute ja role="button"
.tabindex
Luba hüpikaknad JavaScripti kaudu:
Valikud saab edastada andmeatribuutide või JavaScripti kaudu. Andmeatribuutide jaoks lisage valiku nimi data-
, nagu data-animation=""
.
Nimi | Tüüp | Vaikimisi | Kirjeldus |
---|---|---|---|
animatsioon | tõeväärtus | tõsi | Rakendage hüpikaknale CSS-i tuhmumise üleminek |
konteiner | string | vale | vale | Lisab hüpikakna konkreetsele elemendile. Näide: |
sisu | string | funktsiooni | '' | Sisu vaikeväärtus, kui Kui funktsioon on antud, kutsutakse see välja nii, et selle |
viivitus | number | objektiks | 0 | Hüpikakna kuvamise ja peitmise viivitus (ms) – ei kehti käsitsi käivitamise tüübi puhul Kui number on esitatud, rakendatakse viivitust mõlemale peitmisele/näitamisele Objekti struktuur on järgmine: |
html | tõeväärtus | vale | Sisestage hüpikaknasse HTML. Kui see on vale, text kasutatakse sisu DOM-i sisestamiseks jQuery meetodit. Kui olete XSS-i rünnakute pärast mures, kasutage teksti. |
paigutus | string | funktsiooni | 'õige' | Kuidas positsioneerida hüpikakna - top | alumine | vasakule | paremal | auto. Kui paigutuse määramiseks kasutatakse funktsiooni, kutsutakse seda esile hüpikakna DOM-sõlme esimese argumendiga ja käivitava elemendi DOM-sõlm teise argumendiga. Kontekst |
valija | string | vale | Kui valija on ette nähtud, delegeeritakse hüpikaknaobjektid määratud sihtmärkidele. Praktikas kasutatakse seda dünaamilise HTML-i sisu hüpikaknade lisamiseks. Vaadake seda ja informatiivset näidet . |
malli | string | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' |
Põhi-HTML, mida kasutada hüpikakna loomisel. Popover'id Popover'id
Kõige välimisel ümbriselemendil peaks olema |
pealkiri | string | funktsiooni | '' | Pealkirja vaikeväärtus, kui Kui funktsioon on antud, kutsutakse see välja nii, et selle |
päästik | string | "klõps" | Kuidas hüpikakna käivitatakse – klõpsake | hõljuda | keskenduda | manuaal. Võite läbida mitu päästikut; eraldage need tühikuga. manual ei saa kombineerida ühegi teise päästikuga. |
vaateava | string | objekt | funktsiooni | { valija: 'keha', polster: 0 } | Hoiab hüpikakna selle elemendi piirides. Näide: Kui funktsioon on antud, kutsutakse see välja, mille ainsaks argumendiks on käivitav element DOM-sõlm. Kontekst |
Üksikute hüpikaknate valikuid saab alternatiivselt määrata andmeatribuutide abil, nagu eespool selgitatud.
$().popover(options)
Initsialiseerib hüpikaknad elemendikogu jaoks.
.popover('show')
Näitab elemendi hüpikakna. Naaseb helistaja juurde enne hüpikakna tegelikku näitamist (st enne shown.bs.popover
sündmuse toimumist). Seda peetakse hüpikakna "käsitsi" käivitamiseks. Hüpikaknaid, mille pealkiri ja sisu on nullpikkused, ei kuvata kunagi.
.popover('hide')
Peidab elemendi hüpikakna. Naaseb helistaja juurde enne, kui hüpikaken on tegelikult peidetud (st enne hidden.bs.popover
sündmuse toimumist). Seda peetakse hüpikakna "käsitsi" käivitamiseks.
.popover('toggle')
Lülitab elemendi hüpikakna välja. Naaseb helistaja juurde enne, kui hüpikaknat on tegelikult näidatud või peidetud (st enne sündmuse shown.bs.popover
või hidden.bs.popover
toimumist). Seda peetakse hüpikakna "käsitsi" käivitamiseks.
.popover('destroy')
Peidab ja hävitab elemendi hüpikakna. Delegeerimist kasutavaid hüpikaknaid (mis luuakse suvandiga selector
) ei saa järeltulijate päästikuelementidel eraldi hävitada.
Sündmuse tüüp | Kirjeldus |
---|---|
show.bs.popover | See sündmus käivitub kohe, kui show eksemplari meetod kutsutakse. |
näidatud.bs.popover | See sündmus käivitatakse, kui hüpikaken on kasutajale nähtavaks tehtud (ootab CSS-i üleminekut). |
peida.bs.popover | See sündmus käivitatakse kohe, kui hide eksemplari meetod on välja kutsutud. |
peidetud.bs.popover | See sündmus käivitatakse, kui hüpikakna kasutaja eest peitmine on lõppenud (ootab, kuni CSS-i üleminekud on lõpule viidud). |
sisestatud.bs.popover | See sündmus käivitatakse pärast show.bs.popover sündmust, kui hüpikakende mall on DOM-i lisatud. |
Lisage selle pistikprogrammiga kõikidele hoiatusteadetele loobumisfunktsioon.
Nupu kasutamisel .close
peab see olema nupu esimene alam ja selle ette .alert-dismissible
ei tohi märgistuses tekstisisu tulla.
Muutke seda ja teist ning proovige uuesti. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
Lihtsalt lisage data-dismiss="alert"
oma sulgemisnupule, et anda automaatselt hoiatuse sulgemise funktsioon. Hoiatuse sulgemine eemaldab selle DOM-ist.
Kui soovite, et hoiatused kasutaksid sulgemisel animatsiooni, veenduge, et neile oleks juba rakendatud klassid .fade
ja ..in
$().alert()
Annab hoiatuse kuulama klõpsusündmusi data-dismiss="alert"
atribuuti omavatel järglastel elementidel. (Pole vajalik, kui kasutate data-api automaatset initsialiseerimist.)
$().alert('close')
Sulgeb hoiatuse, eemaldades selle DOM-ist. Kui elemendil on klassid .fade
ja .in
, kaob hoiatus enne selle eemaldamist.
Bootstrapi hoiatusplugin paljastab mõned sündmused hoiatusfunktsiooniga ühendamiseks.
Sündmuse tüüp | Kirjeldus |
---|---|
close.bs.alert | See sündmus käivitub kohe, kui close eksemplari meetod kutsutakse. |
suletud.bs.hoiatus | See sündmus käivitatakse, kui hoiatus on suletud (ootab, kuni CSS-i üleminekud on lõpule viidud). |
Tehke nuppudega rohkem. Juhtnupu olekud või nupurühmade loomine rohkemate komponentide, näiteks tööriistaribade jaoks.
Firefox säilitab lehtede laadimise ajal vormikontrolli olekuid (puue ja kontrollitud olek) . Selle probleemi lahendamiseks on kasutada autocomplete="off"
. Vaadake Mozilla viga #654072 .
Lisa data-loading-text="Loading..."
, et kasutada nupul laadimisolekut.
See funktsioon on alates versioonist 3.3.5 aegunud ja versioonis 4 on see eemaldatud.
Selle demonstratsiooni huvides kasutame data-loading-text
ja $().button('loading')
, kuid see pole ainus olek, mida saate kasutada. Vaadake selle kohta lisateavet allpool olevast $().button(string)
dokumentatsioonist .
Lisa data-toggle="button"
, et aktiveerida ühe nupu sisselülitamine.
.active
jaaria-pressed="true"
Eellülitatud nuppude puhul peate lisama .active
klassi ja aria-pressed="true"
atribuudi button
iseendale.
Lisage data-toggle="buttons"
neid .btn-group
sisaldavasse märkeruutu või raadiosisendeid, et võimaldada nende vastavate stiilide vahetamist.
.active
Eelvalitud valikute puhul peate .active
klassi ise sisendisse lisama label
.
Kui märkeruudu nupu märgistatud olekut värskendatakse ilma nupul click
sündmust käivitamata (nt sisendi omaduse <input type="reset">
määramise kaudu või kaudu checked
), peate ise .active
sisendil klassi sisse label
lülitama.
$().button('toggle')
Lülitab tõukeoleku sisse. Annab nupule välimuse, nagu see oleks aktiveeritud.
$().button('reset')
Lähtestab nupu oleku – vahetab teksti algteksti vastu. See meetod on asünkroonne ja naaseb enne lähtestamise lõppu.
$().button(string)
Vahetab teksti mis tahes andmetega määratletud tekstiolekusse.
Paindlik pistikprogramm, mis kasutab lihtsaks ümberlülitamiseks käputäis klasse.
Ahendamine nõuab üleminekute pistikprogrammi kaasamist teie Bootstrapi versiooni.
Klassimuudatuste kaudu mõne muu elemendi kuvamiseks ja peitmiseks klõpsake allolevatel nuppudel:
.collapse
peidab sisu.collapsing
rakendatakse üleminekute ajal.collapse.in
näitab sisuVõite kasutada href
atribuudiga linki või atribuudiga nuppu data-target
. Mõlemal juhul data-toggle="collapse"
on nõutav.
Laiendage paneelikomponendiga akordioni loomiseks vaikekäitumist.
Samuti on võimalik s-i .panel-body
s -iga välja vahetada .list-group
.
Lisage kindlasti aria-expanded
juhtelement. See atribuut määrab selgelt kokkupandava elemendi praeguse oleku ekraanilugejate ja sarnaste abitehnoloogiate jaoks. Kui kokkupandav element on vaikimisi suletud, peaks selle väärtus olema aria-expanded="false"
. Kui olete määranud in
klassi kasutades kokkupandava elemendi vaikimisi avatuks, määrakearia-expanded="true"
selle asemel juhtelement. Pistikprogramm lülitab selle atribuudi automaatselt ümber, sõltuvalt sellest, kas kokkupandav element on avatud või suletud.
Lisaks, kui teie juhtelement sihib ühte ahendatavat elementi – st data-target
atribuut osutab valijale –, saate juhtelemendile id
lisada täiendava atribuudi, mis sisaldab ahendatavat elementi. Kaasaegsed ekraanilugejad ja sarnased abitehnoloogiad kasutavad seda atribuuti, et pakkuda kasutajatele täiendavaid otseteid, et navigeerida otse kokkupandava elemendi juurde.aria-controls
id
Ahendamise pistikprogramm kasutab raskuste tõstmiseks mõnda klassi:
.collapse
peidab sisu.collapse.in
näitab sisu.collapsing
lisatakse ülemineku alguses ja eemaldatakse, kui see lõpebNeed klassid on leitavad component-animations.less
.
Lihtsalt lisage elemendile data-toggle="collapse"
ja a data-target
, et määrata kokkupandava elemendi juhtimine automaatselt. Atribuut data-target
aktsepteerib ahendamise rakendamiseks CSS-i valijat. Kindlasti lisage klass collapse
kokkupandavale elemendile. Kui soovite, et see oleks vaikimisi avatud, lisage täiendav klass in
.
Akordionilaadse rühmahalduse lisamiseks kokkupandavale juhtelemendile lisage andmete atribuut data-parent="#selector"
. Selle tegevuse nägemiseks vaadake demo.
Luba käsitsi:
Valikud saab edastada andmeatribuutide või JavaScripti kaudu. Andmeatribuutide jaoks lisage valiku nimi data-
, nagu data-parent=""
.
Nimi | tüüp | vaikimisi | kirjeldus |
---|---|---|---|
lapsevanem | valija | vale | Kui valija on ette nähtud, suletakse selle kokkupandava üksuse kuvamisel kõik määratud vanema all olevad kokkupandavad elemendid. (sarnane traditsioonilise akordioni käitumisega - see sõltub panel klassist) |
lüliti | tõeväärtus | tõsi | Lülitab kutsumisel kokkupandava elemendi sisse |
.collapse(options)
Aktiveerib teie sisu kokkupandava elemendina. Aktsepteerib valikulisi valikuid object
.
.collapse('toggle')
Lülitab kokkupandava elemendi kuvatud või peidetud olekuks. Naaseb helistaja juurde enne, kui kokkupandav element on tegelikult näidatud või peidetud (st enne sündmuse shown.bs.collapse
või hidden.bs.collapse
toimumist).
.collapse('show')
Näitab kokkupandavat elementi. Naaseb helistaja juurde enne, kui kokkupandavat elementi on tegelikult näidatud (st enne shown.bs.collapse
sündmuse toimumist).
.collapse('hide')
Peidab kokkupandava elemendi. Naaseb helistaja juurde enne, kui kokkupandav element on tegelikult peidetud (st enne hidden.bs.collapse
sündmuse toimumist).
Bootstrapi ahendamisklass paljastab mõned sündmused, mis on seotud ahendamise funktsiooniga.
Sündmuse tüüp | Kirjeldus |
---|---|
show.bs.collapse | See sündmus käivitub kohe, kui show eksemplari meetod kutsutakse. |
näidatud.bs.kokkuvarisemine | See sündmus käivitatakse, kui ahendamise element on kasutajale nähtavaks tehtud (ootab, kuni CSS-i üleminekud on lõpule viidud). |
peida.bs.kokkuvarisemine | See sündmus käivitatakse kohe, kui hide meetod on välja kutsutud. |
peidetud.bs.kokkuvarisemine | See sündmus käivitatakse, kui ahendamise element on kasutaja eest peidetud (ootab, kuni CSS-i üleminekud on lõpule viidud). |
Slaidiseansi komponent elementide (nt karusselli) vahel liikumiseks. Pesastatud karusselle ei toetata.
Karusselli komponent ei vasta üldiselt juurdepääsetavuse standarditele. Kui peate järgima nõudeid, kaaluge oma sisu esitamiseks muid võimalusi.
Bootstrap kasutab oma animatsioonide jaoks ainult CSS3, kuid Internet Explorer 8 ja 9 ei toeta vajalikke CSS-i atribuute. Seega puuduvad nende brauserite kasutamisel slaidi ülemineku animatsioonid. Otsustasime tahtlikult mitte lisada üleminekutesse jQuery-põhiseid varuvariante.
Klass .active
tuleb lisada ühele slaidile. Vastasel juhul pole karusselli näha.
Klassid ja ei ole juhtelementide .glyphicon .glyphicon-chevron-left
jaoks .glyphicon .glyphicon-chevron-right
tingimata vajalikud. Bootstrap pakub .icon-prev
lihtsaid .icon-next
unicode-alternatiive.
Lisage oma slaididele hõlpsasti pealdisi .carousel-caption
elemendiga mis tahes .item
. Asetage sinna peaaegu kõik valikulised HTML-id ja see joondatakse ja vormindatakse automaatselt.
Karussellide õigeks toimimiseks on vaja kasutada id
kõige välimises anumas ( ). .carousel
Mitme karusselli lisamisel või karusselli muutmisel id
värskendage kindlasti asjakohaseid juhtelemente.
Kasutage karusselli asukoha hõlpsaks juhtimiseks andmeatribuute. data-slide
aktsepteerib märksõnu prev
või next
, mis muudab slaidi asukohta selle praeguse asukoha suhtes. Teise võimalusena kasutage data-slide-to
töötlemata slaidiindeksi edastamiseks karussellile data-slide-to="2"
, mis nihutab slaidi positsiooni konkreetsele registrile, mis algab tähega 0
.
Atribuuti data-ride="carousel"
kasutatakse karusselli märgistamiseks animeerivaks alates lehe laadimisest. Seda ei saa kasutada koos (liigse ja mittevajaliku) selgesõnalise JavaScripti lähtestamisega sama karusselli puhul.
Helistage karusselli käsitsi, kasutades:
Valikud saab edastada andmeatribuutide või JavaScripti kaudu. Andmeatribuutide jaoks lisage valiku nimi data-
, nagu data-interval=""
.
Nimi | tüüp | vaikimisi | kirjeldus |
---|---|---|---|
intervall | number | 5000 | Aeg, mis kulub üksuse automaatse tsükli vahel. Kui see on vale, ei käivitu karussell automaatselt. |
paus | string | null | "hõljuma" | Kui see on seatud "hover" , peatab karusselli mouseenter tsükli ja jätkab karusselli tsüklit mouseleave . Kui see on seatud null , ei peata karusselli kohal kursori hõljutamine seda. |
mähis | tõeväärtus | tõsi | Kas karussell peaks pidevalt tiirlema või peaks olema raskeid peatusi. |
klaviatuur | tõeväärtus | tõsi | Kas karussell peaks reageerima klaviatuurisündmustele. |
.carousel(options)
Lähtestab karusselli valikuliste valikutega object
ja hakkab üksuste vahel ringi liikuma.
.carousel('cycle')
Liigub läbi karusselli üksuste vasakult paremale.
.carousel('pause')
Peatab karusselli esemete vahel liikumise.
.carousel(number)
Liigutab karusselli konkreetse kaadri juurde (0-põhine, sarnane massiiviga).
.carousel('prev')
Liigub eelmise üksuse juurde.
.carousel('next')
Liigub järgmise üksuse juurde.
Bootstrapi karusselliklass paljastab kaks sündmust karusselli funktsioonidega liitumiseks.
Mõlemal sündmusel on järgmised lisaomadused:
direction
: suund, milles karussell libiseb (kas "left"
või "right"
).relatedTarget
: DOM-element, mis libistatakse aktiivse üksusena oma kohale.Kõik karussellisündmused käivitatakse karusselli enda (st <div class="carousel">
) suunas.
Sündmuse tüüp | Kirjeldus |
---|---|
slide.bs.carousell | See sündmus käivitub kohe, kui slide eksemplari meetod käivitatakse. |
liug.bs.karussell | See sündmus käivitatakse, kui karussell on slaidi ülemineku lõpetanud. |
Kinnituse pistikprogramm lülitub position: fixed;
sisse ja välja, emuleerides klahviga leitud efekti position: sticky;
. Parempoolne alamnavigeerimine on lisandmooduli reaalajas demo.
Kasutage liidete pistikprogrammi andmeatribuutide kaudu või käsitsi oma JavaScriptiga. Mõlemal juhul peate lisama lisatud sisu asukoha ja laiuse jaoks CSS-i.
Märkus. Ärge kasutage liitepluginat elemendi puhul, mis sisaldub suhteliselt paigutatud elemendis, näiteks tõmmatud või lükatud veerus.Märkus. Safari renderdusvea .
Kinnituse pistikprogramm lülitub kolme klassi vahel, millest igaüks esindab teatud olekut: .affix
, .affix-top
, ja .affix-bottom
. Peate esitama stiilid, välja arvatudposition: fixed;
.affix
Tegelike positsioonide haldamiseks peate nende klasside jaoks ise (sõltumata sellest pistikprogrammist) .
Kinnituse pistikprogramm töötab järgmiselt.
.affix-top
, mis näitab, et element on kõige ülemises positsioonis. Sel hetkel pole CSS-i positsioneerimist vaja..affix
asendab .affix-top
ja seabposition: fixed;
(pakkub Bootstrapi CSS)..affix
. .affix-bottom
Kuna nihked on valikulised, tuleb ühe määramiseks määrata sobiv CSS. Sel juhul lisage position: absolute;
vajadusel. Plugin kasutab andmeatribuuti või JavaScripti, et määrata, kuhu element sealt positsioneerida.Järgige ülaltoodud samme, et määrata oma CSS-i mõne alloleva kasutusvaliku jaoks.
Mis tahes elemendile afiksi käitumise hõlpsaks lisamiseks lisage lihtsalt data-spy="affix"
element, mida soovite luurata. Kasutage nihkeid, et määrata, millal elemendi kinnitamist sisse lülitada.
Kutsuge afiksi pistikprogrammi JavaScripti kaudu:
Valikud saab edastada andmeatribuutide või JavaScripti kaudu. Andmeatribuutide jaoks lisage valiku nimi data-
, nagu data-offset-top="200"
.
Nimi | tüüp | vaikimisi | kirjeldus |
---|---|---|---|
nihe | number | funktsioon | objektiks | 10 | Pikslid, mida kerimise asukoha arvutamisel ekraanist nihutada. Kui antakse üks number, rakendatakse nihet nii ülemises kui ka alumises suunas. Ainulaadsuse pakkumiseks sisestage alumine ja ülemine nihe lihtsalt objekt offset: { top: 10 } või offset: { top: 10, bottom: 5 } . Kasutage funktsiooni, kui peate nihke dünaamiliselt arvutama. |
sihtmärk | valija | sõlm | jQuery element | window objekti _ |
Määrab afiksi sihtelemendi. |
.affix(options)
Aktiveerib teie sisu lisatud sisuna. Aktsepteerib valikulisi valikuid object
.
.affix('checkPosition')
Arvutab ümber kinnituse oleku asjakohaste elementide mõõtmete, asukoha ja kerimisasendi põhjal. .affix
Klassid , .affix-top
ja klassid lisatakse .affix-bottom
lisatud sisule või eemaldatakse sellest vastavalt uuele olekule. Seda meetodit tuleb välja kutsuda alati, kui muudetakse kinnitatud sisu või sihtelemendi mõõtmeid, et tagada kinnitatud sisu õige paigutus.
Bootstrapi afiksi plugin paljastab mõned sündmused, mis on seotud kinnitusfunktsiooniga.
Sündmuse tüüp | Kirjeldus |
---|---|
affix.bs.affix | See sündmus käivitub vahetult enne elemendi kinnitamist. |
kinnitatud.bs.afiks | See sündmus käivitatakse pärast elemendi kinnitamist. |
affix-top.bs.affix | See sündmus käivitub vahetult enne elemendi ülaosa kinnitamist. |
affixed-top.bs.affix | See sündmus käivitatakse pärast elemendi ülaosa kinnitamist. |
affix-bottom.bs.affix | See sündmus käivitub vahetult enne, kui element on alla kinnitatud. |
affixed-bottom.bs.affix | See sündmus käivitatakse pärast seda, kui element on alla kinnitatud. |