JavaScript
Eman Bootstrap-en osagaiei bizia jQuery-ren dozena bat plugin pertsonalizaturekin. Sartu erraz guztiak, edo banan-banan.
Eman Bootstrap-en osagaiei bizia jQuery-ren dozena bat plugin pertsonalizaturekin. Sartu erraz guztiak, edo banan-banan.
Pluginak banan-banan sar daitezke (Bootstrap-en fitxategi indibidualak erabiliz *.js
), edo aldi berean ( bootstrap.js
edo minifikatua erabiliz bootstrap.min.js
).
Biak bootstrap.js
eta bootstrap.min.js
plugin guztiak fitxategi bakarrean dituzte. Sartu bakarra.
Plugin eta CSS osagai batzuk beste plugin batzuen araberakoak dira. Pluginak banan-banan sartzen badituzu, ziurtatu mendekotasun horiek egiaztatzea dokumentuetan. Kontuan izan, gainera, plugin guztiak jQueryren araberakoak direla (horrek esan nahi du jQuery plugin-fitxategien aurretik sartu behar dela). Kontsultatu gurebower.json
jQuery-ren zein bertsio onartzen diren ikusteko.
Bootstrap plugin guztiak erabil ditzakezu markatze APIaren bidez soilik JavaScript lerro bakar bat idatzi gabe. Hau Bootstrap-en lehen mailako APIa da eta zure lehen kontua izan beharko litzateke plugin bat erabiltzean.
Hori bai, zenbait egoeratan funtzionalitate hori desaktibatzea komenigarria izan daiteke. Hori dela eta, datu-atributuaren APIa desgaitzeko gaitasuna ere eskaintzen dugu , izenekin tartekatuta dagoen dokumentuko gertaera guztiak deslotuz data-api
. Honela dirudi:
Bestela, plugin zehatz bat bideratzeko, gehitu pluginaren izena izen-espazio gisa, datu-api izen-espazioarekin batera honela:
Ez erabili plugin anitzetako datu-atributuak elementu berean. Adibidez, botoi batek ezin du tresna-informaziorik izan eta modal bat aldatu. Horretarako, erabili biltzeko elementu bat.
Gainera, Bootstrap plugin guztiak JavaScript APIaren bidez soilik erabili ahal izango dituzula uste dugu. API publiko guztiak metodo bakarrak eta kateagarriak dira, eta egindako bilduma itzultzen dute.
Metodo guztiek aukerako aukera-objektu bat onartu beharko lukete, metodo jakin bati zuzendutako kate bat edo ezer ez (portaera lehenetsia duen plugin bat abiarazten duena):
Plugin bakoitzak bere eraikitzaile gordina ere erakusten du Constructor
propietate batean: $.fn.popover.Constructor
. Plugin-instantzia jakin bat lortu nahi baduzu, eskuratu zuzenean elementu batetik: $('[rel="popover"]').data('popover')
.
Plugin baten ezarpen lehenetsiak alda ditzakezu pluginaren Constructor.DEFAULTS
objektua aldatuz:
Batzuetan beharrezkoa da Bootstrap pluginak beste UI esparru batzuekin erabiltzea. Egoera horietan, noizean behin izen-espazioen talkak gerta daitezke. Hori gertatzen bada, .noConflict
balioa berreskuratu nahi duzun pluginera dei dezakezu.
Bootstrap-ek plugin gehienen ekintza berezietarako gertaera pertsonalizatuak eskaintzen ditu. Orokorrean, mugagabea eta iraganeko partizipio formakoak dira, non infinitiboa (adib. show
) gertaera baten hasieran abiarazten den eta bere iraganeko partizipioaren forma (adib. shown
) ekintza bat amaitzean abiarazten den.
3.0.0-tik aurrera, Bootstrap-eko gertaera guztiak izen-tartea daude.
Infinitiboko gertaera guztiek preventDefault
funtzionaltasuna ematen dute. Horrek ekintza baten exekuzioa hasi baino lehen gelditzeko gaitasuna ematen du.
VERSION
Bootstrap-en jQuery plugin bakoitzaren bertsioa pluginaren eraikitzailearen jabetzaren bidez sar daiteke . Adibidez, tooltip pluginerako:
Bootstrap-en pluginak ez dira bereziki dotoretasunez jaisten JavaScript desgaituta dagoenean. Kasu honetan erabiltzailearen esperientzia axola bazaizu, erabili <noscript>
egoera azaltzeko (eta JavaScript berriro nola gaitu) zure erabiltzaileei eta/edo gehitzeko zure ordezko pertsonalizatuak.
Bootstrap-ek ez ditu ofizialki onartzen Prototype edo jQuery UI bezalako hirugarrenen JavaScript liburutegiak . Gertaerak tartekatuta egon arren .noConflict
, zure kabuz konpondu behar dituzun bateragarritasun-arazoak egon daitezke.
Trantsizio efektu errazetarako, sartu transition.js
behin beste JS fitxategiekin batera. Konpilatua (edo txikitua) erabiltzen ari bazara bootstrap.js
, ez dago hau sartu beharrik; dagoeneko hor dago.
Transition.js gertaeren oinarrizko laguntzailea da transitionEnd
, baita CSS trantsizio emuladorea ere. Beste pluginek CSS trantsizio-laguntza egiaztatzeko eta zintzilik dauden trantsizioak harrapatzeko erabiltzen dute.
Trantsizioak orokorrean desgaitu daitezke JavaScript zati hau erabiliz, kargatu ondoren transition.js
(edo bootstrap.js
edo bootstrap.min.js
, hala badagokio) etorri behar duena:
Modalak errazak dira, baina malguak, elkarrizketa-abisuak behar diren gutxieneko funtzionaltasunekin eta lehenespen adimendunekin.
Ziurtatu ez duzula modal bat ireki beste bat oraindik ikusgai dagoen bitartean. Modal bat baino gehiago aldi berean erakusteak kode pertsonalizatua behar du.
Saiatu beti modal baten HTML kodea zure dokumentuan goi-mailako posizio batean jartzen, beste osagai batzuek modalaren itxurari edo/eta funtzionaltasunari eraginik ez diezaioten.
Gailu mugikorretan modalak erabiltzeari buruzko ohar batzuk daude. Ikusi gure arakatzailearen laguntza-dokumentuak xehetasunetarako.
HTML5-ek bere semantika definitzen duen moduan, autofocus
HTML atributuak ez du eraginik Bootstrap modaletan. Efektu bera lortzeko, erabili JavaScript pertsonalizatu batzuk:
Goiburua, gorputza eta oinean ekintza multzoa dituen errendatutako modal bat.
Aldatu modal bat JavaScript bidez, beheko botoian klik eginez. Behera lerratu eta orriaren goialdetik lausotuko da.
Ziurtatu eta gehitzen duzula role="dialog"
, aria-labelledby="..."
izenburu modalitateari erreferentzia eginez, to eta .modal
berari .role="document"
.modal-dialog
Gainera, zure elkarrizketa modalaren deskribapena eman dezakezu aria-describedby
aktibatuta .modal
.
YouTube-ko bideoak modaletan txertatzeak Bootstrap-en ez dagoen JavaScript gehigarria behar du erreprodukzioa automatikoki gelditzeko eta gehiago. Ikusi Stack Overflow argitalpen lagungarri hau informazio gehiago lortzeko.
Modalek aukerako bi tamaina dituzte, modifikatzaile klaseen bidez erabilgarri .modal-dialog
.
Ikusteko lausotu beharrean agertzen diren modaletarako, kendu .fade
klasea marka modaletik.
Bootstrap grid sistema modal baten barruan aprobetxatzeko, habia .row
s barruan .modal-body
eta erabili sareko sistema normal klaseak.
Modal bera abiarazten duten botoi mordoa al dituzu, eduki apur bat desberdinekin? Erabili event.relatedTarget
eta HTML data-*
atributuak (baliteke jQuery bidez ) modalaren edukia aldatzeko, klikatu den botoiaren arabera. Ikusi Modal Events dokumentuak buruzko xehetasunak lortzeko relatedTarget
,
Plugin modalak zure ezkutuko edukia aldatzen du eskaeraren arabera, datu-atributuen edo JavaScript bidez. Era berean, korritze-portaera lehenetsia gainidazteko gehitzen .modal-open
du eta klik-eremu bat sortzen du, erakutsitako modalak baztertzeko, modaletik kanpo sakatzean.<body>
.modal-backdrop
Aktibatu modal bat JavaScript idatzi gabe. Ezarri data-toggle="modal"
kontrolagailu-elementu batean, botoi batean adibidez, data-target="#foo"
edo href="#foo"
aktibatzeko modal zehatz bat bideratzeko.
Deitu id duen modal myModal
bat JavaScript lerro bakar batekin:
Aukerak datu-atributuen edo JavaScript bidez pasa daitezke. Datu-atributuetarako, erantsi aukera-izena data-
, hemen bezala data-backdrop=""
.
Izena | mota | lehenetsia | deskribapena |
---|---|---|---|
atzealdea | boolearra edo katea'static' |
egia | Atzeko plano-elementu modala dakar. Bestela, zehaztu static klik egitean modala ixten ez duen atzeko planoa. |
teklatua | boolearra | egia | Ihes tekla sakatzen denean modala ixten du |
erakutsi | boolearra | egia | Hasieratzen denean modala erakusten du. |
urrunekoa | bidea | faltsua | Aukera hau zaharkituta dago v3.3.0-tik eta v4-n kendu da. Horren ordez, bezeroaren aldeko txantiloiak edo datuak lotzeko esparru bat erabiltzea edo jQuery.load zeuk deitzea gomendatzen dugu. Urruneko URL bat ematen bada, edukia behin kargatuko da jQuery-ren metodoaren bidez eta div |
.modal(options)
Zure edukia modal gisa aktibatzen du. Aukerako aukerak onartzen ditu object
.
.modal('toggle')
Modal bat eskuz aldatzen du. Deitzaileari itzultzen zaio modala benetan erakutsi edo ezkutatu aurretik (hau da, shown.bs.modal
edo hidden.bs.modal
gertaera gertatu baino lehen).
.modal('show')
Eskuz modal bat irekitzen du. Deitzaileari itzultzen zaio modala benetan erakutsi aurretik (hau da, shown.bs.modal
gertaera gertatu baino lehen).
.modal('hide')
Eskuz ezkutatzen du modal bat. Deitzaileari itzultzen zaio modala benetan ezkutatu aurretik (hau da, hidden.bs.modal
gertaera gertatu baino lehen).
.modal('handleUpdate')
Modalaren kokapena berregokitzen du korritze-barra bati aurre egiteko, bat agertuko balitz, modalak ezkerrera salto egingo luke.
Zabalik dagoen bitartean modalaren altuera aldatzen denean bakarrik behar da.
Bootstrap-en klase modalak funtzionalitate modalean konektatzeko gertaera batzuk erakusten ditu.
Gertaera modal guztiak modalean bertan jaurtitzen dira (hau da, <div class="modal">
).
Gertaera mota | Deskribapena |
---|---|
ikuskizuna.bs.modala | Gertaera hau berehala abiarazten da show instantzia-metodoa deitzen denean. Klik batek eragindakoa bada, klikatutako elementua relatedTarget gertaeraren jabetza gisa erabilgarri dago. |
erakusten.bs.modala | Gertaera hau modua erabiltzailearentzat ikusgai jarri denean abiarazten da (CSS trantsizioak amaitu arte itxarongo da). Klik batek eragindakoa bada, klikatutako elementua relatedTarget gertaeraren jabetza gisa erabilgarri dago. |
ezkutatu.bs.modal | Gertaera hau berehala abiarazten da hide instantzia-metodoa deitzen denean. |
ezkutuan.bs.modal | Gertaera hau modua erabiltzaileari ezkutatzen amaitzen denean abiarazten da (CSS trantsizioak amaitu arte itxarongo da). |
kargatu.bs.modala | Gertaera hau abiarazten da modalak remote aukera erabiliz edukia kargatu duenean. |
Gehitu goitibeherako menuak plugin sinple honekin ia edozertara, nabigazio-barra, fitxak eta pilulak barne.
Datu-atributuen edo JavaScript-en bidez, goitibeherako pluginak ezkutuko edukia (goigabeko menuak) txandakatzen du .open
, gurasoen zerrendako elementuan klasea aldatuz.
Gailu mugikorretan, goitibeherako bat irekitzeak ukipen .dropdown-backdrop
-eremu gisa gehitzen du goitibeherako menuak ixteko menutik kanpo sakatzean, iOS-en laguntza egokia izateko baldintza bat. Horrek esan nahi du goitibeherako menu ireki batetik beste goitibeherako menu batera aldatzeko mugikorrean ukitu gehigarria behar dela.
Oharra: data-toggle="dropdown"
Atributua aplikazio mailan goitibeherako menuak ixteko oinarritzen da; beraz, komeni da beti erabiltzea.
Gehitu data-toggle="dropdown"
esteka edo botoi bati goitibeherako aukera aldatzeko.
URLak esteka-botoiekin osorik mantentzeko, erabili data-target
atributua href="#"
.
Deitu goitibehetara JavaScript bidez:
data-toggle="dropdown"
oraindik beharrezkoaGoitibehera JavaScript bidez deitzen duzun edo datu-api-a erabiltzen duzun ala ez, data-toggle="dropdown"
beti beharrezkoa da goitibeherako elementuaren abiarazlean egotea.
Bat ere ez
$().dropdown('toggle')
Nabigazio-barra edo fitxen nabigazio baten goitibeherako menua aldatzen du.
Goitibeherako gertaera guztiak .dropdown-menu
' ren elementu nagusian abiarazten dira.
Goitibeherako gertaera guztiek relatedTarget
propietate bat dute, zeinaren balioa txandakatzeko aingura-elementua da.
Gertaera mota | Deskribapena |
---|---|
show.bs.gopdown | Gertaera hau berehala abiarazten da show instance metodoa deitzen denean. |
erakusten.bs.goigabea | Gertaera hau goitibehitza erabiltzailearentzat ikusgai jartzen denean abiarazten da (CSS trantsizioen zain egongo da osatzeko). |
ezkutatu.bs.goigabea | Gertaera hau berehala abiarazten da ezkutatzeko instantzia metodoa deitzen denean. |
hidden.bs.gopdown | Gertaera hau goitibeherako zerrenda erabiltzaileari ezkutatzen amaitzen denean abiarazten da (CSS trantsizioen zain egongo da amaitzeko). |
ScrollSpy plugina nabigazio-helburuak automatikoki eguneratzeko da, korritze-posizioan oinarrituta. Joan nabigazio-barraren azpiko eremua eta ikusi klase aktiboaren aldaketa. Goitibeherako azpielementuak ere nabarmenduko dira.
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi qui agortu aurretik. Tumblr baserritik mahairako bizikletaren eskubideak edozer. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby jertsea lomo jean galtza motzak, williamsburg hoodie gutxi batzuk ziurrenik ez duzu horien berri eta cardigan trust fund culpa biodiesel wes anderson estetika. Nihil tatuatu akusamus, kred ironia biodiesel keffiyeh artisau ullamco consequat.
Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork bizar. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat lau loko nisi, ea helvetica nulla carles. Cosby jertse tatuatua food truck, mcsweeney-ren quis non freegan biniloa. Lo-fi wes anderson +1 sartoriala. Carles ez ariketa estetikoa quis gentrify. Brooklyn adipisicing artisau garagardo vice keytar deserunt.
Occaecat commodo aliqua delectus. Fap artisau garagardo deserunt skateboard ea. Lomo bizikleta eskubideak adipisicing banh mi, belit ea dira hurrengo maila lokalizatu jatorri bakarreko kafea magna veniam. High life id biniloa, echo park consequat quis aliquip banh mi pitchfork. Vero VHS adipisicing da. Consectetur nisi DIY gutxieneko mezulari poltsa. Sinetsita dago, iphone-ko fanny-pack bateratu iraunkorra.
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 bloga, culpa messenger poltsa marfa edozein dela ere delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica topiko ironia, thundercats ziurrenik ez duzu horien berri entzun hoodie glutenik gabeko lo-fi fap aliquip. Lan egin agortu baino lehen, Terry Richardson-ek hamaiketakoa egin behar izan zuen, eta kosby jertsea, bestela, artisau helvetikoa. Cardigan artisau garagardoa seitan readymade belit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.
Nabbar-en estekek id-helburu konpongarriak izan behar dituzte. Adibidez, <a href="#home">home</a>
behar bat DOM bezalako zerbaiti dagokio <div id="home"></div>
.
:visible
diren elementuak baztertu dira:visible
jQuery-ren araberakoak ez diren xede-elementuak ez dira aintzat hartuko eta dagozkien nabigazio-elementuak ez dira inoiz nabarmenduko.
position: relative;
Ez dio axola inplementazio-metodoa, scrollspy -k zelatatzen ari zaren elementua erabiltzea eskatzen du . Kasu gehienetan hau da <body>
. Scrollspying-a ez den elementuetan <body>
, ziurtatu height
multzo bat duzula eta overflow-y: scroll;
aplikatuta.
Scrollspy portaera zure goiko barrako nabigazioan erraz gehitzeko, gehitu data-spy="scroll"
espioi nahi duzun elementuari (normalean hau izango litzateke <body>
). Ondoren, gehitu atributua Bootstrap-eko edozein osagairen data-target
elementu nagusiaren ID edo klasearekin ..nav
Zure CSS gehitu ondoren position: relative;
, deitu scrollspy JavaScript bidez:
.scrollspy('refresh')
Scrollspy DOMetik elementuak gehitzearekin edo kentzearekin batera erabiltzean, freskatzeko metodora deitu beharko duzu honela:
Aukerak datu-atributuen edo JavaScript bidez pasa daitezke. Datu-atributuetarako, erantsi aukera-izena data-
, hemen bezala data-offset=""
.
Izena | mota | lehenetsia | deskribapena |
---|---|---|---|
desplazamendu | zenbakia | 10 | Goitik desplazatzeko pixelak korrituaren posizioa kalkulatzean. |
Gertaera mota | Deskribapena |
---|---|
aktibatu.bs.scrollspy | Gertaera hau scrollspy-k elementu berri bat aktibatzen duen bakoitzean abiarazten da. |
Gehitu fitxaren funtzionalitate azkarra eta dinamikoa tokiko edukiaren paneletatik igarotzeko, baita goitibeherako menuen bidez ere. Ez dira habiaratutako fitxak onartzen.
Denim gordina ziurrenik ez duzu Austin galtza motzak entzun. Nesciunt tofu stumptown aliqua, retro synth master garbiketa. Bibote klixe denbora, williamsburg carles vegan helvetica. Rerehenderit harakina retro keffiyeh dreamcatcher sintetizadorea. Cosby jertse eu banh mi, qui irure terry richardson ex squid. Jarri salvia cillum iphone. Seitan aliquip quis cardigan american apparel, harakina 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.
Plugin honek fitxadun nabigazio-osagaia hedatzen du tabulazio-eremuak gehitzeko.
Gaitu tabulatzeko fitxak JavaScript bidez (fitxa bakoitza banan-banan aktibatu behar da):
Banakako fitxak hainbat modutara aktibatu ditzakezu:
Fitxa edo pilulen nabigazioa aktiba dezakezu JavaScript idatzi gabe data-toggle="tab"
edo data-toggle="pill"
elementu batean zehaztuta. nav
eta nav-tabs
klaseak fitxara gehitzeak Bootstrap fitxaren estiloaul
aplikatuko du , eta eta klaseak gehitzeak pilula estiloa aplikatuko du .nav
nav-pills
Fitxak desagertzeko, gehitu .fade
bakoitzari .tab-pane
. Lehen fitxa-panelak .in
hasierako edukia ikusgai jarri behar du.
$().tab
Fitxa-elementu eta eduki-edukiontzi bat aktibatzen du. Tabulak DOM-eko edukiontzi-nodo bat izan behar data-target
du href
. Goiko adibideetan, fitxak atributuak <a>
dituzten s-ak dira.data-toggle="tab"
.tab('show')
Emandako fitxa hautatzen du eta hari lotutako edukia erakusten du. Aurretik hautatutako beste edozein fitxa hautatu gabe geratzen da eta hari lotutako edukia ezkutatu egiten da. Deitzen duenari itzultzen zaio fitxa-panela benetan erakutsi aurretik (hau da, shown.bs.tab
gertaera gertatu baino lehen).
Fitxa berri bat erakustean, gertaerak ordena honetan piztuko dira:
hide.bs.tab
(uneko fitxa aktiboan)show.bs.tab
(Erakutsi beharreko fitxan)hidden.bs.tab
(aurreko fitxa aktiboan, ekitaldiaren berdina hide.bs.tab
)shown.bs.tab
(Aktibatu berri den fitxan, ekitaldiaren berdina show.bs.tab
)Fitxarik ez bazegoen aktibo, orduan hide.bs.tab
eta hidden.bs.tab
gertaerak ez dira abiaraziko.
Gertaera mota | Deskribapena |
---|---|
erakutsi.bs.tab | Gertaera hau fitxen erakustaldian abiarazten da, baina fitxa berria erakutsi aurretik. Erabili event.target eta event.relatedTarget fitxa aktibora eta aurreko fitxa aktibora bideratzeko (eskuragarri badago), hurrenez hurren. |
erakusten.bs.tab | Gertaera hau fitxen erakustaldian abiarazten da fitxa bat erakutsi ondoren. Erabili event.target eta event.relatedTarget fitxa aktibora eta aurreko fitxa aktibora bideratzeko (eskuragarri badago), hurrenez hurren. |
ezkutatu.bs.tab | Gertaera hau fitxa berri bat erakutsi nahi denean abiarazten da (eta, beraz, aurreko fitxa aktiboa ezkutatu behar da). Erabili event.target eta event.relatedTarget uneko fitxa aktibora eta laster aktibo egongo den fitxa berria bideratzeko, hurrenez hurren. |
ezkutuko.bs.tab | Gertaera hau fitxa berri bat erakutsi ondoren abiarazten da (eta, beraz, aurreko fitxa aktiboa ezkutatu egiten da). Erabili event.target eta event.relatedTarget aurreko fitxa aktibora eta fitxa aktibo berria bideratzeko, hurrenez hurren. |
Jason Frame-k idatzitako jQuery.tipsy plugin bikainean inspiratuta; Tresna-aholkuak bertsio eguneratu bat dira, irudietan oinarritzen ez direnak, CSS3 animazioetarako eta datu-atributuak tokiko izenburuak biltegiratzeko.
Luzera zeroko tituluak dituzten tresna-aholkuak ez dira inoiz bistaratzen.
Pasatu ondoko esteken gainean tresna-aholkuak ikusteko:
Praka estuak hurrengo mailan keffiyeh ziurrenik ez duzu horien berri. Photo booth beard raw denim letterpress vegan messenger poltsa stumptown. Baserritik mahairako seitan, mcsweeney's fixie sustainable quinoa 8 bit American Apparel- ek terry richardson binilozko chambray dute. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesela williamsburg marfa, lau loko mcsweeney's cleanse vegan chambray. Artisau benetan ironikoa edozein dela ere keytar , scenester farm-to-table banksy Austin twitter handle freegan cred raw denim jatorri bakarreko kafe birala.
Lau aukera daude eskuragarri: goiko, eskuineko, beheko eta ezkerreko lerrokatuta.
Errendimendu-arrazoiak direla eta, Tooltip eta Popover datu-apiak aukera ematen dute, hau da, zuk zeuk hasieratu behar dituzu .
Orrialde bateko tresna-aholku guztiak hasieratzeko modu bat haien data-toggle
atributuaren arabera hautatzea izango litzateke:
Tooltip pluginak edukia eta markak sortzen ditu eskaeraren arabera, eta, modu lehenetsian, tresna-aholkuak jartzen ditu abiarazte-elementuaren ondoren.
Aktibatu tresna-informazioa JavaScript bidez:
Tresna-informazio baterako beharrezkoa den marka data
atributu bat baino ez da eta title
tresna-aholkua izan nahi duzun HTML elementuan. Tresna-informazio baten markaketa sinple samarra da, nahiz eta posizio bat behar duen (lehenespenez, top
pluginak ezarrita).
Batzuetan, lerro bat baino gehiago biltzen dituen hiperesteka bati tresna-informazioa gehitu nahi zaio. Tooltip pluginaren portaera lehenetsia horizontalean eta bertikalean zentratzea da. Gehitu white-space: nowrap;
zure ainguretara hori ekiditeko.
.btn-group
A edo baten barruan dauden elementuei buruzko argibideak erabiltzean .input-group
, edo taularekin erlazionatutako elementuetan ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, <tfoot>
), aukera zehaztu beharko duzu container: 'body'
(behean dokumentatua) nahi ez diren albo-ondorioak saihesteko (adibidez, elementua gero eta zabalagoa izatea eta/. edo bere ertz biribilduak galtzea tresna-abiarazpena abiarazten denean).
Teklatu batekin nabigatzen ari diren erabiltzaileentzat, eta, bereziki, laguntza-teknologien erabiltzaileentzat, teklatuan bideratu daitezkeen elementuei tresna-aholkuak soilik gehitu behar dizkiezu, hala nola, estekak, inprimaki-kontrolak edo tabindex="0"
atributu bat duen edozein elementu arbitrario.
disabled
A edo elementuari tresna-aholkua gehitzeko .disabled
, jarri elementua a-ren barruan <div>
eta aplikatu horren <div>
ordez.
Aukerak datu-atributuen edo JavaScript bidez pasa daitezke. Datu-atributuetarako, erantsi aukera-izena data-
, hemen bezala data-animation=""
.
Izena | Mota | Lehenetsia | Deskribapena |
---|---|---|---|
animazioa | boolearra | egia | Aplikatu CSS desagertze-trantsizioa tresna-informazioari |
edukiontzia | katea | faltsua | faltsua | Elementu zehatz bati eransten dio tresna-informazioa. Adibidea |
atzerapena | zenbakia | objektua | 0 | Atzeratu tresna-informazioa erakustea eta ezkutatzea (ms) - ez dagokio eskuzko abiarazle motari Zenbaki bat ematen bada, atzerapena aplikatuko da ezkutatzeko/erakusteko Objektuaren egitura hau da: |
html | boolearra | faltsua | Txertatu HTML tresna-informazioan. Faltsua bada, jQuery-ren text metodoa erabiliko da edukia DOMean txertatzeko. Erabili testua XSS erasoekin kezkatuta bazaude. |
Kokapen | katea | funtzioa | 'goian' | Nola kokatu tresna-informazioa - goian | behea | ezkerra | eskuina | autoa. Funtzio bat kokapena zehazteko erabiltzen denean, tresna-informazioa DOM nodoa deitzen zaio lehen argumentu gisa eta abiarazte elementua DOM nodoa bigarren gisa. |
hautatzailea | katea | faltsua | Hautatzailea ematen bada, tresna-informazioko objektuak zehaztutako helburuetara delegatuko dira. Praktikan, HTML eduki dinamikoa tresna-aholkuak gehitzeko gaitzeko erabiltzen da. Ikusi hau eta informazio-adibide bat . |
txantiloia | katea | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
Oinarrizko HTML tresna-informazioa sortzean erabiltzeko. Tresna-
Kanpoko bilgarri-elementuak |
Izenburua | katea | funtzioa | '' | Izenburuaren balio lehenetsia
|
trigger | katea | 'pasatzean fokua' | Nola abiarazten den tresna-informazioa - egin klik | pasatzea | fokua | eskuliburua. Hainbat abiarazle pasa ditzakezu; bereiz itzazu tarte batekin. manual ezin da beste edozein eragilerekin konbinatu. |
ikusmira | katea | objektua | funtzioa | { hautatzailea: 'gorputza', betegarria: 0} | Elementu honen mugen barruan mantentzen du tresna-informazioa. Adibidea: Funtzio bat ematen bada, abiarazte elementua DOM nodoa argumentu bakarra dela deitzen zaio. |
Banakako argibideetarako aukerak bestela datu-atributuak erabiliz zehaztu daitezke, goian azaldu bezala.
$().tooltip(options)
Elementu bilduma bati tresna-informazio-kudeatzailea eransten dio.
.tooltip('show')
Elementu baten argibidea erakusten du. Deitzaileari itzultzen zaio tresna-informazioa benetan erakutsi aurretik (hau da, shown.bs.tooltip
gertaera gertatu baino lehen). Hau tresna-informazioaren "eskuz" abiaraztekotzat hartzen da. Luzera zeroko tituluak dituzten tresna-aholkuak ez dira inoiz bistaratzen.
.tooltip('hide')
Elementu baten argibidea ezkutatzen du. Deitzen duenari itzultzen zaio tresna-informazioa benetan ezkutatu baino lehen (hau da, hidden.bs.tooltip
gertaera gertatu baino lehen). Hau tresna-informazioaren "eskuz" abiaraztekotzat hartzen da.
.tooltip('toggle')
Elementu baten tresna-informazioa aktibatzen du. Deitzaileari itzultzen zaio tresna-informazioa benetan erakutsi edo ezkutatu aurretik (hau da, shown.bs.tooltip
edo hidden.bs.tooltip
gertaera gertatu baino lehen). Hau tresna-informazioaren "eskuz" abiaraztekotzat hartzen da.
.tooltip('destroy')
Elementu baten informazioa ezkutatu eta suntsitzen du. Ordezkapena erabiltzen duten tresna- informazioak ( selector
aukera erabiliz sortzen direnak ) ezin dira banan-banan suntsitu ondorengo abiarazle-elementuetan.
Gertaera mota | Deskribapena |
---|---|
erakutsi.bs.tresna-informazioa | Gertaera hau berehala abiarazten da show instantzia-metodoa deitzen denean. |
erakusten.bs.tresna-informazioa | Gertaera hau tresna-informazioa erabiltzailearentzat ikusgai jartzen denean abiarazten da (CSS trantsizioak amaitu arte itxarongo da). |
ezkutatu.bs.tooltip | Gertaera hau berehala abiarazten da hide instantzia-metodoa deitzen denean. |
ezkutuko.bs.tooltip | Gertaera hau tresna-informazioa erabiltzaileari ezkutatzen amaitzen denean abiarazten da (CSS trantsizioak amaitu arte itxarongo da). |
txertatua.bs.tresna-informazioa | Gertaera hau gertaeraren ondoren abiarazten da tresna- show.bs.tooltip informazio txantiloia DOM-era gehitu denean. |
Gehitu edukiaren gainjartze txikiak, iPad-en bezalakoak, bigarren mailako informazioa gordetzeko edozein elementuri.
Izenburua eta edukia zero-luzera duten popover-ak ez dira inoiz bistaratzen.
Popover-ek tresna-informaziorako plugina zure Bootstrap bertsioan sartzea eskatzen du.
Errendimendu-arrazoiak direla eta, Tooltip eta Popover datu-apiak aukera ematen dute, hau da, zuk zeuk hasieratu behar dituzu .
Orrialde bateko popover guztiak hasieratzeko modu bat haien data-toggle
atributuaren arabera hautatzea izango litzateke:
.btn-group
A edo baten barruan dauden elementuetan popover-ak erabiltzean .input-group
, edo taularekin erlazionatutako elementuetan ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, <tfoot>
), aukera zehaztu beharko duzu container: 'body'
(behean dokumentatua) nahi ez diren albo-ondorioak saihesteko (adibidez, elementua gero eta zabalagoa izatea eta/. edo bere ertz biribilduak galtzea popover-a abiarazten denean).
disabled
A edo elementuari popover bat gehitzeko .disabled
, jarri elementua a-ren barruan <div>
eta aplikatu horren <div>
ordez popover-a.
Batzuetan, lerro bat baino gehiago biltzen dituen hiperesteka bati popover bat gehitu nahi zaio. Popover pluginaren portaera lehenetsia horizontalean eta bertikalean zentratzea da. Gehitu white-space: nowrap;
zure ainguretara hori ekiditeko.
Lau aukera daude eskuragarri: goiko, eskuineko, beheko eta ezkerreko lerrokatuta.
Sed posuere consectetur at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Erabili focus
abiarazlea erabiltzaileak egiten duen hurrengo klikean popover-ak baztertzeko.
Arakatzaile eta plataforma anitzeko portaera egokia izateko, <a>
etiketa erabili behar duzu, ez etiketa , eta eta atributuak <button>
ere sartu behar dituzu .role="button"
tabindex
Gaitu popover-ak JavaScript bidez:
Aukerak datu-atributuen edo JavaScript bidez pasa daitezke. Datu-atributuetarako, erantsi aukera-izena data-
, hemen bezala data-animation=""
.
Izena | Mota | Lehenetsia | Deskribapena |
---|---|---|---|
animazioa | boolearra | egia | Aplikatu CSS desagertzeko trantsizioa popover-ean |
edukiontzia | katea | faltsua | faltsua | Popover-a elementu zehatz bati eransten dio. Adibidea |
edukia | katea | funtzioa | '' | Edukiaren balio lehenetsia
|
atzerapena | zenbakia | objektua | 0 | Atzeratu popover-a erakusteko eta ezkutatzeko (ms) - ez dagokio eskuzko abiarazle motari Zenbaki bat ematen bada, atzerapena aplikatuko da ezkutatzeko/erakusteko Objektuaren egitura hau da: |
html | boolearra | faltsua | Sartu HTML popover-ean. Faltsua bada, jQuery-ren text metodoa erabiliko da edukia DOMean txertatzeko. Erabili testua XSS erasoekin kezkatuta bazaude. |
Kokapen | katea | funtzioa | 'zuzen' | Popover-a nola kokatu - goiko | behea | ezkerra | eskuina | autoa. Funtzio bat kokapena zehazteko erabiltzen denean, popover DOM nodoa lehen argumentu gisa deitzen da eta abiarazte elementua DOM nodoa bigarren gisa. |
hautatzailea | katea | faltsua | Hautatzaile bat ematen bada, popover objektuak zehaztutako helburuetara delegatuko dira. Praktikan, HTML eduki dinamikoa gaitzeko erabiltzen da popovers gehitzeko. Ikusi hau eta informazio-adibide bat . |
txantiloia | katea | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' |
Oinarrizko HTML popover-a sortzerakoan erabiltzeko. Popover- Popover-
Kanpoko bilgarri-elementuak |
Izenburua | katea | funtzioa | '' | Izenburuaren balio lehenetsia
|
trigger | katea | 'klik' | Popover nola abiarazten den - egin klik | pasatzea | fokua | eskuliburua. Hainbat abiarazle pasa ditzakezu; bereiz itzazu tarte batekin. manual ezin da beste edozein eragilerekin konbinatu. |
ikusmira | katea | objektua | funtzioa | { hautatzailea: 'gorputza', betegarria: 0} | Popover-a elementu honen mugen barruan mantentzen du. Adibidea: Funtzio bat ematen bada, abiarazte elementua DOM nodoa argumentu bakarra dela deitzen zaio. |
Popover indibidualetarako aukerak bestela datu-atributuak erabiliz zehaztu daitezke, goian azaldu bezala.
$().popover(options)
Elementu bilduma baterako popover-ak hasieratzen ditu.
.popover('show')
Elementu baten popover-a agerian uzten du. Deitzen duenari itzultzen zaio popover-a benetan erakutsi aurretik (hau da, shown.bs.popover
gertaera gertatu baino lehen). Hau popover-aren "eskuz" abiaraztekotzat hartzen da. Izenburua eta edukia zero-luzera duten popover-ak ez dira inoiz bistaratzen.
.popover('hide')
Elementu baten popover-a ezkutatzen du. Deitzen duenari itzultzen zaio popover-a benetan ezkutatu aurretik (hau da, hidden.bs.popover
gertaera gertatu baino lehen). Hau popover-aren "eskuz" abiaraztekotzat hartzen da.
.popover('toggle')
Elementu baten popover-a aktibatzen du. Deitzen duenari itzultzen zaio popover-a benetan erakutsi edo ezkutatu aurretik (hau da, shown.bs.popover
edo hidden.bs.popover
gertaera gertatu baino lehen). Hau popover-aren "eskuz" abiaraztekotzat hartzen da.
.popover('destroy')
Elementu baten popover-a ezkutatu eta suntsitzen du. Delegazioa erabiltzen duten popover-ak (aukera erabiliz sortzen direnak ) selector
ezin dira banan-banan suntsitu ondorengo abiarazle-elementuetan.
Gertaera mota | Deskribapena |
---|---|
show.bs.popover | Gertaera hau berehala abiarazten da show instantzia-metodoa deitzen denean. |
erakutsi.bs.popover | Gertaera hau abiarazten da popover-a erabiltzailearentzat ikusgai jartzen denean (CSS trantsizioak amaitu arte itxarongo da). |
ezkutatu.bs.popover | Gertaera hau berehala abiarazten da hide instantzia-metodoa deitzen denean. |
ezkutuko.bs.popover | Gertaera hau abiarazten da popover-a erabiltzaileari ezkutatzen amaitzen denean (CSS trantsizioak amaitu arte itxarongo da). |
txertatuta.bs.popover | Gertaera hau gertaeraren ondoren show.bs.popover abiarazten da popover txantiloia DOM-era gehitu denean. |
Gehitu baztertzeko funtzionaltasuna plugin honekin alerta-mezu guztiei.
Botoi bat erabiltzean .close
, honen lehen seme-alaba izan behar du .alert-dismissible
eta ezin izango da testu-edukirik agertu aurretik markatzean.
Aldatu hau eta bestea eta saiatu berriro. Duis mollis, ez da komodoa luctus, ez da ligula garraiatzen, eta lacinia odio ez da elit. Cras mattis consectetur purus eseri amet fermentum.
Gehitu data-dismiss="alert"
ixteko botoia automatikoki alerta ixteko funtzionaltasuna emateko. Alerta bat ixteak DOMetik kentzen du.
Zure alertak animazioa erabil dezaten ixtean, ziurtatu .fade
eta .in
klaseak dagoeneko aplikatuta dituztela.
$().alert()
data-dismiss="alert"
Atributua duten ondorengo elementuetan klik-gertaerak entzuten dituen alerta bat egiten du . (Ez da beharrezkoa data-api-ren hasierako automatikoki erabiltzean.)
$().alert('close')
Alerta bat ixten du DOMetik kenduta. Elementuan .fade
eta .in
klaseak badaude, alerta desagertuko da kendu aurretik.
Bootstrap-en alerta-pluginak gertaera batzuk erakusten ditu alerta-funtzionalitatean konektatzeko.
Gertaera mota | Deskribapena |
---|---|
itxi.bs.alerta | Gertaera hau berehala abiarazten da close instantzia-metodoa deitzen denean. |
itxita.bs.alerta | Gertaera hau alerta itxi denean abiarazten da (CSS trantsizioak amaitu arte itxarongo da). |
Egin gehiago botoiekin. Kontrolatu botoien egoerak edo sortu botoi-taldeak tresna-barrak bezalako osagai gehiagotarako.
Firefoxek inprimakien kontrol-egoerak jarraitzen ditu (desgaitasuna eta egiaztapena) orrialdeen karga guztietan . Honetarako konponbidea erabiltzea da autocomplete="off"
. Ikusi Mozilla akatsa #654072 .
Gehitu data-loading-text="Loading..."
botoi batean kargatzeko egoera erabiltzeko.
Ezaugarri hau zaharkituta dago v3.3.5etik eta v4an kendu da.
Erakusketa honen mesedetan, data-loading-text
eta erabiltzen ari gara $().button('loading')
, baina hori ez da erabil dezakezun egoera bakarra. Ikusi honi buruzko informazio gehiago behean $().button(string)
dokumentazioan .
Gehitu data-toggle="button"
botoi bakarrean txandakatzea aktibatzeko.
.active
etaaria-pressed="true"
Aurrez txandakaturiko botoietarako, .active
klasea eta aria-pressed="true"
atributua button
zeure buruari gehitu behar dizkiozu.
Gehitu kontrol data-toggle="buttons"
- .btn-group
laukia edo irrati-sarrerak dagozkien estiloetan aldatzeko gaitzeko.
.active
Aurrez hautatutako aukeretarako, .active
klasea zuk zeuk gehitu behar diozu sarrerari label
.
Markagailu-laukiaren botoi baten egoera markatutako egoera botoian click
gertaerarik piztu gabe eguneratzen bada (adibidez , sarreraren propietatea <input type="reset">
ezarriz edo bidez ), klasea zuk zeuk sartu beharko duzu.checked
.active
label
$().button('toggle')
Bultza-egoera aktibatzen du. Botoiari aktibatuta dagoen itxura ematen dio.
$().button('reset')
Botoiaren egoera berrezartzen du - testua jatorrizko testuarekin aldatzen du. Metodo hau asinkronoa da eta berrezarpena benetan amaitu baino lehen itzultzen da.
$().button(string)
Testua definitutako edozein testu-egoerara aldatzen du.
Plugin malgua, klase gutxi batzuk erabiltzen dituena aldatzeko portaera errazetarako.
Tolestu behar da trantsizioen plugina zure Bootstrap-en bertsioan sartzea.
Egin klik beheko botoietan klase aldaketen bidez beste elementu bat erakusteko eta ezkutatzeko:
.collapse
edukia ezkutatzen du.collapsing
trantsizioetan aplikatzen da.collapse.in
edukia erakusten duAtributua duen esteka bat erabil dezakezu href
, edo atributua duen botoi bat data-target
. Bi kasuetan, data-toggle="collapse"
beharrezkoa da.
Hedatu tolestearen portaera lehenetsia paneleko osagaiarekin akordeoia sortzeko.
.panel-body
s s-rekin trukatzea ere posible da .list-group
.
Ziurtatu aria-expanded
kontrol-elementuari gehitzea. Atributu honek esplizituki definitzen du tolesgarri den elementuaren egungo egoera pantaila-irakurleentzat eta antzeko laguntza-teknologientzat. Elementu tolesgarria lehenespenez itxita badago, balio izan beharko luke aria-expanded="false"
. Elementu tolesgarria lehenespenez irekita egon dadin ezarri baduzu in
klasea erabiliz, ezarri aria-expanded="true"
kontrolaren ordez. Pluginak atributu hau automatikoki aldatuko du tolesgarria den elementua ireki edo itxi den kontuan hartuta.
Gainera, zure kontrol-elementuak elementu tolesgarri bakar batera bideratzen badu (hau da, data-target
atributuak id
hautatzaile batera seinalatzen badu), atributu gehigarri bat gehi diezaiokezu aria-controls
kontrol-elementuari, id
elementu tolesgarriaren aldea duena. Pantaila-irakurle modernoek eta antzeko laguntza-teknologiek atributu hau erabiltzen dute erabiltzaileei lasterbide osagarriak eskaintzeko, elementu tolesgarrira zuzenean nabigatzeko.
Tolestu pluginak klase batzuk erabiltzen ditu astunak kudeatzeko:
.collapse
edukia ezkutatzen du.collapse.in
edukia erakusten du.collapsing
trantsizioa hasten denean gehitzen da, eta amaitzean kentzen daKlase hauek atalean aurki daitezke component-animations.less
.
Gehitu data-toggle="collapse"
eta a data-target
elementuari elementu tolesgarri baten kontrola automatikoki esleitzeko. Atributuak CSS hautatzaile bat onartzen du data-target
kolapsoa aplikatzeko. Ziurtatu klasea gehitzen duzula collapse
elementu tolesgarrian. Lehenetsita irekitzea nahi baduzu, gehitu klase gehigarria in
.
Akordeoi antzeko taldeen kudeaketa kontrol tolesgarri bati gehitzeko, gehitu datu-atributua data-parent="#selector"
. Ikusi demoa hau martxan ikusteko.
Gaitu eskuz honekin:
Aukerak datu-atributuen edo JavaScript bidez pasa daitezke. Datu-atributuetarako, erantsi aukera-izena data-
, hemen bezala data-parent=""
.
Izena | mota | lehenetsia | deskribapena |
---|---|---|---|
gurasoa | hautatzailea | faltsua | Hautatzailea ematen bada, zehaztutako gurasoaren azpian dauden elementu tolesgarri guztiak itxiko dira elementu tolesgarri hau erakusten denean. (akordeoiaren portaera tradizionalaren antzekoa - hau panel klasearen araberakoa da) |
txandakatu | boolearra | egia | Elementu tolesgarria aktibatzen du deitzean |
.collapse(options)
Zure edukia elementu tolesgarri gisa aktibatzen du. Aukerako aukerak onartzen ditu object
.
.collapse('toggle')
Elementu tolesgarri bat bistaratzen edo ezkutuan jartzen du. Deitzen duenari itzultzen zaio elementu tolesgarria benetan erakutsi edo ezkutatu aurretik (hau da, shown.bs.collapse
edo hidden.bs.collapse
gertaera gertatu baino lehen).
.collapse('show')
Elementu tolesgarria erakusten du. Deitzen duenari itzultzen zaio elementu tolesgarria benetan erakutsi aurretik (hau da, shown.bs.collapse
gertaera gertatu baino lehen).
.collapse('hide')
Elementu tolesgarri bat ezkutatzen du. Deitzen duenari itzultzen zaio elementu tolesgarria benetan ezkutatu aurretik (hau da, hidden.bs.collapse
gertaera gertatu baino lehen).
Bootstrap-en kolapso-klaseak kolapso-funtzionalitatean konektatzeko gertaera batzuk erakusten ditu.
Gertaera mota | Deskribapena |
---|---|
erakutsi.bs.kolapsoa | Gertaera hau berehala abiarazten da show instantzia-metodoa deitzen denean. |
erakutsi.bs.kolapsoa | Gertaera hau tolesteko elementu bat erabiltzailearentzat ikusgai jartzen denean abiarazten da (CSS trantsizioak amaitu arte itxarongo da). |
ezkutatu.bs.kolapsoa | Gertaera hau berehala abiarazten da hide metodoa deitzen denean. |
ezkutuan.bs.kolapsoa | Gertaera hau tolesteko elementu bat erabiltzaileari ezkutatu zaionean abiarazten da (CSS trantsizioak amaitu arte itxarongo da). |
Elementuetan zehar bizikletaz ibiltzeko diapositiba-aurkezpenaren osagaia, karrusel bat bezala. Ez dira habiaratutako karruselak onartzen.
Karruselaren osagaiak, oro har, ez ditu irisgarritasun estandarrak betetzen. Konforme egon behar baduzu, kontuan hartu beste aukera batzuk zure edukia aurkezteko.
Bootstrap-ek CSS3 bakarrik erabiltzen du bere animazioetarako, baina Internet Explorer 8 eta 9-k ez ditu beharrezko CSS propietateak onartzen. Beraz, ez dago diapositiba-trantsizio animaziorik arakatzaile hauek erabiltzean. Nahita erabaki dugu trantsizioetarako jQuery-n oinarritutako babesik ez sartzea.
.active
Klasea diapositiba batean gehitu behar da . Bestela, karrusela ez da ikusgai egongo.
Eta klaseak .glyphicon .glyphicon-chevron-left
ez .glyphicon .glyphicon-chevron-right
dira zertan beharrezkoak kontrolak egiteko. Bootstrap .icon-prev
- ek .icon-next
Unicode alternatiba arrunt gisa eskaintzen du.
Gehitu erraz azpitituluak zure diapositibetan .carousel-caption
edozein elementurekin .item
. Jarri hemen hautazko edozein HTML eta automatikoki lerrokatu eta formateatu egingo da.
id
Karruselek kanpoaldeko edukiontzi bat erabiltzea eskatzen dute .carousel
karruselaren kontrolak behar bezala funtzionatzeko. Karrusel bat gehitzean edo karrusel bat aldatzean id
, ziurtatu dagozkion kontrolak eguneratzen dituzula.
Erabili datu-atributuak karruselaren posizioa erraz kontrolatzeko. data-slide
gako-hitzak onartzen ditu prev
edo next
, eta horrek diapositiba-posizioa bere uneko posizioarekiko aldatzen du. Bestela, erabili data-slide-to
diapositiba-indize gordina karruselara pasatzeko data-slide-to="2"
, eta horrek diapositiba-posizioa indize jakin batera aldatzen du 0
.
data-ride="carousel"
Atributua orria kargatzen denetik hasita karrusel bat animazio gisa markatzeko erabiltzen da . Ezin da erabili karrusel beraren Javascript-en hasiera esplizituarekin batera (erredundantea eta beharrezkoa ez dena).
Deitu karuselera eskuz honekin:
Aukerak datu-atributuen edo JavaScript bidez pasa daitezke. Datu-atributuetarako, erantsi aukera-izena data-
, hemen bezala data-interval=""
.
Izena | mota | lehenetsia | deskribapena |
---|---|---|---|
tartea | zenbakia | 5000 | Elementu bat automatikoki bizikletaz ibiltzearen artean atzeratu behar den denbora. Gezurra bada, karrusela ez da automatikoki zirkulatuko. |
pausa | katea | nulua | "pasatu" | Aukeran ezartzen bada "hover" , karruselaren txirrindularitza aktibatuta gelditzen du eta karruselaren txirrindularitza aktibatuta mouseenter berriro hasiko da mouseleave . Aukeran ezartzen bada null , karruselaren gainean pasatzeak ez du etengo. |
bildu | boolearra | egia | Karruselak etengabe zirkulatzen duen edo geldialdi gogorrak izan behar dituen. |
teklatua | boolearra | egia | Karruselak teklatuko gertaeren aurrean erreakzionatu behar duen ala ez. |
.carousel(options)
Karrusela hautazko aukera batekin hasieratzen du object
eta elementuen bidez bizikletaz hasten da.
.carousel('cycle')
Karruselaren elementuetan zehar ibiliko da ezkerretik eskuinera.
.carousel('pause')
Karrusela elementuetan zehar bizikletaz ibiltzeari uzten dio.
.carousel(number)
Karrusela fotograma jakin batera birziklatzen du (0 oinarrian, array baten antzera).
.carousel('prev')
Zikloak aurreko elementura.
.carousel('next')
Zikloak hurrengo elementura.
Bootstrap's carousel class exposes two events for hooking into carousel functionality.
Both events have the following additional properties:
direction
: The direction in which the carousel is sliding (either "left"
or "right"
).relatedTarget
: The DOM element that is being slid into place as the active item.All carousel events are fired at the carousel itself (i.e. at the <div class="carousel">
).
Event Type | Description |
---|---|
slide.bs.carousel | This event fires immediately when the slide instance method is invoked. |
slid.bs.carousel | This event is fired when the carousel has completed its slide transition. |
The affix plugin toggles position: fixed;
on and off, emulating the effect found with position: sticky;
. The subnavigation on the right is a live demo of the affix plugin.
Use the affix plugin via data attributes or manually with your own JavaScript. In both situations, you must provide CSS for the positioning and width of your affixed content.
Note: Do not use the affix plugin on an element contained in a relatively positioned element, such as a pulled or pushed column, due to a Safari rendering bug.
The affix plugin toggles between three classes, each representing a particular state: .affix
, .affix-top
, and .affix-bottom
. You must provide the styles, with the exception of position: fixed;
on .affix
, for these classes yourself (independent of this plugin) to handle the actual positions.
Here's how the affix plugin works:
.affix-top
to indicate the element is in its top-most position. At this point no CSS positioning is required..affix
replaces .affix-top
and sets position: fixed;
(provided by Bootstrap's CSS)..affix
with .affix-bottom
. Since offsets are optional, setting one requires you to set the appropriate CSS. In this case, add position: absolute;
when necessary. The plugin uses the data attribute or JavaScript option to determine where to position the element from there.Follow the above steps to set your CSS for either of the usage options below.
To easily add affix behavior to any element, just add data-spy="affix"
to the element you want to spy on. Use offsets to define when to toggle the pinning of an element.
Call the affix plugin via JavaScript:
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-
, as in data-offset-top="200"
.
Name | type | default | description |
---|---|---|---|
offset | number | function | object | 10 | Pixels to offset from screen when calculating position of scroll. If a single number is provided, the offset will be applied in both top and bottom directions. To provide a unique, bottom and top offset just provide an object offset: { top: 10 } or offset: { top: 10, bottom: 5 } . Use a function when you need to dynamically calculate an offset. |
target | selector | node | jQuery element | the window object |
Specifies the target element of the affix. |
.affix(options)
Activates your content as affixed content. Accepts an optional options object
.
.affix('checkPosition')
Recalculates the state of the affix based on the dimensions, position, and scroll position of the relevant elements. The .affix
, .affix-top
, and .affix-bottom
classes are added to or removed from the affixed content according to the new state. This method needs to be called whenever the dimensions of the affixed content or the target element are changed, to ensure correct positioning of the affixed content.
Bootstrap's affix plugin exposes a few events for hooking into affix functionality.
Event Type | Description |
---|---|
affix.bs.affix | This event fires immediately before the element has been affixed. |
affixed.bs.affix | This event is fired after the element has been affixed. |
affix-top.bs.affix | Gertaera hau elementua goian jarri baino lehen berehala piztuko da. |
itsatsi-top.bs.afixatu | Gertaera hau elementua goian jarri ondoren abiarazten da. |
eranskin-behean.bs.affix | Gertaera hau elementua behean finkatu baino lehen berehala piztuko da. |
itsatsi-behean.bs.atxiki | Gertaera hau elementua behean jarri ondoren abiarazten da. |