JavaScript
Ihatag ang mga sangkap sa Bootstrap sa kinabuhi nga adunay kapin sa usa ka dosena nga naandan nga jQuery plugins. Dali iapil silang tanan, o usa-usa.
Ihatag ang mga sangkap sa Bootstrap sa kinabuhi nga adunay kapin sa usa ka dosena nga naandan nga jQuery plugins. Dali iapil silang tanan, o usa-usa.
Ang mga plugins mahimong iapil sa tagsa-tagsa (gamit ang mga indibidwal nga *.js
file sa Bootstrap), o tanan sa usa ka higayon (gamit bootstrap.js
o ang minified bootstrap.min.js
).
Ang duha bootstrap.js
ug bootstrap.min.js
naglangkob sa tanan nga mga plugins sa usa ka file. Iapil ang usa lamang.
Ang ubang mga plugins ug CSS component nagdepende sa ubang mga plugins. Kung gi-apil nimo ang mga plugin nga tagsa-tagsa, siguruha nga susihon kini nga mga dependency sa mga doc. Timan-i usab nga ang tanan nga mga plugins nagdepende sa jQuery (kini nagpasabut nga ang jQuery kinahanglan ilakip sa wala pa ang mga file sa plugin). Konsultaha ang amongbower.json
aron makita kung unsang mga bersyon sa jQuery ang gisuportahan.
Mahimo nimong gamiton ang tanan nga mga plugin sa Bootstrap nga puro pinaagi sa markup API nga wala magsulat usa ka linya sa JavaScript. Kini ang una nga klase nga API sa Bootstrap ug kinahanglan nga imong una nga konsiderahon kung mogamit usa ka plugin.
Ingon niana, sa pipila ka mga sitwasyon mahimo’g gusto nga i-off kini nga pagpaandar. Busa, naghatag usab kami og abilidad sa pag-disable sa data attribute API pinaagi sa pag-unbinding sa tanang panghitabo sa dokumento nga namespaced sa data-api
. Kini tan-awon sama niini:
Sa laing paagi, aron ma-target ang usa ka piho nga plugin, ilakip lang ang ngalan sa plugin ingon usa ka namespace kauban ang data-api namespace sama niini:
Ayaw paggamit ug data attributes gikan sa daghang plugins sa samang elemento. Pananglitan, ang usa ka buton dili mahimong adunay tooltip ug i-toggle ang usa ka modal. Aron mahimo kini, gamita ang usa ka elemento sa pagputos.
Nagtuo usab kami nga kinahanglan nimo nga magamit ang tanan nga mga plugin sa Bootstrap nga puro pinaagi sa JavaScript API. Ang tanang publikong API kay single, chainable nga mga pamaagi, ug ibalik ang koleksyon nga giaksyonan.
Ang tanan nga mga pamaagi kinahanglan nga modawat sa usa ka opsyonal nga butang nga kapilian, usa ka hilo nga nagpunting sa usa ka partikular nga pamaagi, o wala (nga nagpasiugda sa usa ka plugin nga adunay default nga pamatasan):
Ang matag plugin nagbutyag usab sa iyang hilaw nga tigtukod sa usa ka Constructor
kabtangan: $.fn.popover.Constructor
. Kung gusto nimo makakuha usa ka partikular nga pananglitan sa plugin, kuhaa kini direkta gikan sa usa ka elemento: $('[rel="popover"]').data('popover')
.
Mahimo nimong usbon ang default setting para sa usa ka plugin pinaagi sa pag-usab sa Constructor.DEFAULTS
butang sa plugin:
Usahay gikinahanglan ang paggamit sa Bootstrap plugins sa ubang mga UI frameworks. Niini nga mga kahimtang, ang panagbangga sa namespace usahay mahitabo. Kung mahitabo kini, mahimo nimong tawagan .noConflict
ang plugin nga gusto nimo ibalik ang kantidad.
Naghatag ang Bootstrap og kostumbre nga mga panghitabo alang sa kadaghanan sa mga talagsaon nga aksyon sa mga plugin. Kasagaran, kini moabut sa usa ka infinitive ug past participle nga porma - diin ang infinitive (ex. show
) ma-trigger sa pagsugod sa usa ka panghitabo, ug ang past participle nga porma niini (ex. shown
) ma-trigger sa pagkahuman sa usa ka aksyon.
Ingon sa 3.0.0, ang tanan nga mga panghitabo sa Bootstrap gi-namespaced.
Ang tanan nga infinitive nga mga panghitabo naghatag preventDefault
gamit. Naghatag kini og abilidad sa pagpahunong sa pagpatuman sa usa ka aksyon sa dili pa kini magsugod.
Ang bersyon sa matag usa sa Bootstrap's jQuery plugins mahimong ma-access pinaagi sa VERSION
kabtangan sa plugin's constructor. Pananglitan, alang sa tooltip plugin:
Ang mga plugins sa Bootstrap dili mabalik ilabi na nga nindot kung ang JavaScript gi-disable. Kung nagpakabana ka bahin sa kasinatian sa gumagamit sa kini nga kaso, gamita <noscript>
aron ipasabut ang sitwasyon (ug kung giunsa pag-usab ang JavaScript) sa imong mga tiggamit, ug / o pagdugang sa imong kaugalingon nga naandan nga mga fallback.
Ang Bootstrap dili opisyal nga nagsuporta sa mga librarya sa JavaScript sa ikatulo nga partido sama sa Prototype o jQuery UI. Bisan pa .noConflict
ug namespaced nga mga panghitabo, mahimong adunay mga problema sa pagpahiangay nga kinahanglan nimo nga ayohon sa imong kaugalingon.
Alang sa yano nga mga epekto sa transisyon, ilakip transition.js
kausa kauban ang ubang mga file sa JS. Kung gigamit nimo ang gi-compile (o gi-minified) bootstrap.js
, dili na kinahanglan nga ilakip kini - naa na kini.
Ang Transition.js usa ka batakang katabang alang sa transitionEnd
mga panghitabo ingon man usa ka CSS transition emulator. Gigamit kini sa ubang mga plugins sa pagsusi sa CSS transition support ug sa pagdakop sa nagbitay nga mga transisyon.
Ang mga transisyon mahimong ma-disable sa tibuok kalibutan gamit ang mosunod nga JavaScript snippet, nga kinahanglang mahitabo human ma-load ang transition.js
( bootstrap.js
o bootstrap.min.js
, ingon nga mahitabo):
Ang mga modala gipa-streamline, apan flexible, dialog prompt nga adunay minimum nga gikinahanglan nga gamit ug mga smart default.
Siguruha nga dili magbukas sa usa ka modal samtang ang lain makita pa. Ang pagpakita og labaw sa usa ka modal sa usa ka higayon nagkinahanglan og custom code.
Sulayi kanunay nga ibutang ang HTML code sa modal sa usa ka taas nga lebel nga posisyon sa imong dokumento aron malikayan ang ubang mga sangkap nga makaapekto sa hitsura ug/o gamit sa modal.
Adunay pipila ka mga pasidaan bahin sa paggamit sa mga modal sa mga mobile device. Tan-awa ang among browser support docs para sa mga detalye.
Tungod sa kung giunsa paghubit sa HTML5 ang mga semantiko niini, ang autofocus
HTML attribute walay epekto sa Bootstrap modals. Aron makab-ot ang parehas nga epekto, gamita ang pipila ka naandan nga JavaScript:
Usa ka gihubad nga modal nga adunay header, lawas, ug hugpong sa mga aksyon sa footer.
I-toggle ang usa ka modal pinaagi sa JavaScript pinaagi sa pag-klik sa buton sa ubos. Kini mag-slide paubos ug mawala gikan sa ibabaw sa panid.
Siguruha nga idugang role="dialog"
ug aria-labelledby="..."
, nga maghisgot sa modal nga titulo, sa .modal
, ug role="document"
sa .modal-dialog
kaugalingon.
Dugang pa, mahimo kang maghatag ug deskripsyon sa imong modal dialog sa aria-describedby
on .modal
.
Ang pag-embed sa mga video sa YouTube sa modals nanginahanglan dugang nga JavaScript nga wala sa Bootstrap aron awtomatiko nga ihunong ang playback ug daghan pa. Tan-awa kining makatabang nga post sa Stack Overflow alang sa dugang nga impormasyon.
Ang mga modala adunay duha ka opsyonal nga gidak-on, nga magamit pinaagi sa mga klase sa modifier nga ibutang sa usa ka .modal-dialog
.
Alang sa mga modals nga yano nga makita imbes nga mawala aron makita, kuhaa ang .fade
klase gikan sa imong modal markup.
Aron mapahimuslan ang Bootstrap grid system sulod sa usa ka modal, salag lang .row
sulod sa .modal-body
ug unya gamita ang normal nga grid system nga mga klase.
Adunay usa ka hugpong sa mga buton nga ang tanan nag-aghat sa parehas nga modal, nga adunay gamay nga lainlaing mga sulud? Paggamit event.relatedTarget
ug HTML nga mga data-*
hiyas (posible pinaagi sa jQuery ) aron lainlain ang mga sulod sa modal depende kung unsang buton ang gi-klik. Tan-awa ang Modal Events docs para sa mga detalye sa relatedTarget
,
Ang modal plugin nag-toggle sa imong tinago nga sulud kung gikinahanglan, pinaagi sa mga hiyas sa datos o JavaScript. Nagdugang usab .modal-open
kini sa <body>
pag-override sa default nga pamatasan sa pag-scroll ug nagmugna usa ka .modal-backdrop
aron mahatagan usa ka lugar sa pag-klik alang sa pagtangtang sa gipakita nga modals kung nag-klik sa gawas sa modal.
Pag-aktibo sa usa ka modal nga wala nagsulat sa JavaScript. Ibutang data-toggle="modal"
sa usa ka elemento sa controller, sama sa usa ka buton, uban sa usa ka data-target="#foo"
o href="#foo"
sa target sa usa ka piho nga modal sa toggle.
Pagtawag og modal nga adunay id myModal
nga adunay usa ka linya sa JavaScript:
Ang mga kapilian mahimong ipasa pinaagi sa mga hiyas sa datos o JavaScript. Para sa data attributes, idugang ang opsyon nga ngalan sa data-
, sama sa data-backdrop=""
.
Ngalan | matang | default | paghulagway |
---|---|---|---|
backdrop | boolean o ang string'static' |
tinuod | Naglakip sa usa ka elemento sa modal-backdrop. Sa laing paagi, ipiho static ang usa ka backdrop nga wala magsira sa modal sa pag-klik. |
keyboard | boolean | tinuod | Pagsira sa modal kung ang escape key gipugos |
ipakita | boolean | tinuod | Nagpakita sa modal kung gisugdan. |
hilit nga | dalan | bakak | Kini nga opsyon wala na gamita sukad sa v3.3.0 ug gitangtang sa v4. Among girekomenda nga gamiton ang templating sa kilid sa kliyente o usa ka balangkas nga nagbugkos sa datos, o pagtawag sa jQuery.load sa imong kaugalingon. Kung gihatag ang usa ka hilit nga URL, ang sulud ikarga usa ka higayon pinaagi sa pamaagi sa jQuery |
.modal(options)
Gi-aktibo ang imong sulud ingon usa ka modal. Modawat ug opsyonal nga mga kapilian object
.
.modal('toggle')
Manwal nga mag-toggle sa usa ka modal. Mibalik sa nagtawag sa wala pa ang modala sa tinuud gipakita o gitago (ie sa wala pa mahitabo ang shown.bs.modal
o hidden.bs.modal
panghitabo).
.modal('show')
Manwal nga nagbukas sa usa ka modal. Mibalik sa nagtawag sa wala pa ipakita ang modal (ie sa wala pa shown.bs.modal
mahitabo ang panghitabo).
.modal('hide')
Manwal nga nagtago sa usa ka modal. Mibalik sa nagtawag sa wala pa ang modala sa tinuud gitago (ie sa wala pa hidden.bs.modal
mahitabo ang panghitabo).
.modal('handleUpdate')
I-adjust pag-usab ang pagpoposisyon sa modal aron makontra ang usa ka scrollbar kung adunay makita, nga maghimo sa modal nga molukso sa wala.
Gikinahanglan lamang kung ang gitas-on sa modal mausab samtang kini bukas.
Ang modal nga klase sa Bootstrap nagbutyag sa pipila ka mga panghitabo alang sa pag-hook sa modal functionality.
Ang tanan nga modal nga mga panghitabo gipabuto sa modal mismo (ie sa <div class="modal">
).
Uri sa Hitabo | Deskripsyon |
---|---|
show.bs.modal | Kini nga panghitabo nagdilaab dayon kung ang show pamaagi sa pananglitan gitawag. Kung tungod sa usa ka pag-klik, ang na-klik nga elemento magamit ingon nga relatedTarget kabtangan sa panghitabo. |
gipakita.bs.modal | Kini nga panghitabo gipabuto kung ang modal nahimo nga makita sa tiggamit (maghulat nga makompleto ang mga transisyon sa CSS). Kung tungod sa usa ka pag-klik, ang na-klik nga elemento magamit ingon nga relatedTarget kabtangan sa panghitabo. |
hide.bs.modal | Kini nga panghitabo gipabuto dayon kung ang hide pamaagi sa pananglitan gitawag na. |
hidden.bs.modal | Kini nga panghitabo gipabuto kung ang modal nahuman na nga gitago gikan sa tiggamit (maghulat nga makompleto ang mga transisyon sa CSS). |
loaded.bs.modal | Kini nga panghitabo gipabuto kung ang modal nagkarga sa sulud gamit ang remote kapilian. |
Idugang ang mga dropdown menu sa halos bisan unsang butang gamit kining yano nga plugin, lakip ang navbar, mga tab, ug mga pildoras.
Pinaagi sa data attributes o JavaScript, ang dropdown plugin mo-toggle sa tinago nga content (dropdown menus) pinaagi sa pag-toggle sa .open
klase sa parent list item.
Sa mga mobile device, ang pag-abli sa usa ka dropdown nagdugang usa .dropdown-backdrop
ka lugar sa pag-tap para sa pagsira sa mga dropdown menu kung nag-tap sa gawas sa menu, usa ka kinahanglanon alang sa tukma nga suporta sa iOS. Kini nagpasabot nga ang pagbalhin gikan sa usa ka bukas nga dropdown menu ngadto sa lain nga dropdown menu nagkinahanglan og dugang nga pag-tap sa mobile.
Pahinumdom: Ang data-toggle="dropdown"
hiyas gisaligan alang sa pagsira sa mga dropdown menu sa lebel sa aplikasyon, mao nga maayong ideya nga gamiton kini kanunay.
Idugang data-toggle="dropdown"
sa usa ka link o buton aron i-toggle ang dropdown.
Aron magpabiling buo ang mga URL gamit ang mga buton sa link, gamita ang data-target
attribute imbes nga href="#"
.
Tawga ang mga dropdown pinaagi sa JavaScript:
data-toggle="dropdown"
gikinahanglan paDili igsapayan kung imong tawagan ang imong dropdown pinaagi sa JavaScript o sa baylo nga gamiton ang data-api, data-toggle="dropdown"
kinahanglan kanunay nga naa sa elemento sa pag-trigger sa dropdown.
Wala
$().dropdown('toggle')
I-toggle ang dropdown menu sa gihatag nga navbar o tabbed navigation.
Ang tanan nga dropdown nga mga panghitabo gipabuto sa .dropdown-menu
elemento sa ginikanan.
Ang tanan nga dropdown nga mga panghitabo adunay usa ka relatedTarget
kabtangan, kansang kantidad mao ang toggling anchor nga elemento.
Uri sa Hitabo | Deskripsyon |
---|---|
show.bs.dropdown | Kini nga panghitabo modilaab dayon kung ang paagi sa pagpakita nga pananglitan gitawag. |
gipakita.bs.dropdown | Kini nga panghitabo gipabuto kung ang dropdown nahimo nga makita sa tiggamit (maghulat alang sa mga transisyon sa CSS, aron makompleto). |
hide.bs.dropdown | Kini nga panghitabo gipabuto dayon kung ang paagi sa pagtago sa pananglitan gitawag na. |
hidden.bs.dropdown | Kini nga panghitabo gipabuto kung ang dropdown nahuman na nga gitago gikan sa user (maghulat sa mga transisyon sa CSS, aron makompleto). |
Ang ScrollSpy plugin kay para sa awtomatikong pag-update sa mga target sa nav base sa scroll position. I-scroll ang dapit ubos sa navbar ug tan-awa ang aktibong kausaban sa klase. Ang dropdown sub nga mga butang i-highlight usab.
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi sa wala pa sila nabaligya qui. Tumblr farm-to-table nga mga katungod sa bisikleta bisan unsa. Anim nga keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui basin wala ka pa makadungog niini ug cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
Veniam marfa mustache skateboard, adipisicing fugit velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat upat ka loko nisi, ea helvetica nulla carles. Gitattoo nga cosby sweater food truck, quis non freegan vinyl ni mcsweeney. Lo-fi wes anderson +1 sartorial. Si Carles nga dili aesthetic nga ehersisyo quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.
Espesye sa tanom nga bulak ang Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. Taas nga kinabuhi id vinyl, echo park consequat quis aliquip banh mi pitchfork. Ang Vero VHS kay adipisicing. Consectetur uban DIY mini messenger bag. Cred ex in, malungtarong 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 bisan unsa nga delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats lagmit wala nimo nadungog bahin nila consequat hoodie gluten-free lo-fi fap aliquip. Laboure elit placeat sa wala pa sila mabaligya, 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 mini commodo ullamco thundercats.
Ang mga link sa Navbar kinahanglan adunay masulbad nga mga target sa id. Pananglitan, <a href="#home">home</a>
kinahanglan nga katumbas sa usa ka butang sa DOM sama sa <div id="home"></div>
.
:visible
nga mga elemento gibalewalaAng mga target nga elemento nga dili :visible
sumala sa jQuery ibaliwala ug ang ilang mga katugbang nga nav nga mga butang dili gyud ma-highlight.
Bisan unsa pa ang pamaagi sa pagpatuman, ang scrollspy nanginahanglan sa paggamit sa position: relative;
elemento nga imong gipaniid. Sa kadaghanan nga mga kaso kini ang <body>
. Kung mag-scrollspy sa mga elemento gawas sa <body>
, siguroha nga adunay usa ka height
set ug overflow-y: scroll;
magamit.
Aron dali nga makadugang sa scrollspy nga kinaiya sa imong topbar navigation, idugang data-spy="scroll"
sa elemento nga gusto nimong espiya (kasagaran kini mao ang <body>
). Dayon idugang ang data-target
attribute nga adunay ID o klase sa ginikanan nga elemento sa bisan unsang .nav
bahin sa Bootstrap.
Human sa pagdugang position: relative;
sa imong CSS, tawga ang scrollspy pinaagi sa JavaScript:
.scrollspy('refresh')
Kung gigamit ang scrollspy kauban ang pagdugang o pagtangtang sa mga elemento gikan sa DOM, kinahanglan nimo nga tawagan ang pamaagi sa pag-refresh sama niini:
Ang mga kapilian mahimong ipasa pinaagi sa mga hiyas sa datos o JavaScript. Para sa data attributes, idugang ang opsyon nga ngalan sa data-
, sama sa data-offset=""
.
Ngalan | matang | default | paghulagway |
---|---|---|---|
offset | numero | 10 | Ang mga pixel aron ma-offset gikan sa taas kung kalkulado ang posisyon sa scroll. |
Uri sa Hitabo | Deskripsyon |
---|---|
activate.bs.scrollspy | Kini nga panghitabo modilaab sa matag higayon nga ang usa ka bag-ong butang ma-activate sa scrollspy. |
Idugang ang dali, dinamikong pag-andar sa tab sa pagbalhin pinaagi sa mga pane sa lokal nga sulud, bisan pinaagi sa mga dropdown menu. Ang mga nested tab dili suportado.
Hilaw nga denim tingali wala ka nakadungog bahin kanila nga maong nga shorts nga Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex nukos. Ibutang ang 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.
Kini nga plugin nagpalapad sa tabbed navigation component aron makadugang sa tabbable nga mga lugar.
I-enable ang mga tab nga tab pinaagi sa JavaScript (matag tab kinahanglan nga i-activate sa tagsa-tagsa):
Mahimo nimong ma-aktibo ang indibidwal nga mga tab sa daghang mga paagi:
Mahimo nimong i-aktibo ang usa ka tab o pildoras nga nabigasyon nga wala’y pagsulat sa bisan unsang JavaScript pinaagi lamang sa pagpiho data-toggle="tab"
o data-toggle="pill"
sa usa ka elemento. Ang pagdugang sa nav
ug nav-tabs
mga klase sa tab ul
magamit ang Bootstrap tab styling , samtang ang pagdugang sa nav
ug nav-pills
mga klase magamit ang pill styling .
Aron mawala ang mga tab, idugang .fade
ang matag usa .tab-pane
. Ang una nga tab pane kinahanglan usab .in
nga maghimo sa una nga sulud nga makita.
$().tab
Nag-aktibo sa usa ka elemento sa tab ug sulud sa sulud. Ang tab kinahanglan adunay usa data-target
o usa ka href
target sa usa ka sudlanan nga node sa DOM. Sa mga pananglitan sa ibabaw, ang mga tab mao ang <a>
s nga adunay mga data-toggle="tab"
hiyas.
.tab('show')
Gipili ang gihatag nga tab ug gipakita ang kauban nga sulud niini. Ang bisan unsang lain nga tab nga gipili kaniadto mahimong dili mapili ug ang kauban nga sulud niini gitago. Mibalik sa nagtawag sa wala pa ipakita ang tab pane (ie sa wala pa shown.bs.tab
mahitabo ang panghitabo).
Kung nagpakita ug bag-ong tab, ang mga panghitabo mobuto sa mosunod nga han-ay:
hide.bs.tab
(sa kasamtangan nga aktibo nga tab)show.bs.tab
(sa tab nga ipakita)hidden.bs.tab
(sa miaging aktibo nga tab, parehas sa alang sa hide.bs.tab
panghitabo)shown.bs.tab
(sa bag-ong-aktibo nga bag-o lang gipakita nga tab, parehas sa alang sa show.bs.tab
panghitabo)Kung walay tab nga aktibo na, ang hide.bs.tab
ug ang hidden.bs.tab
mga panghitabo dili ipabuto.
Uri sa Hitabo | Deskripsyon |
---|---|
show.bs.tab | Kini nga panghitabo nagdilaab sa tab show, apan sa wala pa ipakita ang bag-ong tab. Gamita event.target ug event.relatedTarget i-target ang aktibo nga tab ug ang miaging aktibo nga tab (kung naa) matag usa. |
gipakita.bs.tab | Kini nga panghitabo nagdilaab sa tab show pagkahuman gipakita ang usa ka tab. Gamita event.target ug event.relatedTarget i-target ang aktibo nga tab ug ang miaging aktibo nga tab (kung naa) matag usa. |
hide.bs.tab | Kini nga panghitabo mobuto kung ang usa ka bag-ong tab ipakita (ug sa ingon ang miaging aktibo nga tab kinahanglan itago). Gamita event.target ug event.relatedTarget i-target ang kasamtangan nga aktibo nga tab ug ang bag-o nga dili madugay nga mahimong aktibo nga tab, matag usa. |
tago.bs.tab | Kini nga panghitabo nagdilaab human ang usa ka bag-ong tab gipakita (ug sa ingon ang miaging aktibo nga tab gitago). Gamita event.target ug event.relatedTarget i-target ang miaging aktibo nga tab ug ang bag-ong aktibo nga tab, matag usa. |
Nadasig sa maayo kaayo nga jQuery.tipsy plugin nga gisulat ni Jason Frame; Ang mga tooltip usa ka updated nga bersyon, nga wala magsalig sa mga hulagway, naggamit sa CSS3 para sa mga animation, ug data-attributes alang sa lokal nga pagtipig sa titulo.
Ang mga tooltip nga adunay zero-length nga mga titulo wala gayud ipakita.
Pag-hover sa mga link sa ubos aron makita ang mga tooltip:
Tight pants next level keffiyeh basin wala pa nimo nadunggan. Photo booth bungot hilaw nga denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, ang fixie ni mcsweeney nga malungtaron nga quinoa 8-bit american nga sapot adunay terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, upat ka loko mcsweeney's cleanse vegan chambray. Usa ka tinuod nga ironic artisan bisan unsa nga keytar , scenester farm-to-table banksy Austin twitter nagdumala sa freegan cred raw denim single-origin coffee viral.
Upat ka mga kapilian ang magamit: taas, tuo, ubos, ug wala nga linya.
Alang sa mga rason sa performance, ang Tooltip ug Popover data-apis kay opt-in, nagpasabot nga ikaw mismo ang mag-initialize niini .
Usa ka paagi sa pagsugod sa tanan nga mga tooltip sa usa ka panid mao ang pagpili niini pinaagi sa ilang mga data-toggle
hiyas:
Ang tooltip plugin nagmugna og sulod ug markup sa panginahanglan, ug sa default nagbutang sa mga tooltip human sa ilang trigger nga elemento.
I-trigger ang tooltip pinaagi sa JavaScript:
Ang gikinahanglan nga markup para sa tooltip kay usa lang ka data
attribute ug title
sa HTML nga elemento gusto nimo nga naay tooltip. Ang nahimo nga markup sa usa ka tooltip kay yano ra, bisan kung kini nanginahanglan usa ka posisyon (sa default, gitakda top
sa plugin).
Usahay gusto nimong idugang ang tooltip sa usa ka hyperlink nga nagputos sa daghang linya. Ang default nga kinaiya sa tooltip plugin mao ang pagsentro niini nga pinahigda ug patindog. Idugang white-space: nowrap;
sa imong mga angkla aron malikayan kini.
Kung mogamit mga tooltip sa mga elemento sa sulod sa usa .btn-group
o usa .input-group
, o sa mga elemento nga may kalabotan sa lamesa ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, <tfoot>
), kinahanglan nimo nga ipiho ang kapilian container: 'body'
(gidokumento sa ubos) aron malikayan ang dili gusto nga mga epekto (sama sa elemento nga nagkadako ug/ o mawad-an sa mga lingin nga suok niini kung ang tooltip ma-trigger).
Alang sa mga tiggamit nga nag-navigate gamit ang keyboard, ug labi na ang mga tiggamit sa mga teknolohiya nga makatabang, kinahanglan nimo nga idugang ang mga tooltip sa mga elemento nga ma-focus sa keyboard sama sa mga link, kontrol sa porma, o bisan unsang arbitraryong elemento nga adunay usa ka tabindex="0"
kinaiya.
Aron makadugang ug tooltip sa usa disabled
o .disabled
elemento, ibutang ang elemento sa sulod sa usa <div>
ug gamita na <div>
hinuon ang tooltip.
Ang mga kapilian mahimong ipasa pinaagi sa mga hiyas sa datos o JavaScript. Para sa data attributes, idugang ang opsyon nga ngalan sa data-
, sama sa data-animation=""
.
Ngalan | Matang | Default | Deskripsyon |
---|---|---|---|
animation | boolean | tinuod | Ibutang ang CSS fade transition sa tooltip |
sudlanan | hilo | bakak | bakak | Gidugang ang tooltip sa usa ka piho nga elemento. Pananglitan: |
paglangan | numero | butang | 0 | Paglangan sa pagpakita ug pagtago sa tooltip (ms) - dili magamit sa manual trigger type Kung adunay gihatag nga numero, ang paglangan magamit sa parehas nga pagtago/pagpakita Ang istruktura sa butang mao ang: |
html | boolean | bakak | Isulod ang HTML sa tooltip. Kung bakak, ang pamaagi sa jQuery text gamiton sa pagsal-ot sa sulud sa DOM. Gamit ug text kung nabalaka ka bahin sa mga pag-atake sa XSS. |
pagbutang | hilo | function | 'ibabaw' | Unsaon pagpahimutang sa tooltip - ibabaw | ubos | wala | husto | awto. Kung ang usa ka function gigamit aron mahibal-an ang pagbutang, kini gitawag nga adunay tooltip nga DOM node ingon ang una nga argumento ug ang hinungdan nga elemento nga DOM node ingon ikaduha. Ang |
tigpili | hilo | bakak | Kung gihatag ang usa ka tigpili, ang mga butang sa tooltip itugyan sa gitakda nga mga target. Sa praktis, kini gigamit aron makahimo sa dinamikong HTML nga sulod nga adunay mga tooltip nga idugang. Tan-awa kini ug usa ka pananglitan nga impormatibo . |
template | hilo | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
Base HTML nga gamiton sa paghimo sa tooltip. Ang tooltip's
Ang labing gawas nga elemento sa wrapper kinahanglan adunay |
titulo | hilo | function | '' | Default nga bili sa titulo kung wala ang Kung gihatag ang usa ka function, tawgon kini kauban ang |
trigger | hilo | 'hover focus' | Giunsa pag-trigger ang tooltip - pag-klik | hover | focus | manwal. Mahimo nimong ipasa ang daghang mga trigger; ibulag sila sa usa ka luna. manual dili mahimong ikombinar sa bisan unsa nga lain nga trigger. |
viewport | hilo | butang | function | { selector: 'lawas', padding: 0 } | Gitipigan ang tooltip sulod sa mga utlanan niini nga elemento. Pananglitan: Kung ang usa ka function gihatag, kini gitawag nga adunay hinungdan nga elemento nga DOM node ingon nga bugtong argumento niini. Ang |
Ang mga kapilian alang sa indibidwal nga mga tooltip mahimong ipiho pinaagi sa paggamit sa mga hiyas sa datos, ingon sa gipatin-aw sa ibabaw.
$().tooltip(options)
Naglakip sa tigdumala sa tooltip sa usa ka koleksyon sa elemento.
.tooltip('show')
Nagpadayag sa tooltip sa usa ka elemento. Mibalik sa nagtawag sa wala pa ipakita ang tooltip (ie sa wala pa shown.bs.tooltip
mahitabo ang panghitabo). Giisip kini nga "manwal" nga pag-trigger sa tooltip. Ang mga tooltip nga adunay zero-length nga mga titulo wala gayud ipakita.
.tooltip('hide')
Nagtago sa tooltip sa usa ka elemento. Mibalik sa nagtawag sa wala pa ang tooltip gitago (ie sa wala pa hidden.bs.tooltip
mahitabo ang panghitabo). Giisip kini nga "manwal" nga pag-trigger sa tooltip.
.tooltip('toggle')
I-toggle ang tooltip sa usa ka elemento. Mibalik sa nagtawag sa wala pa ang tooltip gipakita o gitago (ie sa wala pa mahitabo ang shown.bs.tooltip
o hidden.bs.tooltip
panghitabo). Giisip kini nga "manwal" nga pag-trigger sa tooltip.
.tooltip('destroy')
Nagtago ug nagguba sa tooltip sa usa ka elemento. Ang mga tooltip nga naggamit sa delegasyon (nga gimugna gamit ang selector
opsyon ) dili mahimong tagsa-tagsa nga gub-on sa descendant trigger elements.
Uri sa Hitabo | Deskripsyon |
---|---|
show.bs.tooltip | Kini nga panghitabo nagdilaab dayon kung ang show pamaagi sa pananglitan gitawag. |
gipakita.bs.tooltip | Kini nga panghitabo gipabuto kung ang tooltip nahimo nang makita sa tiggamit (maghulat nga makompleto ang mga transisyon sa CSS). |
hide.bs.tooltip | Kini nga panghitabo gipabuto dayon kung ang hide pamaagi sa pananglitan gitawag na. |
hidden.bs.tooltip | Kini nga panghitabo gipabuto kung ang tooltip nahuman na nga gitago gikan sa tiggamit (maghulat nga makompleto ang mga transisyon sa CSS). |
gisulod.bs.tooltip | Kini nga panghitabo gipabuto pagkahuman sa show.bs.tooltip panghitabo kung ang template sa tooltip gidugang sa DOM. |
Idugang ang gagmay nga mga overlay sa sulud, sama sa naa sa iPad, sa bisan unsang elemento alang sa pagbutang sa sekundaryong impormasyon.
Ang mga Popover kansang titulo ug sulod kay zero-gitas-on wala gayud ipakita.
Ang mga Popover nanginahanglan sa tooltip plugin nga iapil sa imong bersyon sa Bootstrap.
Alang sa mga rason sa performance, ang Tooltip ug Popover data-apis kay opt-in, nagpasabot nga ikaw mismo ang mag-initialize niini .
Usa ka paagi sa pagsugod sa tanan nga mga popovers sa usa ka panid mao ang pagpili kanila pinaagi sa ilang mga data-toggle
hiyas:
Kung mogamit mga popover sa mga elemento sulod sa usa .btn-group
o usa .input-group
, o sa mga elemento nga may kalabotan sa lamesa ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, <tfoot>
), kinahanglan nimo nga ipiho ang kapilian container: 'body'
(gidokumento sa ubos) aron malikayan ang dili gusto nga mga epekto (sama sa elemento nga nagkadako ug/ o mawad-an sa mga lingin nga mga kanto sa dihang ang popover ma-trigger).
Aron makadugang ug popover sa usa disabled
o .disabled
elemento, ibutang ang elemento sa sulod sa a <div>
ug i-apply ang popover niana <div>
.
Usahay gusto nimong idugang ang usa ka popover sa usa ka hyperlink nga nagputos sa daghang mga linya. Ang default nga pamatasan sa popover plugin mao ang pagsentro niini nga pinahigda ug patindog. Idugang white-space: nowrap;
sa imong mga angkla aron malikayan kini.
Upat ka mga kapilian ang magamit: taas, tuo, ubos, ug wala nga linya.
Sed posuere consectetur est ug lobortis. Aenean eu leo quam. Espesye sa tanom nga bulak ang pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est ug lobortis. Aenean eu leo quam. Espesye sa tanom nga bulak ang pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est ug lobortis. Aenean eu leo quam. Espesye sa tanom nga bulak ang pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est ug lobortis. Aenean eu leo quam. Espesye sa tanom nga bulak ang pellentesque ornare sem lacinia quam venenatis vestibulum.
Gamita ang focus
gatilyo aron isalikway ang mga popovers sa sunod nga pag-klik nga gihimo sa user.
Alang sa husto nga cross-browser ug cross-platform nga pamatasan, kinahanglan nimo gamiton ang <a>
tag, dili ang <button>
tag, ug kinahanglan usab nimo nga ilakip ang role="button"
ug mga tabindex
hiyas.
I-enable ang mga popovers pinaagi sa JavaScript:
Ang mga kapilian mahimong ipasa pinaagi sa mga hiyas sa datos o JavaScript. Para sa data attributes, idugang ang opsyon nga ngalan sa data-
, sama sa data-animation=""
.
Ngalan | Matang | Default | Deskripsyon |
---|---|---|---|
animation | boolean | tinuod | Ibutang ang CSS fade transition sa popover |
sudlanan | hilo | bakak | bakak | Gidugang ang popover sa usa ka piho nga elemento. Pananglitan: |
sulod | hilo | function | '' | Default nga kantidad sa sulod kung wala ang Kung ang usa ka function gihatag, kini tawgon uban ang |
paglangan | numero | butang | 0 | Paglangan sa pagpakita ug pagtago sa popover (ms) - dili magamit sa manual trigger type Kung adunay gihatag nga numero, ang paglangan magamit sa parehas nga pagtago/pagpakita Ang istruktura sa butang mao ang: |
html | boolean | bakak | Isulod ang HTML sa popover. Kung bakak, ang pamaagi sa jQuery text gamiton sa pagsal-ot sa sulud sa DOM. Gamit ug text kung nabalaka ka bahin sa mga pag-atake sa XSS. |
pagbutang | hilo | function | 'tama' | Giunsa pagpahimutang ang popover - ibabaw | ubos | wala | husto | awto. Kung gigamit ang usa ka function aron mahibal-an ang pagbutang, gitawag kini nga ang popover DOM node ingon ang una nga argumento ug ang hinungdan nga elemento nga DOM node ingon ikaduha. Ang |
tigpili | hilo | bakak | Kung gihatag ang usa ka tigpili, ang mga butang nga popover itugyan sa gitakda nga mga target. Sa praktis, kini gigamit aron makahimo sa dinamikong HTML nga sulod nga adunay mga popovers nga idugang. Tan-awa kini ug usa ka pananglitan nga impormatibo . |
template | hilo | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' |
Base HTML nga gamiton sa paghimo sa popover. Ang popover's Ang popover's
Ang labing gawas nga elemento sa wrapper kinahanglan adunay |
titulo | hilo | function | '' | Default nga bili sa titulo kung wala ang Kung ang usa ka function gihatag, kini tawgon uban ang |
trigger | hilo | 'pag-klik' | Giunsa ang pag-trigger sa popover - pag-klik | hover | focus | manwal. Mahimo nimong ipasa ang daghang mga trigger; ibulag sila sa usa ka luna. manual dili mahimong ikombinar sa bisan unsa nga lain nga trigger. |
viewport | hilo | butang | function | { selector: 'lawas', padding: 0 } | Gitipigan ang popover sulod sa mga utlanan niini nga elemento. Pananglitan: Kung ang usa ka function gihatag, kini gitawag nga adunay hinungdan nga elemento nga DOM node ingon nga bugtong argumento niini. Ang |
Ang mga kapilian alang sa indibidwal nga mga popover mahimong ipiho pinaagi sa paggamit sa mga hiyas sa datos, ingon sa gipasabut sa ibabaw.
$().popover(options)
Nagsugod sa mga popover para sa koleksyon sa elemento.
.popover('show')
Nagpadayag sa popover sa usa ka elemento. Mibalik sa nagtawag sa wala pa ipakita ang popover (ie sa wala pa shown.bs.popover
mahitabo ang panghitabo). Giisip kini nga "manwal" nga pag-trigger sa popover. Ang mga popover kansang titulo ug sulod kay zero-gitas-on dili gayud ipakita.
.popover('hide')
Nagtago sa popover sa usa ka elemento. Mibalik sa nagtawag sa wala pa ang popover tinuod nga gitago (ie sa wala pa hidden.bs.popover
mahitabo ang panghitabo). Giisip kini nga "manwal" nga pag-trigger sa popover.
.popover('toggle')
I-toggle ang popover sa usa ka elemento. Mibalik sa nagtawag sa wala pa ang popover gipakita o gitago (ie sa wala pa mahitabo ang shown.bs.popover
o hidden.bs.popover
panghitabo). Giisip kini nga "manwal" nga pag-trigger sa popover.
.popover('destroy')
Nagtago ug nagguba sa popover sa usa ka elemento. Ang mga popover nga naggamit sa delegasyon (nga gihimo gamit ang selector
opsyon ) dili mahimong tagsa-tagsa nga gub-on sa mga elemento sa descendant trigger.
Uri sa Hitabo | Deskripsyon |
---|---|
show.bs.popover | Kini nga panghitabo nagdilaab dayon kung ang show pamaagi sa pananglitan gitawag. |
gipakita.bs.popover | Kini nga panghitabo gipabuto kung ang popover nahimo nang makita sa tiggamit (maghulat nga makompleto ang mga transisyon sa CSS). |
hide.bs.popover | Kini nga panghitabo gipabuto dayon kung ang hide pamaagi sa pananglitan gitawag na. |
tago.bs.popover | Kini nga panghitabo gipabuto kung ang popover nahuman na nga gitago gikan sa tiggamit (maghulat nga makompleto ang mga transisyon sa CSS). |
gisulod.bs.popover | Kini nga panghitabo gipabuto pagkahuman sa show.bs.popover panghitabo kung ang template sa popover gidugang sa DOM. |
Idugang ang dismiss functionality sa tanang alert messages niini nga plugin.
Kung mogamit usa ka .close
buton, kinahanglan nga kini ang una nga bata sa .alert-dismissible
ug wala’y sulud nga teksto nga mahimong moabut sa wala pa kini sa markup.
Usba kini ug kana ug sulayi pag-usab. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
Idugang lang data-dismiss="alert"
sa imong close button aron awtomatik nga makahatag ug alert close functionality. Ang pagsira sa usa ka alerto magtangtang niini gikan sa DOM.
Aron magamit ang imong mga alerto sa animation kung magsira, siguroha nga naa nila ang .fade
ug .in
mga klase nga naaplay na sa kanila.
$().alert()
Naghimo usa ka alerto sa pagpamati sa mga panghitabo sa pag-klik sa mga elemento sa kaliwat nga adunay data-dismiss="alert"
hiyas. (Dili kinahanglan kung gamiton ang auto-initialization sa data-api.)
$().alert('close')
Pagsira sa usa ka alerto pinaagi sa pagtangtang niini gikan sa DOM. Kung ang .fade
ug .in
mga klase anaa sa elemento, ang alerto mawala sa dili pa kini tangtangon.
Ang alert plugin sa Bootstrap nagbutyag sa pipila ka mga panghitabo alang sa pag-hook sa alert functionality.
Uri sa Hitabo | Deskripsyon |
---|---|
close.bs.alerto | Kini nga panghitabo nagdilaab dayon kung ang close pamaagi sa pananglitan gitawag. |
closed.bs.alerto | Kini nga panghitabo gipabuto kung ang alerto gisirado na (maghulat alang sa mga transisyon sa CSS nga makompleto). |
Buhata ang labi pa gamit ang mga buton. Ang control button nag-ingon o paghimo og mga grupo sa mga buton alang sa dugang nga mga sangkap sama sa mga toolbar.
Ang Firefox nagpadayon sa mga estado sa pagkontrol sa porma (pagkabaldado ug pagkasusi) sa tibuok nga mga load sa panid . Ang usa ka solusyon alang niini mao ang paggamit autocomplete="off"
. Tan-awa ang Mozilla bug #654072 .
Idugang data-loading-text="Loading..."
aron magamit ang kahimtang sa pagkarga sa usa ka buton.
Kini nga bahin wala na magamit sukad sa v3.3.5 ug gitangtang sa v4.
Alang sa kini nga demonstrasyon, gigamit namon ang data-loading-text
ug $().button('loading')
, apan dili kana ang bugtong estado nga imong magamit. Tan-awa ang dugang bahin niini sa ubos sa $().button(string)
dokumentasyon .
Idugang data-toggle="button"
aron ma-activate ang toggling sa usa ka buton.
.active
ugaria-pressed="true"
Para sa pre-toggled nga mga buton, kinahanglan nimong idugang ang .active
klase ug ang aria-pressed="true"
attribute sa button
imong kaugalingon.
Idugang data-toggle="buttons"
sa usa ka .btn-group
adunay sulud nga checkbox o mga input sa radyo aron mahimo ang pag-togg sa ilang mga istilo.
.active
Alang sa gipili nga mga kapilian, kinahanglan nimong idugang ang .active
klase sa label
imong kaugalingon nga input.
Kung ang gisusi nga kahimtang sa usa ka buton sa checkbox gi-update nga wala magpabuto sa usa ka click
panghitabo sa buton (pananglitan pinaagi sa <input type="reset">
o pinaagi sa pag-set sa checked
kabtangan sa input), kinahanglan nimo nga i-toggle ang .active
klase sa label
imong kaugalingon nga input.
$().button('toggle')
I-toggle ang estado sa pagduso. Naghatag sa buton sa hitsura nga kini gi-aktibo.
$().button('reset')
I-reset ang kahimtang sa buton - ibaylo ang teksto sa orihinal nga teksto. Kini nga pamaagi kay asynchronous ug mobalik sa wala pa mahuman ang pag-reset.
$().button(string)
Ibaylo ang teksto sa bisan unsang datos nga gipiho nga kahimtang sa teksto.
Flexible nga plugin nga naggamit sa pipila ka mga klase alang sa sayon nga toggle nga kinaiya.
Ang pag-collapse nagkinahanglan sa mga transition plugin nga iapil sa imong bersyon sa Bootstrap.
I-klik ang mga buton sa ubos aron ipakita ug itago ang laing elemento pinaagi sa mga kausaban sa klase:
.collapse
nagtago sa sulod.collapsing
gigamit sa panahon sa transisyon.collapse.in
nagpakita sa sulodMahimo nimong gamiton ang usa ka link nga adunay href
attribute, o usa ka buton nga adunay data-target
attribute. Sa duha ka mga kaso, ang data-toggle="collapse"
gikinahanglan.
I-extend ang default nga pagkahugno nga kinaiya aron makahimo og akordyon nga adunay sangkap sa panel.
Posible usab nga ibaylo ang .panel-body
s sa .list-group
s.
Siguroha nga idugang aria-expanded
sa kontrol nga elemento. Kini nga hiyas tin-aw nga naghubit sa kasamtangan nga kahimtang sa nahugno nga elemento sa pag-screen sa mga magbabasa ug susama nga mga teknolohiya sa pagtabang. Kung ang ma-collapsible nga elemento sirado pinaagi sa default, kini kinahanglan nga adunay kantidad nga aria-expanded="false"
. Kung imong gi-set ang collapsible nga elemento nga bukas pinaagi sa default gamit ang in
klase, itakdaaria-expanded="true"
sa kontrol. Awtomatiko nga i-toggle sa plugin ang kini nga hiyas base sa kung giablihan o gisirhan ba o wala ang collapsible nga elemento.
Dugang pa, kung ang imong kontrol nga elemento nagpunting sa usa ka nahugno nga elemento - ie ang data-target
attribute nagpunting sa usa ka id
selector - mahimo kang magdugang ug dugang aria-controls
nga attribute sa control element, nga adunay sulod id
sa collapsible nga elemento. Ang mga moderno nga screen reader ug susamang assistive nga mga teknolohiya naggamit niini nga attribute aron mahatagan ang mga user og dugang nga mga shortcut aron direkta nga maka-navigate sa collapsible nga elemento mismo.
Ang collapse plugin naggamit sa pipila ka mga klase sa pagdumala sa bug-at nga pag-alsa:
.collapse
nagtago sa sulod.collapse.in
nagpakita sa sulod.collapsing
idugang kung magsugod na ang transisyon, ug tangtangon kung mahuman naKini nga mga klase makita sa component-animations.less
.
Idugang lang data-toggle="collapse"
ug a data-target
sa elemento aron awtomatik nga ma-assign ang kontrol sa usa ka collapsible nga elemento. Ang data-target
hiyas modawat ug CSS selector aron magamit ang pagkahugno. Siguroha nga idugang ang klase collapse
sa collapsible nga elemento. Kung gusto nimo nga kini nga default bukas, idugang ang dugang nga klase in
.
Aron idugang ang sama sa akordyon nga pagdumala sa grupo ngadto sa usa ka collapsible nga kontrol, idugang ang data attribute data-parent="#selector"
. Tan-awa ang demo aron makita kini nga aksyon.
I-enable ang mano-mano gamit ang:
Ang mga kapilian mahimong ipasa pinaagi sa mga hiyas sa datos o JavaScript. Para sa data attributes, idugang ang opsyon nga ngalan sa data-
, sama sa data-parent=""
.
Ngalan | matang | default | paghulagway |
---|---|---|---|
ginikanan | tigpili | bakak | Kung gihatag ang usa ka tigpili, nan ang tanan nga mga collapsible nga elemento sa ilawom sa gitakda nga ginikanan pagasirhan kung kini nga collapsible nga butang gipakita. (parehas sa tradisyonal nga pamatasan sa akordyon - kini nagdepende sa panel klase) |
toggle | boolean | tinuod | I-toggle ang ma-collapsible nga elemento sa pag-ampo |
.collapse(options)
Gi-aktibo ang imong sulud ingon usa ka ma-collapsible nga elemento. Modawat ug opsyonal nga mga kapilian object
.
.collapse('toggle')
I-toggle ang usa ka ma-collapsible nga elemento aron ipakita o gitago. Mibalik sa nagtawag sa wala pa ang nahugno nga elemento sa tinuud gipakita o gitago (ie sa wala pa mahitabo ang shown.bs.collapse
o hidden.bs.collapse
panghitabo).
.collapse('show')
Nagpakita sa usa ka ma-collapsible nga elemento. Mibalik sa nagtawag sa wala pa ang nahugno nga elemento sa tinuud gipakita (ie sa wala pa shown.bs.collapse
mahitabo ang panghitabo).
.collapse('hide')
Nagtago sa usa ka ma-collapsible nga elemento. Mibalik sa nagtawag sa wala pa ang nahugno nga elemento gitago (ie sa wala pa hidden.bs.collapse
mahitabo ang panghitabo).
Ang klase sa pagkahugno sa Bootstrap nagpadayag sa pipila ka mga panghitabo alang sa pag-hook sa pag-andar sa pagkahugno.
Uri sa Hitabo | Deskripsyon |
---|---|
show.bs.collapse | Kini nga panghitabo nagdilaab dayon kung ang show pamaagi sa pananglitan gitawag. |
gipakita.bs.collapse | Kini nga panghitabo gipabuto kung ang usa ka elemento sa pagkahugno nahimo nga makita sa tiggamit (maghulat nga makompleto ang mga transisyon sa CSS). |
hide.bs.collapse | Kini nga panghitabo gipabuto dayon kung ang hide pamaagi gitawag na. |
hidden.bs.collapse | Kini nga panghitabo gipabuto kung ang usa ka elemento sa pagkahugno gitago gikan sa tiggamit (maghulat nga makompleto ang mga transisyon sa CSS). |
Usa ka bahin sa slideshow alang sa pagbisikleta pinaagi sa mga elemento, sama sa usa ka carousel. Wala gisuportahan ang mga nested carousel.
Ang sangkap sa carousel sa kasagaran dili pagsunod sa mga sumbanan sa pagka-access. Kung kinahanglan nimo nga magsunod, palihug hunahunaa ang ubang mga kapilian sa pagpresentar sa imong sulud.
Ang Bootstrap eksklusibong naggamit sa CSS3 para sa mga animation niini, apan ang Internet Explorer 8 & 9 wala mosuporta sa gikinahanglan nga CSS properties. Busa, walay slide transition animation kon gamiton kini nga mga browser. Kami gituyo nga nakahukom nga dili iapil ang jQuery-based fallbacks alang sa mga transisyon.
Ang .active
klase kinahanglang idugang sa usa sa mga slide. Kay kon dili, ang carousel dili makita.
Ang .glyphicon .glyphicon-chevron-left
ug .glyphicon .glyphicon-chevron-right
mga klase dili kinahanglan alang sa mga kontrol. Naghatag ang Bootstrap .icon-prev
ug .icon-next
ingon nga yano nga mga alternatibo sa unicode.
Idugang ang mga kapsyon sa imong mga slide nga dali gamit ang .carousel-caption
elemento sa sulod sa bisan unsang .item
. Ibutang ang bisan unsang opsyonal nga HTML sa sulod didto ug kini awtomatik nga i-align ug ma-format.
Ang mga carousel nanginahanglan sa paggamit sa usa id
sa pinakagawas nga sudlanan (ang .carousel
) aron ang mga kontrol sa carousel molihok sa husto. Kung magdugang ug daghang mga carousel, o kung mag-ilis sa usa ka carousel id
, siguruha nga i-update ang mga may kalabotan nga kontrol.
Gamita ang data attributes aron dali makontrol ang posisyon sa carousel. data-slide
midawat sa mga keyword prev
o next
, nga nag-usab sa posisyon sa slide kalabot sa kasamtangan nga posisyon niini. Sa laing paagi, gamita data-slide-to
ang pagpasa sa usa ka hilaw nga slide index ngadto sa carousel data-slide-to="2"
, nga mobalhin sa slide position ngadto sa usa ka partikular nga index nga nagsugod sa 0
.
Ang data-ride="carousel"
attribute kay gigamit sa pagmarka sa carousel isip animating sugod sa page load. Dili kini magamit sa kombinasyon sa (kadaghanan ug wala kinahanglana) klaro nga pagsugod sa JavaScript sa parehas nga carousel.
Tawga ang carousel nga mano-mano gamit ang:
Ang mga kapilian mahimong ipasa pinaagi sa mga hiyas sa datos o JavaScript. Para sa data attributes, idugang ang opsyon nga ngalan sa data-
, sama sa data-interval=""
.
Ngalan | matang | default | paghulagway |
---|---|---|---|
agwat | numero | 5000 | Ang gidugayon sa paglangan tali sa awtomatik nga pagbisikleta sa usa ka butang. Kung bakak, ang carousel dili awtomatik nga mag-cycle. |
paghunong | hilo | null | "lutaw" | Kung itakda sa "hover" , ihunong ang pagbisikleta sa carousel sa mouseenter ug ipadayon ang pagbisikleta sa carousel sa mouseleave . Kung itakda sa null , ang pag-hover sa carousel dili mopahunong niini. |
putos | boolean | tinuod | Kung ang carousel kinahanglan nga magpadayon sa pag-ikot o adunay lisud nga paghunong. |
keyboard | boolean | tinuod | Kung ang carousel kinahanglan nga mo-react sa mga panghitabo sa keyboard. |
.carousel(options)
Nagsugod sa carousel nga adunay opsyonal nga mga kapilian object
ug nagsugod sa pagbisikleta sa mga butang.
.carousel('cycle')
Naglibot sa mga butang sa carousel gikan sa wala ngadto sa tuo.
.carousel('pause')
Gipahunong ang carousel gikan sa pagbisikleta sa mga butang.
.carousel(number)
I-cycle ang carousel ngadto sa usa ka partikular nga frame (0 base, susama sa array).
.carousel('prev')
Mga siklo sa miaging aytem.
.carousel('next')
Siklo ngadto sa sunod nga butang.
Ang klase sa carousel sa Bootstrap nagbutyag sa duha ka mga panghitabo alang sa pag-hook sa pagpaandar sa carousel.
Ang duha ka mga panghitabo adunay mga mosunod nga dugang nga mga kabtangan:
direction
: Ang direksyon diin ang carousel nag-slide (bisan "left"
o "right"
).relatedTarget
: Ang elemento sa DOM nga gi-slide sa lugar isip aktibo nga butang.Ang tanan nga mga panghitabo sa carousel gipabuto sa carousel mismo (ie sa <div class="carousel">
).
Uri sa Hitabo | Deskripsyon |
---|---|
slide.bs.carousel | Kini nga panghitabo mobuto dayon kung ang slide pamaagi sa instance gigamit. |
slid.bs.carousel | Kini nga panghitabo gipabuto kung nahuman na sa carousel ang pagbalhin sa slide niini. |
Ang affix plugin position: fixed;
nag-on ug off, nga nagsundog sa epekto nga nakit-an sa position: sticky;
. Ang subnavigation sa tuo usa ka live demo sa affix plugin.
Gamita ang affix plugin pinaagi sa data attributes o mano-mano gamit ang imong kaugalingong JavaScript. Sa duha nga mga sitwasyon, kinahanglan ka maghatag CSS alang sa pagpahimutang ug gilapdon sa imong gilakip nga sulud.
Pahinumdom: Ayaw gamita ang affix plugin sa usa ka elemento nga anaa sa medyo nakaposisyon nga elemento, sama sa gibira o giduso nga column, tungod sa Safari rendering bug .
Ang affix nga plugin nag-toggle tali sa tulo ka mga klase, ang matag usa nagrepresentar sa usa ka partikular nga estado: .affix
, .affix-top
, ug .affix-bottom
. Kinahanglan nimo nga ihatag ang mga istilo, gawas sa position: fixed;
on .affix
, para sa kini nga mga klase sa imong kaugalingon (independente sa kini nga plugin) aron madumala ang aktwal nga mga posisyon.
Ania kung giunsa ang affix plugin nagtrabaho:
.affix-top
aron ipakita nga ang elemento naa sa pinakataas nga posisyon niini. Niini nga punto walay CSS positioning ang gikinahanglan..affix
nagpuli .affix-top
ug nagtakda position: fixed;
(gihatag sa Bootstrap's CSS)..affix
kini sa .affix-bottom
. Tungod kay ang mga offset opsyonal, ang pag-set sa usa kinahanglan nimo nga itakda ang angay nga CSS. Sa kini nga kaso, dugangi position: absolute;
kung gikinahanglan. Gigamit sa plugin ang data attribute o opsyon sa JavaScript aron mahibal-an kung asa ibutang ang elemento gikan didto.Sunda ang mga lakang sa ibabaw aron itakda ang imong CSS alang sa bisan hain sa mga kapilian sa paggamit sa ubos.
Aron dali nga makadugang ug affix nga kinaiya sa bisan unsang elemento, idugang data-spy="affix"
lang sa elemento nga gusto nimong espiya. Gamita ang mga offset aron mahibal-an kung kanus-a i-toggle ang pag-pin sa usa ka elemento.
Tawga ang affix plugin pinaagi sa JavaScript:
Ang mga kapilian mahimong ipasa pinaagi sa mga hiyas sa datos o JavaScript. Para sa data attributes, idugang ang opsyon nga ngalan sa data-
, sama sa data-offset-top="200"
.
Ngalan | matang | default | paghulagway |
---|---|---|---|
offset | numero | function | butang | 10 | Ang mga pixel aron ma-offset gikan sa screen kung gikalkula ang posisyon sa scroll. Kung ang usa ka numero gihatag, ang offset magamit sa taas ug ubos nga direksyon. Aron makahatag usa ka talagsaon, ubos ug taas nga offset paghatag lang usa ka butang offset: { top: 10 } o offset: { top: 10, bottom: 5 } . Paggamit usa ka function kung kinahanglan nimo nga dinamikong pagkalkula sa usa ka offset. |
target | tigpili | node | jQuery nga elemento | ang window butang |
Gipiho ang target nga elemento sa affix. |
.affix(options)
Gi-aktibo ang imong sulud ingon gilakip nga sulud. Modawat ug opsyonal nga mga kapilian object
.
.affix('checkPosition')
Gikalkulo pag-usab ang kahimtang sa affix base sa mga dimensyon, posisyon, ug posisyon sa scroll sa may kalabutan nga mga elemento. Ang .affix
, .affix-top
, ug .affix-bottom
mga klase gidugang o gitangtang gikan sa gilakip nga sulod sumala sa bag-ong estado. Kini nga pamaagi kinahanglan nga tawagan kung ang mga sukat sa gilakip nga sulud o ang target nga elemento mabag-o, aron masiguro ang husto nga posisyon sa gilakip nga sulud.
Ang plugin sa affix sa Bootstrap nagbutyag sa pipila ka mga panghitabo alang sa pag-hook sa affix functionality.
Uri sa Hitabo | Deskripsyon |
---|---|
affix.bs.affix | Kini nga panghitabo nagdilaab dayon sa wala pa mabutang ang elemento. |
affixed.bs.affix | Kini nga panghitabo gipabuto pagkahuman sa elemento nga gilakip. |
affix-top.bs.affix | Kini nga panghitabo mobuto diha-diha dayon sa wala pa ang elemento nga gibutang-sa ibabaw. |
affixed-top.bs.affix | Kini nga panghitabo gipabuto human ang elemento nabutang-sa ibabaw. |
affix-bottom.bs.affix | Kini nga panghitabo mobuto diha-diha dayon sa wala pa ang elemento nga gibutang-sa ubos. |
affixed-bottom.bs.affix | Kini nga panghitabo gipabuto human ang elemento nabutang sa ubos. |