JavaScript
Buhayin ang mga bahagi ng Bootstrap na may higit sa isang dosenang custom na jQuery plugin. Madaling isama silang lahat, o isa-isa.
Buhayin ang mga bahagi ng Bootstrap na may higit sa isang dosenang custom na jQuery plugin. Madaling isama silang lahat, o isa-isa.
Maaaring isama ang mga plugin nang isa-isa (gamit ang mga indibidwal na *.js
file ng Bootstrap), o sabay-sabay (gamit bootstrap.js
o ang minified bootstrap.min.js
).
Pareho bootstrap.js
at bootstrap.min.js
naglalaman ng lahat ng mga plugin sa isang file. Isa lang ang isama.
Ang ilang mga plugin at mga bahagi ng CSS ay nakadepende sa iba pang mga plugin. Kung isa-isa kang magsasama ng mga plugin, tiyaking suriin ang mga dependency na ito sa mga doc. Tandaan din na ang lahat ng mga plugin ay nakasalalay sa jQuery (ito ay nangangahulugan na ang jQuery ay dapat isama bago ang mga plugin na file). Kumonsulta sa aminbower.json
upang makita kung aling mga bersyon ng jQuery ang sinusuportahan.
Maaari mong gamitin ang lahat ng plugin ng Bootstrap sa pamamagitan lamang ng markup API nang hindi nagsusulat ng isang linya ng JavaScript. Ito ang unang-class na API ng Bootstrap at dapat ang iyong unang pagsasaalang-alang kapag gumagamit ng isang plugin.
Iyon ay sinabi, sa ilang mga sitwasyon ay maaaring kanais-nais na i-off ang functionality na ito. Samakatuwid, nagbibigay din kami ng kakayahang i-disable ang data attribute API sa pamamagitan ng pag-unbinding sa lahat ng kaganapan sa dokumento na may namespace na data-api
. Ganito ang hitsura nito:
Bilang kahalili, upang i-target ang isang partikular na plugin, isama lamang ang pangalan ng plugin bilang isang namespace kasama ang data-api namespace tulad nito:
Huwag gumamit ng mga katangian ng data mula sa maraming plugin sa parehong elemento. Halimbawa, ang isang button ay hindi maaaring magkaroon ng tooltip at mag-toggle ng modal. Upang magawa ito, gumamit ng isang elemento ng pambalot.
Naniniwala rin kami na dapat mong magamit ang lahat ng Bootstrap plugins sa pamamagitan lamang ng JavaScript API. Ang lahat ng mga pampublikong API ay iisa, nakaka-chainable na mga pamamaraan, at ibinabalik ang koleksyon na naaksyunan.
Ang lahat ng mga pamamaraan ay dapat tumanggap ng isang opsyonal na object na opsyon, isang string na nagta-target sa isang partikular na paraan, o wala (na nagpasimula ng isang plugin na may default na gawi):
Inilalantad din ng bawat plugin ang raw constructor nito sa isang Constructor
property: $.fn.popover.Constructor
. Kung gusto mong makakuha ng partikular na instance ng plugin, direktang kunin ito mula sa isang elemento: $('[rel="popover"]').data('popover')
.
Maaari mong baguhin ang mga default na setting para sa isang plugin sa pamamagitan ng pagbabago sa Constructor.DEFAULTS
object ng plugin:
Minsan kinakailangan na gumamit ng mga plugin ng Bootstrap kasama ng iba pang mga framework ng UI. Sa mga sitwasyong ito, maaaring mangyari paminsan-minsan ang mga banggaan ng namespace. Kung mangyari ito, maaari kang tumawag .noConflict
sa plugin na nais mong ibalik ang halaga.
Nagbibigay ang Bootstrap ng mga custom na kaganapan para sa mga natatanging pagkilos ng karamihan sa mga plugin. Sa pangkalahatan, ang mga ito ay dumating sa isang infinitive at past participle form - kung saan ang infinitive (hal. show
) ay na-trigger sa simula ng isang kaganapan, at ang past participle form nito (hal. shown
) ay na-trigger sa pagkumpleto ng isang aksyon.
Sa 3.0.0, lahat ng mga kaganapan sa Bootstrap ay namespaced.
Ang lahat ng infinitive na kaganapan ay nagbibigay ng preventDefault
functionality. Nagbibigay ito ng kakayahang ihinto ang pagpapatupad ng isang aksyon bago ito magsimula.
Ang bersyon ng bawat isa sa mga plugin ng jQuery ng Bootstrap ay maaaring ma-access sa pamamagitan ng pag- VERSION
aari ng constructor ng plugin. Halimbawa, para sa tooltip plugin:
Ang mga plugin ng Bootstrap ay hindi bumabalik lalo na nang maganda kapag ang JavaScript ay hindi pinagana. Kung nagmamalasakit ka sa karanasan ng user sa kasong ito, gamitin <noscript>
upang ipaliwanag ang sitwasyon (at kung paano muling paganahin ang JavaScript) sa iyong mga user, at/o magdagdag ng sarili mong mga custom na fallback.
Hindi opisyal na sinusuportahan ng Bootstrap ang mga third-party na JavaScript library tulad ng Prototype o jQuery UI. Sa kabila .noConflict
at namespaced na mga kaganapan, maaaring may mga problema sa compatibility na kailangan mong ayusin nang mag-isa.
Para sa mga simpleng transition effect, isama ang transition.js
isang beses sa tabi ng iba pang mga JS file. Kung ginagamit mo ang compiled (o minified) bootstrap.js
, hindi na kailangang isama ito—nandiyan na ito.
Ang Transition.js ay isang pangunahing katulong para sa transitionEnd
mga kaganapan pati na rin ang isang CSS transition emulator. Ito ay ginagamit ng iba pang mga plugin upang tingnan ang CSS transition support at para mahuli ang hanging transition.
Maaaring ma-disable sa buong mundo ang mga transition gamit ang sumusunod na snippet ng JavaScript, na dapat na dumating pagkatapos transition.js
(o bootstrap.js
, bootstrap.min.js
ayon sa sitwasyon) ay na-load:
Ang mga modal ay streamline, ngunit nababaluktot, ang mga dialog na prompt na may pinakamababang kinakailangang functionality at mga smart default.
Tiyaking huwag magbukas ng modal habang nakikita pa ang isa pa. Ang pagpapakita ng higit sa isang modal sa isang pagkakataon ay nangangailangan ng custom na code.
Palaging subukang ilagay ang HTML code ng modal sa isang nangungunang antas na posisyon sa iyong dokumento upang maiwasan ang iba pang mga bahagi na nakakaapekto sa hitsura at/o functionality ng modal.
Mayroong ilang mga caveat tungkol sa paggamit ng mga modal sa mga mobile device. Tingnan ang aming browser support docs para sa mga detalye.
Dahil sa kung paano tinukoy ng HTML5 ang mga semantika nito, ang autofocus
HTML attribute ay walang epekto sa Bootstrap modals. Upang makamit ang parehong epekto, gumamit ng ilang custom na JavaScript:
Isang nai-render na modal na may header, katawan, at hanay ng mga pagkilos sa footer.
I-toggle ang isang modal sa pamamagitan ng JavaScript sa pamamagitan ng pag-click sa button sa ibaba. Magda-slide ito pababa at maglalaho mula sa itaas ng page.
Siguraduhing magdagdag role="dialog"
at aria-labelledby="..."
, na tumutukoy sa modal na pamagat, sa .modal
, at role="document"
sa .modal-dialog
mismong.
Bukod pa rito, maaari kang magbigay ng paglalarawan ng iyong modal dialog na may aria-describedby
sa .modal
.
Ang pag-embed ng mga video sa YouTube sa mga modal ay nangangailangan ng karagdagang JavaScript na wala sa Bootstrap upang awtomatikong ihinto ang pag-playback at higit pa. Tingnan ang kapaki-pakinabang na post na ito ng Stack Overflow para sa higit pang impormasyon.
Ang mga modal ay may dalawang opsyonal na laki, na magagamit sa pamamagitan ng mga klase ng modifier na ilalagay sa isang .modal-dialog
.
Para sa mga modal na lilitaw lamang sa halip na mawala upang tingnan, alisin ang .fade
klase sa iyong modal markup.
Upang samantalahin ang Bootstrap grid system sa loob ng isang modal, mag-nest lang .row
sa loob ng .modal-body
at pagkatapos ay gamitin ang mga normal na klase ng grid system.
May isang grupo ng mga button na lahat ay nagti-trigger ng parehong modal, na may bahagyang magkaibang mga nilalaman? Gamitin event.relatedTarget
at HTML na mga data-*
katangian (maaaring sa pamamagitan ng jQuery ) upang pag-iba-ibahin ang mga nilalaman ng modal depende sa kung aling button ang na-click. Tingnan ang mga doc ng Modal Events para sa mga detalye sa relatedTarget
,
I-toggle ng modal plugin ang iyong nakatagong content on demand, sa pamamagitan ng mga attribute ng data o JavaScript. Nagdaragdag din ito .modal-open
sa <body>
to override default na pag-scroll na gawi at bumubuo ng .modal-backdrop
para magbigay ng lugar ng pag-click para sa pag-dismiss ng mga ipinapakitang modal kapag nag-click sa labas ng modal.
Mag-activate ng modal nang hindi nagsusulat ng JavaScript. Itakda data-toggle="modal"
sa isang elemento ng controller, tulad ng isang button, kasama ng isang data-target="#foo"
o href="#foo"
upang i-target ang isang partikular na modal upang i-toggle.
Tumawag ng modal na may id myModal
na may isang linya ng JavaScript:
Maaaring ipasa ang mga opsyon sa pamamagitan ng mga katangian ng data o JavaScript. Para sa mga katangian ng data, idagdag ang pangalan ng opsyon sa data-
, tulad ng sa data-backdrop=""
.
Pangalan | uri | default | paglalarawan |
---|---|---|---|
backdrop | boolean o ang string'static' |
totoo | May kasamang modal-backdrop na elemento. Bilang kahalili, tumukoy static para sa isang backdrop na hindi nagsasara ng modal sa pag-click. |
keyboard | boolean | totoo | Isinasara ang modal kapag pinindot ang escape key |
palabas | boolean | totoo | Ipinapakita ang modal kapag nasimulan. |
remote | landas | mali | Hindi na ginagamit ang opsyong ito mula noong v3.3.0 at inalis na sa v4. Inirerekomenda namin sa halip ang paggamit ng client-side templating o isang data binding framework, o pagtawag sa jQuery.load sa iyong sarili. Kung ang isang malayuang URL ay ibinigay, ang nilalaman ay ilo-load nang isang beses sa pamamagitan ng paraan ng jQuery |
.modal(options)
Ina-activate ang iyong content bilang modal. Tumatanggap ng opsyonal na opsyon object
.
.modal('toggle')
Manu-manong i-toggle ang isang modal. Bumabalik sa tumatawag bago ang modal ay aktwal na naipakita o naitago (ibig sabihin, bago mangyari ang shown.bs.modal
o hidden.bs.modal
kaganapan).
.modal('show')
Manu-manong nagbubukas ng modal. Bumabalik sa tumatawag bago aktwal na naipakita ang modal (ibig sabihin, bago shown.bs.modal
mangyari ang kaganapan).
.modal('hide')
Manu-manong nagtatago ng modal. Bumabalik sa tumatawag bago pa talaga naitago ang modal (ibig sabihin, bago hidden.bs.modal
mangyari ang kaganapan).
.modal('handleUpdate')
Isinasaayos muli ang pagpoposisyon ng modal upang kontrahin ang isang scrollbar kung sakaling may lumitaw, na gagawing tumalon ang modal sa kaliwa.
Kailangan lamang kapag ang taas ng modal ay nagbabago habang ito ay bukas.
Ang modal class ng Bootstrap ay naglalantad ng ilang mga kaganapan para sa hooking sa modal functionality.
Ang lahat ng modal na kaganapan ay pinapagana sa modal mismo (ibig sabihin, sa <div class="modal">
).
Uri ng kaganapan | Paglalarawan |
---|---|
show.bs.modal | Agad na gagana ang kaganapang ito kapag show tinawag ang paraan ng instance. Kung sanhi ng isang pag-click, ang na-click na elemento ay magagamit bilang pag- relatedTarget aari ng kaganapan. |
ipinapakita.bs.modal | Ang kaganapang ito ay pinapagana kapag ang modal ay ginawang nakikita ng user (maghihintay na makumpleto ang mga transition ng CSS). Kung sanhi ng isang pag-click, ang na-click na elemento ay magagamit bilang pag- relatedTarget aari ng kaganapan. |
hide.bs.modal | Agad na pinapagana ang kaganapang ito kapag hide tinawag na ang paraan ng instance. |
hidden.bs.modal | Ang kaganapang ito ay papaganahin kapag ang modal ay tapos nang itago mula sa user (maghihintay na makumpleto ang mga transition ng CSS). |
loaded.bs.modal | Ang kaganapang ito ay pinapagana kapag ang modal ay nag-load ng nilalaman gamit ang remote opsyon. |
Magdagdag ng mga dropdown na menu sa halos anumang bagay gamit ang simpleng plugin na ito, kabilang ang navbar, mga tab, at mga tabletas.
Sa pamamagitan ng mga attribute ng data o JavaScript, i-toggle ng dropdown na plugin ang nakatagong content (mga dropdown na menu) sa pamamagitan ng pag-toggle sa .open
klase sa item sa listahan ng magulang.
Sa mga mobile device, ang pagbubukas ng dropdown ay nagdaragdag ng .dropdown-backdrop
bilang isang tap area para sa pagsasara ng mga dropdown na menu kapag nag-tap sa labas ng menu, isang kinakailangan para sa wastong suporta sa iOS. Nangangahulugan ito na ang paglipat mula sa isang bukas na dropdown na menu patungo sa ibang dropdown na menu ay nangangailangan ng karagdagang pag-tap sa mobile.
Tandaan: Ang data-toggle="dropdown"
katangian ay umaasa sa pagsasara ng mga dropdown na menu sa antas ng application, kaya magandang ideya na palaging gamitin ito.
Idagdag data-toggle="dropdown"
sa isang link o button upang i-toggle ang isang dropdown.
Upang panatilihing buo ang mga URL gamit ang mga button ng link, gamitin ang data-target
attribute sa halip na href="#"
.
Tawagan ang mga dropdown sa pamamagitan ng JavaScript:
data-toggle="dropdown"
kailangan pa rinHindi alintana kung tawagan mo ang iyong dropdown sa pamamagitan ng JavaScript o sa halip ay gumamit ng data-api, data-toggle="dropdown"
palaging kinakailangang naroroon sa elemento ng trigger ng dropdown.
wala
$().dropdown('toggle')
I-toggle ang dropdown na menu ng isang naibigay na navbar o naka-tab na navigation.
Ang lahat ng mga dropdown na kaganapan ay pinapagana sa pangunahing .dropdown-menu
elemento ng 's.
May property ang lahat ng dropdown na event relatedTarget
, na ang value ay ang toggling anchor element.
Uri ng kaganapan | Paglalarawan |
---|---|
show.bs.dropdown | Agad na gagana ang kaganapang ito kapag tinawag ang paraan ng show instance. |
ipinapakita.bs.dropdown | Ang kaganapang ito ay pinapagana kapag ang dropdown ay ginawang nakikita ng user (maghihintay para sa mga transition ng CSS, upang makumpleto). |
hide.bs.dropdown | Ang kaganapang ito ay agad na pinapagana kapag ang paraan ng pagtatago ng halimbawa ay tinawag. |
hidden.bs.dropdown | Ang kaganapang ito ay gagana kapag ang dropdown ay tapos nang itago mula sa user (maghihintay para sa mga transition ng CSS, upang makumpleto). |
Ang ScrollSpy plugin ay para sa awtomatikong pag-update ng nav target batay sa scroll position. Mag-scroll sa lugar sa ibaba ng navbar at panoorin ang aktibong pagbabago ng klase. Ang mga dropdown na sub item ay iha-highlight din.
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi bago sila naubos qui. Tumblr farm-to-table na mga karapatan sa bisikleta kahit ano. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui malamang na hindi mo pa naririnig ang mga ito at ang cardigan trust fund ay culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
Veniam marfa bigote skateboard, adipisicing fugiat velit pitchfork balbas. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat apat na loko nisi, ea helvetica nulla carles. Naka-tattoo na cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.
Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bike rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Ang Vero VHS ay adipisicing. Consectetur ilang DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.
In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
Keytar twee blog, culpa messenger bag marfa kahit anong delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats malamang na hindi mo pa narinig ang tungkol sa kanila consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat bago sila maubos, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.
Ang mga link sa Navbar ay dapat may mga nareresolbang id target. Halimbawa, ang isang ay <a href="#home">home</a>
dapat na tumutugma sa isang bagay sa DOM tulad ng <div id="home"></div>
.
:visible
ang mga hindi target na elementoAng mga target na elemento na hindi :visible
ayon sa jQuery ay hindi papansinin at ang kanilang mga kaukulang nav item ay hindi kailanman mai-highlight.
Anuman ang paraan ng pagpapatupad, ang scrollspy ay nangangailangan ng paggamit ng position: relative;
sa elemento na iyong tinitiktikan. Sa karamihan ng mga kaso ito ang <body>
. Kapag nag-i-scroll sa mga elemento maliban sa <body>
, siguraduhing magkaroon ng isang height
set at overflow-y: scroll;
inilapat.
Upang madaling magdagdag ng scrollspy na gawi sa iyong topbar navigation, idagdag data-spy="scroll"
sa elementong gusto mong tiktikan (kadalasan ay ito ang <body>
). Pagkatapos ay idagdag ang data-target
attribute na may ID o klase ng parent element ng anumang .nav
bahagi ng Bootstrap.
Pagkatapos idagdag position: relative;
sa iyong CSS, tawagan ang scrollspy sa pamamagitan ng JavaScript:
.scrollspy('refresh')
Kapag gumagamit ng scrollspy kasabay ng pagdaragdag o pag-alis ng mga elemento mula sa DOM, kakailanganin mong tawagan ang paraan ng pag-refresh tulad nito:
Maaaring ipasa ang mga opsyon sa pamamagitan ng mga katangian ng data o JavaScript. Para sa mga katangian ng data, idagdag ang pangalan ng opsyon sa data-
, tulad ng sa data-offset=""
.
Pangalan | uri | default | paglalarawan |
---|---|---|---|
offset | numero | 10 | Mga pixel na i-offset mula sa itaas kapag kinakalkula ang posisyon ng scroll. |
Uri ng kaganapan | Paglalarawan |
---|---|
activate.bs.scrollspy | Ang kaganapang ito ay gumagana sa tuwing may bagong item na na-activate ng scrollspy. |
Magdagdag ng mabilis, dynamic na paggana ng tab upang lumipat sa mga pane ng lokal na nilalaman, kahit na sa pamamagitan ng mga dropdown na menu. Hindi sinusuportahan ang mga nested tab.
Malamang na hilaw na maong ay hindi mo pa narinig ang mga ito na jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Bigote cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex pusit. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher 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.
Pinapalawak ng plugin na ito ang bahagi ng nabigasyon na naka-tab upang magdagdag ng mga lugar na nata-tab.
Paganahin ang mga tab na tab sa pamamagitan ng JavaScript (kailangang isaaktibo ang bawat tab):
Maaari mong i-activate ang mga indibidwal na tab sa maraming paraan:
Maaari mong i-activate ang isang tab o pill navigation nang hindi sumusulat ng anumang JavaScript sa pamamagitan lamang ng pagtukoy data-toggle="tab"
o data-toggle="pill"
sa isang elemento. Ang pagdagdag ng nav
at mga nav-tabs
klase sa tab ul
ay maglalapat ng Bootstrap tab styling , habang ang pagdaragdag ng nav
at mga nav-pills
klase ay maglalapat ng pill styling .
Upang mag-fade in ang mga tab, idagdag .fade
sa bawat isa .tab-pane
. Ang unang tab pane ay dapat ding .in
gawin ang unang nilalaman na nakikita.
$().tab
Ina-activate ang isang elemento ng tab at lalagyan ng nilalaman. Ang tab ay dapat may alinman sa isang data-target
o isang pag- href
target ng isang container node sa DOM. Sa mga halimbawa sa itaas, ang mga tab ay ang mga <a>
s na may mga data-toggle="tab"
katangian.
.tab('show')
Pinipili ang ibinigay na tab at ipinapakita ang nauugnay na nilalaman nito. Ang anumang iba pang tab na dati nang napili ay hindi mapipili at ang nauugnay na nilalaman nito ay nakatago. Bumabalik sa tumatawag bago aktwal na naipakita ang tab pane (ibig sabihin bago shown.bs.tab
mangyari ang kaganapan).
Kapag nagpapakita ng bagong tab, gagana ang mga kaganapan sa sumusunod na pagkakasunud-sunod:
hide.bs.tab
(sa kasalukuyang aktibong tab)show.bs.tab
(sa ipapakitang tab)hidden.bs.tab
(sa nakaraang aktibong tab, kapareho ng para sa hide.bs.tab
kaganapan)shown.bs.tab
(sa bagong-aktibong kakapakitang tab, kapareho ng para sa show.bs.tab
kaganapan)Kung wala pang tab na aktibo, hindi papaganahin ang hide.bs.tab
at mga hidden.bs.tab
kaganapan.
Uri ng kaganapan | Paglalarawan |
---|---|
show.bs.tab | Ang kaganapang ito ay gagana sa palabas sa tab, ngunit bago ipakita ang bagong tab. Gamitin event.target at event.relatedTarget i-target ang aktibong tab at ang nakaraang aktibong tab (kung magagamit) ayon sa pagkakabanggit. |
ipinapakita.bs.tab | Ang kaganapang ito ay gagana sa palabas sa tab pagkatapos maipakita ang isang tab. Gamitin event.target at event.relatedTarget i-target ang aktibong tab at ang nakaraang aktibong tab (kung magagamit) ayon sa pagkakabanggit. |
hide.bs.tab | Ang kaganapang ito ay gagana kapag ang isang bagong tab ay ipapakita (at sa gayon ang nakaraang aktibong tab ay itatago). Gamitin event.target at event.relatedTarget i-target ang kasalukuyang aktibong tab at ang bagong tab na malapit nang maging aktibo, ayon sa pagkakabanggit. |
hidden.bs.tab | Ang kaganapang ito ay gagana pagkatapos ipakita ang isang bagong tab (at sa gayon ang nakaraang aktibong tab ay nakatago). Gamitin event.target at event.relatedTarget i-target ang nakaraang aktibong tab at ang bagong aktibong tab, ayon sa pagkakabanggit. |
May inspirasyon ng mahusay na jQuery.tipsy plugin na isinulat ni Jason Frame; Ang mga tooltip ay isang na-update na bersyon, na hindi umaasa sa mga larawan, gumagamit ng CSS3 para sa mga animation, at data-attribute para sa lokal na imbakan ng pamagat.
Ang mga tooltip na may zero-length na mga pamagat ay hindi kailanman ipinapakita.
Mag-hover sa mga link sa ibaba upang makita ang mga tooltip:
Tight pants next level keffiyeh malamang hindi mo pa narinig. Photo booth balbas raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, ang mcsweeney's fixie sustainable quinoa 8-bit american apparel ay may terry richardson vinyl chambray. Balbas stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, apat na loko mcsweeney's cleanse vegan chambray. Isang talagang ironic artisan kahit anong keytar , scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.
Apat na opsyon ang available: naka-align sa itaas, kanan, ibaba, at kaliwa.
Para sa mga dahilan ng pagganap, ang Tooltip at Popover data-apis ay opt-in, ibig sabihin , dapat mong simulan ang mga ito sa iyong sarili .
Ang isang paraan upang simulan ang lahat ng mga tooltip sa isang pahina ay ang piliin ang mga ito ayon sa kanilang data-toggle
katangian:
Ang tooltip plugin ay bumubuo ng content at markup on demand, at bilang default ay naglalagay ng mga tooltip pagkatapos ng kanilang trigger element.
I-trigger ang tooltip sa pamamagitan ng JavaScript:
Ang kinakailangang markup para sa isang tooltip ay isang data
katangian lamang at title
sa HTML element na nais mong magkaroon ng isang tooltip. Ang nabuong markup ng isang tooltip ay medyo simple, bagama't nangangailangan ito ng isang posisyon (bilang default, nakatakda sa top
pamamagitan ng plugin).
Minsan gusto mong magdagdag ng tooltip sa isang hyperlink na bumabalot ng maraming linya. Ang default na gawi ng tooltip plugin ay igitna ito nang pahalang at patayo. Idagdag white-space: nowrap;
sa iyong mga anchor upang maiwasan ito.
Kapag gumagamit ng mga tooltip sa mga elemento sa loob ng isang .btn-group
o isang .input-group
, o sa mga elementong nauugnay sa talahanayan ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, <tfoot>
), kailangan mong tukuyin ang opsyon container: 'body'
(nakadokumento sa ibaba) upang maiwasan ang mga hindi gustong epekto (tulad ng lumalawak na elemento at/ o nawawala ang mga bilugan nitong sulok kapag na-trigger ang tooltip).
Para sa mga user na nagna-navigate gamit ang isang keyboard, at sa partikular na mga user ng mga pantulong na teknolohiya, dapat ka lang magdagdag ng mga tooltip sa mga elementong natuon sa keyboard gaya ng mga link, mga kontrol sa form, o anumang arbitrary na elemento na may tabindex="0"
katangian.
Upang magdagdag ng tooltip sa isang disabled
o .disabled
elemento, ilagay ang elemento sa loob ng isang <div>
at ilapat ang tooltip doon sa <div>
halip.
Maaaring ipasa ang mga opsyon sa pamamagitan ng mga katangian ng data o JavaScript. Para sa mga katangian ng data, idagdag ang pangalan ng opsyon sa data-
, tulad ng sa data-animation=""
.
Pangalan | Uri | Default | Paglalarawan |
---|---|---|---|
animation | boolean | totoo | Maglapat ng CSS fade transition sa tooltip |
lalagyan | string | mali | mali | Idinaragdag ang tooltip sa isang partikular na elemento. Halimbawa: |
pagkaantala | numero | bagay | 0 | Pagkaantala sa pagpapakita at pagtatago ng tooltip (ms) - hindi nalalapat sa manu-manong uri ng pag-trigger Kung may ibinigay na numero, ilalapat ang pagkaantala sa parehong itago/ipakita Ang istraktura ng bagay ay: |
html | boolean | mali | Ipasok ang HTML sa tooltip. Kung mali, ang text pamamaraan ng jQuery ay gagamitin upang magpasok ng nilalaman sa DOM. Gumamit ng text kung nag-aalala ka tungkol sa mga pag-atake ng XSS. |
pagkakalagay | string | function | 'itaas' | Paano iposisyon ang tooltip - itaas | ibaba | kaliwa | tama | sasakyan. Kapag ginamit ang isang function upang matukoy ang placement, tinatawag itong tooltip DOM node bilang unang argumento nito at ang triggering element na DOM node bilang pangalawa nito. Nakatakda ang |
tagapili | string | mali | Kung may ibibigay na tagapili, ang mga bagay sa tooltip ay idelegado sa mga tinukoy na target. Sa pagsasagawa, ito ay ginagamit upang paganahin ang dynamic na HTML na nilalaman na magkaroon ng mga tooltip na idinagdag. Tingnan ito at isang halimbawang nagbibigay-kaalaman . |
template | string | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
Base HTML na gagamitin kapag gumagawa ng tooltip. Ang mga tooltip
Ang pinakamalawak na elemento ng wrapper ay dapat magkaroon ng |
pamagat | string | function | '' | Default na halaga ng pamagat kung Kung ang isang function ay ibinigay, ito ay tatawagin kasama ang |
gatilyo | string | 'hover focus' | Paano na-trigger ang tooltip - i-click ang | mag-hover | focus | manwal. Maaari kang magpasa ng maraming trigger; paghiwalayin sila ng isang puwang. manual hindi maaaring isama sa anumang iba pang trigger. |
viewport | string | bagay | function | { selector: 'body', padding: 0 } | Pinapanatili ang tooltip sa loob ng mga hangganan ng elementong ito. Halimbawa: Kung may ibinigay na function, ito ay tinatawag na may triggering element na DOM node bilang ang tanging argumento nito. Nakatakda ang |
Ang mga opsyon para sa mga indibidwal na tooltip ay maaaring tukuyin sa pamamagitan ng paggamit ng mga katangian ng data, gaya ng ipinaliwanag sa itaas.
$().tooltip(options)
Nag-a-attach ng tooltip handler sa isang koleksyon ng elemento.
.tooltip('show')
Nagpapakita ng tooltip ng isang elemento. Bumabalik sa tumatawag bago aktwal na naipakita ang tooltip (ibig sabihin, bago shown.bs.tooltip
mangyari ang kaganapan). Ito ay itinuturing na isang "manual" na pag-trigger ng tooltip. Ang mga tooltip na may zero-length na mga pamagat ay hindi kailanman ipinapakita.
.tooltip('hide')
Itinatago ang tooltip ng isang elemento. Bumabalik sa tumatawag bago pa talaga naitago ang tooltip (ibig sabihin, bago hidden.bs.tooltip
mangyari ang kaganapan). Ito ay itinuturing na isang "manual" na pag-trigger ng tooltip.
.tooltip('toggle')
I-toggle ang tooltip ng isang elemento. Bumabalik sa tumatawag bago ang tooltip ay aktwal na naipakita o naitago (ibig sabihin, bago mangyari ang shown.bs.tooltip
o hidden.bs.tooltip
kaganapan). Ito ay itinuturing na isang "manual" na pag-trigger ng tooltip.
.tooltip('destroy')
Itinatago at sinisira ang tooltip ng isang elemento. Ang mga tooltip na gumagamit ng delegasyon (na ginawa gamit ang selector
opsyon ) ay hindi maaaring isa-isang sirain sa mga elemento ng descendant na trigger.
Uri ng kaganapan | Paglalarawan |
---|---|
show.bs.tooltip | Agad na gagana ang kaganapang ito kapag show tinawag ang paraan ng instance. |
ipinapakita.bs.tooltip | Ang kaganapang ito ay pinapagana kapag ang tooltip ay ginawang nakikita ng user (maghihintay na makumpleto ang mga transition ng CSS). |
hide.bs.tooltip | Agad na pinapagana ang kaganapang ito kapag hide tinawag na ang paraan ng instance. |
hidden.bs.tooltip | Ang kaganapang ito ay pinapagana kapag ang tooltip ay tapos nang itago mula sa user (maghihintay para sa mga transition ng CSS na makumpleto). |
ipinasok.bs.tooltip | Ang kaganapang ito ay pinapagana pagkatapos ng show.bs.tooltip kaganapan kapag ang template ng tooltip ay naidagdag sa DOM. |
Magdagdag ng maliliit na overlay ng content, tulad ng nasa iPad, sa anumang elemento para sa pabahay ng pangalawang impormasyon.
Ang mga popover na ang parehong pamagat at nilalaman ay zero-length ay hindi kailanman ipinapakita.
Ang mga Popover ay nangangailangan ng tooltip plugin na maisama sa iyong bersyon ng Bootstrap.
Para sa mga dahilan ng pagganap, ang Tooltip at Popover data-apis ay opt-in, ibig sabihin , dapat mong simulan ang mga ito sa iyong sarili .
Ang isang paraan upang simulan ang lahat ng mga popover sa isang pahina ay ang piliin ang mga ito ayon sa kanilang data-toggle
katangian:
Kapag gumagamit ng mga popover sa mga elemento sa loob ng isang .btn-group
o isang .input-group
, o sa mga elementong nauugnay sa talahanayan ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, <tfoot>
), kailangan mong tukuyin ang opsyon container: 'body'
(nakadokumento sa ibaba) upang maiwasan ang mga hindi gustong epekto (tulad ng lumalawak na elemento at/ o nawawala ang mga bilugan nitong sulok kapag na-trigger ang popover).
Upang magdagdag ng popover sa isang disabled
o .disabled
elemento, ilagay ang elemento sa loob ng isang <div>
at ilapat ang popover doon sa <div>
halip.
Minsan gusto mong magdagdag ng popover sa isang hyperlink na bumabalot ng maraming linya. Ang default na gawi ng popover plugin ay igitna ito nang pahalang at patayo. Idagdag white-space: nowrap;
sa iyong mga anchor upang maiwasan ito.
Apat na opsyon ang available: naka-align sa itaas, kanan, ibaba, at kaliwa.
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.
Gamitin ang focus
trigger upang i-dismiss ang mga popover sa susunod na pag-click na gagawin ng user.
Para sa wastong cross-browser at cross-platform na pag-uugali, dapat mong gamitin ang <a>
tag, hindi ang <button>
tag, at dapat mo ring isama ang mga role="button"
at tabindex
attribute.
Paganahin ang mga popover sa pamamagitan ng JavaScript:
Maaaring ipasa ang mga opsyon sa pamamagitan ng mga katangian ng data o JavaScript. Para sa mga katangian ng data, idagdag ang pangalan ng opsyon sa data-
, tulad ng sa data-animation=""
.
Pangalan | Uri | Default | Paglalarawan |
---|---|---|---|
animation | boolean | totoo | Maglapat ng CSS fade transition sa popover |
lalagyan | string | mali | mali | Idinaragdag ang popover sa isang partikular na elemento. Halimbawa: |
nilalaman | string | function | '' | Default na halaga ng nilalaman kung Kung ang isang function ay ibinigay, ito ay tatawagin kasama ang |
pagkaantala | numero | bagay | 0 | Pagkaantala sa pagpapakita at pagtatago ng popover (ms) - hindi nalalapat sa manu-manong uri ng pag-trigger Kung may ibinigay na numero, ilalapat ang pagkaantala sa parehong itago/ipakita Ang istraktura ng bagay ay: |
html | boolean | mali | Ipasok ang HTML sa popover. Kung mali, ang text pamamaraan ng jQuery ay gagamitin upang magpasok ng nilalaman sa DOM. Gumamit ng text kung nag-aalala ka tungkol sa mga pag-atake ng XSS. |
pagkakalagay | string | function | 'tama' | Paano iposisyon ang popover - tuktok | ibaba | kaliwa | tama | sasakyan. Kapag ginamit ang isang function upang matukoy ang placement, tinatawag itong popover DOM node bilang unang argumento nito at ang triggering element na DOM node bilang pangalawa nito. Ang |
tagapili | string | mali | Kung may ibibigay na selector, ang mga popover object ay idelegado sa mga tinukoy na target. Sa pagsasagawa, ito ay ginagamit upang paganahin ang dynamic na HTML na nilalaman na magkaroon ng mga popover na idinagdag. Tingnan ito at isang halimbawang nagbibigay-kaalaman . |
template | string | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' |
Base HTML na gagamitin kapag gumagawa ng popover. Ang popover's Ang popover's
Ang pinakamalawak na elemento ng wrapper ay dapat magkaroon ng |
pamagat | string | function | '' | Default na halaga ng pamagat kung Kung ang isang function ay ibinigay, ito ay tatawagin kasama ang |
gatilyo | string | 'click' | Paano na-trigger ang popover - i-click ang | mag-hover | focus | manwal. Maaari kang magpasa ng maraming trigger; paghiwalayin sila ng isang puwang. manual hindi maaaring isama sa anumang iba pang trigger. |
viewport | string | bagay | function | { selector: 'body', padding: 0 } | Pinapanatili ang popover sa loob ng mga hangganan ng elementong ito. Halimbawa: Kung may ibinigay na function, ito ay tinatawag na may triggering element na DOM node bilang ang tanging argumento nito. Ang |
Ang mga opsyon para sa mga indibidwal na popover ay maaaring tukuyin sa pamamagitan ng paggamit ng mga katangian ng data, gaya ng ipinaliwanag sa itaas.
$().popover(options)
Sinisimulan ang mga popover para sa isang koleksyon ng elemento.
.popover('show')
Nagpapakita ng popover ng isang elemento. Bumabalik sa tumatawag bago aktwal na naipakita ang popover (ibig sabihin, bago shown.bs.popover
mangyari ang kaganapan). Ito ay itinuturing na isang "manual" na pag-trigger ng popover. Ang mga popover na ang parehong pamagat at nilalaman ay zero-length ay hindi kailanman ipinapakita.
.popover('hide')
Itinatago ang popover ng isang elemento. Bumabalik sa tumatawag bago aktwal na naitago ang popover (ibig sabihin, bago hidden.bs.popover
mangyari ang kaganapan). Ito ay itinuturing na isang "manual" na pag-trigger ng popover.
.popover('toggle')
I-toggle ang popover ng isang elemento. Bumabalik sa tumatawag bago aktwal na naipakita o naitago ang popover (ibig sabihin, bago mangyari ang shown.bs.popover
o hidden.bs.popover
kaganapan). Ito ay itinuturing na isang "manual" na pag-trigger ng popover.
.popover('destroy')
Itinatago at sinisira ang popover ng isang elemento. Ang mga popover na gumagamit ng delegasyon (na ginawa gamit ang selector
opsyon ) ay hindi maaaring isa-isang sirain sa mga elemento ng descendant na trigger.
Uri ng kaganapan | Paglalarawan |
---|---|
show.bs.popover | Agad na gagana ang kaganapang ito kapag show tinawag ang paraan ng instance. |
ipinapakita.bs.popover | Ang kaganapang ito ay pinapagana kapag ang popover ay ginawang nakikita ng user (maghihintay na makumpleto ang mga transition ng CSS). |
hide.bs.popover | Agad na pinapagana ang kaganapang ito kapag hide tinawag na ang paraan ng instance. |
hidden.bs.popover | Ang kaganapang ito ay pinapagana kapag ang popover ay tapos nang itago mula sa user (maghihintay para sa mga transition ng CSS upang makumpleto). |
ipinasok.bs.popover | Ang kaganapang ito ay pinapagana pagkatapos ng show.bs.popover kaganapan kapag ang template ng popover ay naidagdag sa DOM. |
Magdagdag ng dismiss functionality sa lahat ng alertong mensahe gamit ang plugin na ito.
Kapag gumagamit ng isang .close
button, ito dapat ang unang anak ng .alert-dismissible
at walang text na nilalaman ang maaaring mauna dito sa markup.
Baguhin ito at iyon at subukang muli. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
Idagdag lang data-dismiss="alert"
sa iyong close button para awtomatikong magbigay ng alertong close functionality. Ang pagsasara ng alerto ay nag-aalis nito sa DOM.
Upang magamit ng iyong mga alerto ang animation kapag nagsasara, tiyaking mayroon na ang mga ito sa .fade
at mga .in
klase na nakalapat na sa kanila.
$().alert()
Gumagawa ng alerto sa pakikinig para sa mga kaganapan sa pag-click sa mga descendant na elemento na may data-dismiss="alert"
katangian. (Hindi kinakailangan kapag ginagamit ang auto-initialization ng data-api.)
$().alert('close')
Nagsasara ng alerto sa pamamagitan ng pag-alis nito sa DOM. Kung ang .fade
at mga .in
klase ay naroroon sa elemento, ang alerto ay maglalaho bago ito alisin.
Ang plugin ng alerto ng Bootstrap ay naglalantad ng ilang mga kaganapan para sa pag-hook sa pagpapaandar ng alerto.
Uri ng kaganapan | Paglalarawan |
---|---|
malapit.bs.alerto | Agad na gagana ang kaganapang ito kapag close tinawag ang paraan ng instance. |
sarado.bs.alerto | Ang kaganapang ito ay gagana kapag ang alerto ay sarado na (maghihintay para sa CSS transitions upang makumpleto). |
Gumawa ng higit pa gamit ang mga pindutan. Ang control button ay nagsasaad o lumikha ng mga pangkat ng mga button para sa higit pang mga bahagi tulad ng mga toolbar.
Ang Firefox ay nagpapatuloy sa mga estado ng kontrol ng form (kabawasan at pagsuri) sa mga pag-load ng pahina . Ang isang solusyon para dito ay ang paggamit autocomplete="off"
. Tingnan ang Mozilla bug #654072 .
Idagdag data-loading-text="Loading..."
upang gumamit ng estado ng paglo-load sa isang button.
Hindi na ginagamit ang feature na ito mula noong v3.3.5 at inalis na sa v4.
Para sa kapakanan ng demonstrasyon na ito, ginagamit namin ang data-loading-text
at $().button('loading')
, ngunit hindi lang iyon ang estado na magagamit mo. Tingnan ang higit pa tungkol dito sa ibaba sa $().button(string)
dokumentasyon .
Idagdag data-toggle="button"
para i-activate ang toggling sa iisang button.
.active
ataria-pressed="true"
Para sa mga pre-toggled na button, dapat mong idagdag ang .active
klase at ang aria-pressed="true"
attribute sa iyong button
sarili.
Idagdag data-toggle="buttons"
sa isang .btn-group
naglalaman ng checkbox o mga radio input upang paganahin ang toggling sa kani-kanilang mga istilo.
.active
Para sa mga paunang napiling opsyon, dapat mong idagdag ang .active
klase sa input ng iyong label
sarili.
Kung ang naka-check na estado ng isang checkbox button ay ina-update nang hindi nagpapagana ng isang click
kaganapan sa button (hal. sa pamamagitan <input type="reset">
ng o sa pamamagitan ng pagtatakda ng checked
property ng input), kakailanganin mong i-toggle ang .active
klase sa input ng iyong label
sarili.
$().button('toggle')
I-toggle ang estado ng push. Binibigyan ang pindutan ng hitsura na ito ay na-activate.
$().button('reset')
Nire-reset ang estado ng button - pinapalitan ang text sa orihinal na text. Ang pamamaraang ito ay asynchronous at bumabalik bago ang pag-reset ay aktwal na nakumpleto.
$().button(string)
Pinapalitan ang text sa anumang tinukoy na data na estado ng text.
Flexible na plugin na gumagamit ng ilang klase para sa madaling pag-uugali ng toggle.
Kinakailangan ng Collapse na maisama ang plugin ng mga transition sa iyong bersyon ng Bootstrap.
I-click ang mga button sa ibaba upang ipakita at itago ang isa pang elemento sa pamamagitan ng mga pagbabago sa klase:
.collapse
nagtatago ng nilalaman.collapsing
ay inilapat sa panahon ng mga transition.collapse.in
nagpapakita ng nilalamanMaaari kang gumamit ng isang link na may href
katangian, o isang pindutan na may data-target
katangian. Sa parehong mga kaso, ang data-toggle="collapse"
ay kinakailangan.
Palawakin ang default na pag-collapse na pag-uugali upang lumikha ng isang akurdyon na may bahagi ng panel.
Posible ring ipagpalit ang .panel-body
s sa .list-group
s.
Tiyaking idagdag aria-expanded
sa control element. Ang attribute na ito ay tahasang tumutukoy sa kasalukuyang estado ng collapsible na elemento sa mga screen reader at katulad na mga teknolohiyang pantulong. Kung ang collapsible na elemento ay sarado bilang default, dapat itong may halaga na aria-expanded="false"
. Kung itinakda mo na ang collapsible na elemento ay bukas bilang default gamit ang in
klase, itakdaaria-expanded="true"
na lang sa control. Awtomatikong i-toggle ng plugin ang attribute na ito batay sa kung nabuksan o isinara o hindi ang collapsible na elemento.
Bukod pa rito, kung ang iyong control element ay nagta-target ng iisang collapsible na elemento – ibig sabihin, ang data-target
attribute ay tumuturo sa isang id
selector – maaari kang magdagdag ng karagdagang aria-controls
attribute sa control element, na naglalaman ng id
ng collapsible na elemento. Ginagamit ng mga makabagong screen reader at katulad na mga teknolohiyang pantulong ang katangiang ito upang bigyan ang mga user ng karagdagang mga shortcut upang direktang mag-navigate sa mismong nako-collaps na elemento.
Gumagamit ang collapse plugin ng ilang klase upang mahawakan ang mabigat na pag-aangat:
.collapse
nagtatago ng nilalaman.collapse.in
nagpapakita ng nilalaman.collapsing
ay idinaragdag kapag nagsimula ang paglipat, at inalis kapag natapos na itoAng mga klase na ito ay matatagpuan sa component-animations.less
.
Idagdag lang data-toggle="collapse"
at a data-target
sa elemento para awtomatikong magtalaga ng kontrol ng isang collapsible na elemento. Tumatanggap ang data-target
attribute ng isang CSS selector para ilapat ang pag-collapse. Tiyaking idagdag ang klase collapse
sa collapsible na elemento. Kung gusto mo itong maging default na bukas, idagdag ang karagdagang klase in
.
Upang magdagdag ng tulad-accordion na pamamahala ng pangkat sa isang collapsible na kontrol, idagdag ang attribute ng data data-parent="#selector"
. Sumangguni sa demo upang makita ito sa pagkilos.
Paganahin nang manu-mano gamit ang:
Maaaring ipasa ang mga opsyon sa pamamagitan ng mga katangian ng data o JavaScript. Para sa mga katangian ng data, idagdag ang pangalan ng opsyon sa data-
, tulad ng sa data-parent=""
.
Pangalan | uri | default | paglalarawan |
---|---|---|---|
magulang | tagapili | mali | Kung may ibinigay na selector, isasara ang lahat ng collapsible na elemento sa ilalim ng tinukoy na parent kapag ipinakita ang collapsible na item na ito. (katulad ng tradisyonal na pag-uugali ng akurdyon - ito ay nakasalalay sa panel klase) |
magpalipat-lipat | boolean | totoo | I-toggle ang collapsible na elemento sa invocation |
.collapse(options)
Ina-activate ang iyong content bilang isang collapsible na elemento. Tumatanggap ng opsyonal na opsyon object
.
.collapse('toggle')
I-toggle ang isang nako-collaps na elemento sa ipinapakita o nakatago. Bumabalik sa tumatawag bago aktwal na naipakita o naitago ang nati-collaps na elemento (ibig sabihin, bago mangyari ang shown.bs.collapse
o hidden.bs.collapse
kaganapan).
.collapse('show')
Nagpapakita ng nati-collapse na elemento. Bumabalik sa tumatawag bago aktwal na naipakita ang collapsible na elemento (ibig sabihin, bago shown.bs.collapse
mangyari ang kaganapan).
.collapse('hide')
Itinatago ang isang collapsible na elemento. Bumabalik sa tumatawag bago pa talaga naitago ang collapsible na elemento (ibig sabihin, bago hidden.bs.collapse
mangyari ang kaganapan).
Ang collapse class ng Bootstrap ay naglalantad ng ilang mga kaganapan para sa hooking sa collapse functionality.
Uri ng kaganapan | Paglalarawan |
---|---|
show.bs.collapse | Agad na gagana ang kaganapang ito kapag show tinawag ang paraan ng instance. |
ipinapakita.bs.collapse | Ang kaganapang ito ay pinapagana kapag ang isang elemento ng pag-collapse ay ginawang nakikita ng user (maghihintay na makumpleto ang mga transition ng CSS). |
hide.bs.collapse | Ang kaganapang ito ay agad na pinapagana kapag ang hide pamamaraan ay tinawag na. |
hidden.bs.collapse | Ang kaganapang ito ay pinapagana kapag ang isang elemento ng pag-collapse ay naitago mula sa user (maghihintay na makumpleto ang mga transition ng CSS). |
Isang bahagi ng slideshow para sa pagbibisikleta sa mga elemento, tulad ng isang carousel. Hindi sinusuportahan ang mga nested carousel.
Ang bahagi ng carousel ay karaniwang hindi sumusunod sa mga pamantayan ng accessibility. Kung kailangan mong sumunod, mangyaring isaalang-alang ang iba pang mga opsyon para sa pagpapakita ng iyong nilalaman.
Eksklusibong ginagamit ng Bootstrap ang CSS3 para sa mga animation nito, ngunit hindi sinusuportahan ng Internet Explorer 8 at 9 ang mga kinakailangang katangian ng CSS. Kaya, walang slide transition animation kapag ginagamit ang mga browser na ito. Sinadya naming nagpasya na huwag isama ang mga fallback na nakabatay sa jQuery para sa mga transition.
Kailangang idagdag ang .active
klase sa isa sa mga slide. Kung hindi, hindi makikita ang carousel.
Ang .glyphicon .glyphicon-chevron-left
at .glyphicon .glyphicon-chevron-right
mga klase ay hindi kinakailangang kailangan para sa mga kontrol. Nagbibigay ang Bootstrap .icon-prev
at .icon-next
bilang mga simpleng alternatibong unicode.
Magdagdag ng mga caption sa iyong mga slide nang madali gamit ang .carousel-caption
elemento sa loob ng anumang .item
. Ilagay ang halos anumang opsyonal na HTML sa loob doon at awtomatiko itong ihahanay at ipo-format.
Ang mga carousel ay nangangailangan ng paggamit ng isang id
nasa pinakalabas na lalagyan (ang .carousel
) para gumana nang maayos ang mga kontrol ng carousel. Kapag nagdaragdag ng maraming carousel, o kapag nagpapalit ng carousel id
, tiyaking i-update ang mga nauugnay na kontrol.
Gumamit ng mga attribute ng data para madaling makontrol ang posisyon ng carousel. data-slide
tumatanggap ng mga keyword prev
o next
, na nagbabago sa posisyon ng slide na nauugnay sa kasalukuyang posisyon nito. Bilang kahalili, gamitin data-slide-to
upang ipasa ang isang raw slide index sa carousel data-slide-to="2"
, na naglilipat sa posisyon ng slide sa isang partikular na index na nagsisimula sa 0
.
Ginagamit ang data-ride="carousel"
attribute para markahan ang isang carousel bilang animating simula sa pag-load ng page. Hindi ito maaaring gamitin sa kumbinasyon ng (kalabisan at hindi kailangan) tahasang pagsisimula ng JavaScript ng parehong carousel.
Manu-manong tumawag sa carousel gamit ang:
Maaaring ipasa ang mga opsyon sa pamamagitan ng mga katangian ng data o JavaScript. Para sa mga katangian ng data, idagdag ang pangalan ng opsyon sa data-
, tulad ng sa data-interval=""
.
Pangalan | uri | default | paglalarawan |
---|---|---|---|
pagitan | numero | 5000 | Ang tagal ng oras upang maantala sa pagitan ng awtomatikong pagbibisikleta ng isang item. Kung mali, hindi awtomatikong iikot ang carousel. |
huminto | string | wala | "hover" | Kung nakatakda sa "hover" , ipo-pause ang pagbibisikleta ng carousel sa mouseenter at ipagpatuloy ang pagbibisikleta ng carousel sa mouseleave . Kung nakatakda sa null , hindi ito mapo-pause ng pag-hover sa carousel. |
balutin | boolean | totoo | Kung ang carousel ay dapat na tuluy-tuloy na umiikot o may matitigas na paghinto. |
keyboard | boolean | totoo | Kung dapat tumugon ang carousel sa mga kaganapan sa keyboard. |
.carousel(options)
Sinisimulan ang carousel gamit ang isang opsyonal na opsyon object
at magsisimulang umikot sa mga item.
.carousel('cycle')
Umiikot sa mga carousel item mula kaliwa hanggang kanan.
.carousel('pause')
Pinipigilan ang carousel mula sa pagbibisikleta sa mga item.
.carousel(number)
Iniikot ang carousel sa isang partikular na frame (batay sa 0, katulad ng isang array).
.carousel('prev')
Ikot sa nakaraang item.
.carousel('next')
Ikot sa susunod na item.
Ang klase ng carousel ng Bootstrap ay naglalantad ng dalawang kaganapan para sa pag-hook sa pagpapagana ng carousel.
Ang parehong mga kaganapan ay may mga sumusunod na karagdagang katangian:
direction
: Ang direksyon kung saan dumudulas ang carousel (alinman "left"
o "right"
).relatedTarget
: Ang elemento ng DOM na ini-slide sa lugar bilang aktibong item.Ang lahat ng mga kaganapan sa carousel ay pinaputok sa mismong carousel (ibig sabihin, sa <div class="carousel">
).
Uri ng kaganapan | Paglalarawan |
---|---|
slide.bs.carousel | Agad na gagana ang kaganapang ito kapag slide ginamit ang paraan ng instance. |
slid.bs.carousel | Ang kaganapang ito ay gagana kapag natapos na ng carousel ang paglipat ng slide nito. |
Ang affix plugin ay nag-toggle position: fixed;
sa on at off, na ginagaya ang epekto na natagpuan sa position: sticky;
. Ang subnavigation sa kanan ay isang live na demo ng affix plugin.
Gamitin ang affix plugin sa pamamagitan ng mga attribute ng data o mano-mano gamit ang sarili mong JavaScript. Sa parehong mga sitwasyon, dapat kang magbigay ng CSS para sa pagpoposisyon at lapad ng iyong nakadikit na nilalaman.
Tandaan: Huwag gamitin ang affix plugin sa isang elementong nasa isang medyo nakaposisyon na elemento, gaya ng hinila o itinulak na column, dahil sa isang Safari rendering bug .
Ang affix plugin ay nagpapalipat-lipat sa pagitan ng tatlong klase, bawat isa ay kumakatawan sa isang partikular na estado: .affix
, .affix-top
, at .affix-bottom
. Dapat mong ibigay ang mga istilo, maliban sa position: fixed;
on .affix
, para sa mga klaseng ito mismo (independiyente sa plugin na ito) upang mahawakan ang mga aktwal na posisyon.
Narito kung paano gumagana ang affix plugin:
.affix-top
upang ipahiwatig na ang elemento ay nasa pinakamataas na posisyon nito. Sa puntong ito walang pagpoposisyon ng CSS ang kinakailangan..affix
pumapalit .affix-top
at nagtatakda position: fixed;
(ibinigay ng Bootstrap's CSS)..affix
ng .affix-bottom
. Dahil ang mga offset ay opsyonal, ang pagtatakda ng isa ay nangangailangan sa iyo na itakda ang naaangkop na CSS. Sa kasong ito, magdagdag position: absolute;
kung kinakailangan. Ang plugin ay gumagamit ng data attribute o JavaScript na opsyon upang matukoy kung saan ipoposisyon ang elemento mula doon.Sundin ang mga hakbang sa itaas upang itakda ang iyong CSS para sa alinman sa mga opsyon sa paggamit sa ibaba.
Para madaling magdagdag ng gawi ng affix sa anumang elemento, idagdag lang data-spy="affix"
sa elementong gusto mong tiktikan. Gumamit ng mga offset upang tukuyin kung kailan i-toggle ang pag-pin ng isang elemento.
Tawagan ang affix plugin sa pamamagitan ng JavaScript:
Maaaring ipasa ang mga opsyon sa pamamagitan ng mga katangian ng data o JavaScript. Para sa mga katangian ng data, idagdag ang pangalan ng opsyon sa data-
, tulad ng sa data-offset-top="200"
.
Pangalan | uri | default | paglalarawan |
---|---|---|---|
offset | numero | function | bagay | 10 | Mga pixel na i-offset mula sa screen kapag kinakalkula ang posisyon ng scroll. Kung ang isang numero ay ibinigay, ang offset ay ilalapat sa parehong itaas at ibabang direksyon. Upang magbigay ng natatangi, ibaba at itaas na offset, magbigay lang ng object offset: { top: 10 } o offset: { top: 10, bottom: 5 } . Gumamit ng isang function kapag kailangan mong dynamic na kalkulahin ang isang offset. |
target | tagapili | node | elemento ng jQuery | ang window bagay |
Tinutukoy ang target na elemento ng affix. |
.affix(options)
Ina-activate ang iyong nilalaman bilang nakadikit na nilalaman. Tumatanggap ng opsyonal na opsyon object
.
.affix('checkPosition')
Muling kinakalkula ang estado ng affix batay sa mga sukat, posisyon, at posisyon ng pag-scroll ng mga nauugnay na elemento. Ang .affix
, .affix-top
, at .affix-bottom
mga klase ay idinaragdag o inalis mula sa nakadikit na nilalaman ayon sa bagong estado. Ang pamamaraang ito ay kailangang tawagan sa tuwing babaguhin ang mga sukat ng nakadikit na nilalaman o ang target na elemento, upang matiyak ang tamang pagpoposisyon ng nakadikit na nilalaman.
Ang affix plugin ng Bootstrap ay naglalantad ng ilang mga kaganapan para sa hooking sa affix functionality.
Uri ng kaganapan | Paglalarawan |
---|---|
affix.bs.affix | Ang kaganapang ito ay gumagana kaagad bago ang elemento ay nakakabit. |
nilagyan.bs.affix | Ang kaganapang ito ay pinapagana pagkatapos na mailagay ang elemento. |
affix-top.bs.affix | Ang kaganapang ito ay gumagana kaagad bago ang elemento ay nakakabit sa itaas. |
nilagyan-top.bs.affix | Ang kaganapang ito ay pinapagana pagkatapos na ang elemento ay nakakabit sa itaas. |
affix-bottom.bs.affix | Ang kaganapang ito ay gumagana kaagad bago ang elemento ay nakakabit sa ibaba. |
nakakabit-ibaba.bs.affix | Ang kaganapang ito ay pinapagana pagkatapos na ang elemento ay nakakabit sa ibaba. |