JavaScript
Leeta ebitundu bya Bootstrap mu bulamu ne plugins za jQuery ezisukka mu daziini eza custom. Kyangu okuziteekamu zonna, oba kimu ku kimu.
Leeta ebitundu bya Bootstrap mu bulamu ne plugins za jQuery ezisukka mu daziini eza custom. Kyangu okuziteekamu zonna, oba kimu ku kimu.
Plugins zisobola okuteekebwamu kinnoomu (nga okozesa *.js
fayiro za Bootstrap ssekinnoomu), oba zonna omulundi gumu (nga okozesa bootstrap.js
oba ezikendeezeddwa bootstrap.min.js
).
Zombi bootstrap.js
era bootstrap.min.js
zirimu plugins zonna mu fayiro emu. Muteekemu omu yekka.
Plugins ezimu n'ebitundu bya CSS byesigamye ku plugins endala. Bw'oba ossaamu plugins kinnoomu, kakasa nti okebera bino ebisinziirako mu docs. Era weetegereze nti plugins zonna zeesigamye ku jQuery (kino kitegeeza nti jQuery erina okuteekebwamu nga fayiro za plugin tezinnabaawo). Weebuuze ku yaffebower.json
olabe enkyusa ki eza jQuery eziwagirwa.
Osobola okukozesa Bootstrap plugins zonna okuyita mu markup API yokka nga towandiise layini emu eya JavaScript. Eno ye API ya Bootstrap ey’omutindo ogusooka era yandibadde esooka okulowoozaako ng’okozesa plugin.
Ekyo kyogeddwa, mu mbeera ezimu kiyinza okuba ekirungi okuggyako omulimu guno. Nolwekyo, era tuwa obusobozi okulemesa API attribute ya data nga tusumulula ebibaddewo byonna ku kiwandiiko namespaced ne data-api
. Kino kifaanana bwe kiti:
Ekirala, okutunuulira plugin eyeetongodde, ssaamu erinnya lya plugin nga ekifo ky'amannya wamu n'ekifo ky'amannya kya data-api nga kino:
Tokozesa data attributes okuva mu plugins eziwera ku element emu. Okugeza, button tesobola byombi kuba na tooltip ne toggle modal. Okutuukiriza kino, kozesa ekintu ekizinga.
Era tukkiriza nti olina okusobola okukozesa Bootstrap plugins zonna okuyita mu JavaScript API yokka. API zonna ez'olukale nkola emu, eziteekebwako enjegere, era zizzaayo okukung'aanya okwakolebwako.
Enkola zonna zirina okukkiriza ekintu eky'okulonda eky'okwesalirawo, olunyiriri olugenderera enkola entongole, oba tewali kintu kyonna (ekitandika plugin n'enneeyisa eya bulijjo):
Buli plugin era eraga constructor yaayo embisi ku Constructor
property: $.fn.popover.Constructor
. Bw'oba oyagala okufuna ekifaananyi kya plugin ekimu, kiggye butereevu okuva mu elementi: $('[rel="popover"]').data('popover')
.
Osobola okukyusa ensengeka ezisookerwako eza plugin nga okyusa Constructor.DEFAULTS
ekintu kya plugin:
Oluusi kyetaagisa okukozesa Bootstrap plugins ne UI frameworks endala. Mu mbeera zino, okutomeragana kw'ekifo ky'amannya kuyinza okubaawo oluusi n'oluusi. Kino bwe kibaawo, oyinza okuyita .noConflict
ku plugin gy’oyagala okuzzaawo omuwendo gwayo.
Bootstrap egaba ebibaddewo eby'enjawulo ku bikolwa eby'enjawulo ebya plugins ebisinga obungi. Okutwalira awamu, bino bijja mu ngeri etaliiko nkomerero n’ennyiriri eziyise - nga ekintu ekitaliiko nkomerero (ex. show
) kitandikibwawo ku ntandikwa y’ekintu ekibaawo, ate engeri yaakyo ey’ekitundu ekiyise (ex. shown
) n’etandika nga ekikolwa kiwedde.
Okuva ku 3.0.0, ebibaawo byonna ebya Bootstrap biba biteekeddwa mu mannya.
Ebintu byonna ebibaawo ebitaliiko nkomerero biwa preventDefault
enkola. Kino kiwa obusobozi okuyimiriza okukola ekikolwa nga tekinnatandika.
Enkyusa ya buli emu ku jQuery plugins za Bootstrap esobola okuyingizibwa ng'oyita mu VERSION
by'obugagga by'omuzimbi wa plugin. Okugeza, ku plugin ya tooltip:
Bootstrap's plugins tezigwa mabega naddala gracefully nga JavaScript eremeddwa. Bw’oba ofaayo ku bumanyirivu bw’omukozesa mu mbeera eno, kozesa <noscript>
okunnyonnyola embeera (n’engeri y’okuddamu okusobozesa JavaScript) eri abakozesa bo, ne/oba okwongerako ebikuddirira byo eby’ennono.
Bootstrap tewagira mu butongole tterekero lya JavaScript ery'ekibiina eky'okusatu nga Prototype oba jQuery UI. Wadde nga waliwo .noConflict
ebibaddewo nga biteekeddwa mu kifo ky’amannya, wayinza okubaawo ebizibu by’okukwatagana by’olina okutereeza ku bubwo.
Ku bikolwa eby'enkyukakyuka ebyangu, ssaamu transition.js
omulundi gumu ku mabbali ga fayiro za JS endala. Bw’oba okozesa ekikung’aanyiziddwa (oba ekikendeezeddwa) bootstrap.js
, tekyetaagisa kussaamu kino—kyabaddewo dda.
Transition.js ye muyambi omukulu eri transitionEnd
ebibaawo nga kwotadde ne CSS transition emulator. Ekozesebwa plugins endala okukebera obuwagizi bw'enkyukakyuka ya CSS n'okukwata enkyukakyuka eziwaniridde.
Enkyukakyuka zisobola okulemesa mu nsi yonna nga okozesa ekitundu kya JavaScript kino wammanga, ekiteekwa okujja oluvannyuma transition.js
(oba bootstrap.js
oba bootstrap.min.js
, nga bwe kiyinza okuba) okutikkibwa:
Modals zirongooseddwa, naye zikyukakyuka, dialog prompts nga zirina enkola entono ezeetaagisa n'okusooka okugezi.
Kakasa nti toggulawo modal ng’endala ekyalabika. Okulaga modal ezisukka mu emu omulundi gumu kyetaagisa custom code.
Bulijjo gezaako okuteeka koodi ya HTML eya modal mu kifo eky’omutendera ogw’oku ntikko mu kiwandiiko kyo okwewala ebitundu ebirala ebikosa endabika ya modal ne/oba enkola.
Waliwo okulabula okumu ku bikwata ku kukozesa modals ku byuma ebikozesebwa ku ssimu. Laba ebiwandiiko byaffe ebiwagira browser okumanya ebisingawo.
Olw’engeri HTML5 gy’ennyonnyolamu amakulu gaayo, ekintu kya autofocus
HTML tekirina kye kikola mu Bootstrap modals. Okusobola okutuuka ku nkola y’emu, kozesa JavaScript ezimu ez’enjawulo:
Modal ekoleddwa nga erimu omutwe, omubiri, n'ekibinja ky'ebikolwa mu wansi.
Toggle a modal nga oyita mu JavaScript nga onyiga button wansi. Kijja kuseeyeeya wansi era kizike okuva waggulu ku lupapula.
Kakasa nti ossaako role="dialog"
ne aria-labelledby="..."
, ng’ojuliza omutwe gwa modal, ku .modal
, ne role="document"
ku .modal-dialog
gwennyini.
Okugatta ku ekyo, oyinza okuwa ennyonyola ku mboozi yo eya modal ne aria-describedby
on .modal
.
Okuteeka obutambi bwa YouTube mu modals kyetaagisa JavaScript endala etali mu Bootstrap okuyimiriza otomatiki okuzannya n’ebirala. Laba kino ekiyamba Stack Overflow post okumanya ebisingawo.
Modals zirina sayizi bbiri ez'okwesalirawo, ezifunibwa okuyita mu kiraasi z'abakyusa okuteekebwa ku .modal-dialog
.
Ku modals ezimala okulabika okusinga okuzikira mu okulaba, ggyawo .fade
ekibiina okuva ku modal markup yo.
Okusobola okweyambisa enkola ya Bootstrap grid munda mu modal, just nest .row
s within the .modal-body
and then use the normal grid system classes.
Olina ekibinja kya buttons nga zonna zisitula modal y’emu, just with slightly different contents? Kozesa event.relatedTarget
ne HTML data-*
attributes (kiyinzika okuyita mu jQuery ) okukyusakyusa ebirimu mu modal okusinziira ku button ki eyanyigibwa. Laba ebiwandiiko bya Modal Events okumanya ebisingawo ku relatedTarget
, .
Modal plugin ekyusa ebirimu byo ebikwekebwa nga bwe kyetaagisa, okuyita mu data attributes oba JavaScript. Era eyongera .modal-open
ku <body>
to override default scrolling behavior era ekola a .modal-backdrop
okuwa ekifo eky'okunyiga okugoba modals eziragiddwa nga onyiga ebweru wa modal.
Kozesa modal nga towandiise JavaScript. Teeka data-toggle="modal"
ku elementi y'ekifuga, nga button, wamu ne a data-target="#foo"
oba href="#foo"
okutunuulira modal eyeetongodde okukyusakyusa.
Kuba modal eriko id myModal
nga erina layini emu eya JavaScript:
Ebyokulonda bisobola okuyisibwa nga biyita mu data attributes oba JavaScript. Ku bikwata ku data, ssaako erinnya ly'okulonda ku data-
, nga mu data-backdrop=""
.
Erinnya | okuwandiika | okukosamu | okunnyonnyola |
---|---|---|---|
ekifaananyi eky’emabega | boolean oba olunyiriri'static' |
kituufu | Mulimu ekintu ekiyitibwa modal-backdrop element. Ekirala, lambika static ku backdrop etaggalawo modal ku click. |
ekitabo ekikwata ku kibboodi | boolean | kituufu | Eggalawo modal nga escape key enyigiddwa |
okulaga | boolean | kituufu | Alaga modal nga etandikiddwawo. |
limooti | ekkubo | -kyaamu | Enkola eno evudde ku v3.3.0 era eggiddwawo mu v4. Tukuwa amagezi mu kifo ky'ekyo okukozesa client-side templating oba data binding framework, oba okuyita jQuery.load ggwe kennyini. Singa URL ey'ewala eweebwa, ebirimu bijja kutikkibwa omulundi gumu nga biyita mu nkola ya jQuery |
.modal(options)
Ekola ebirimu byo nga modal. Akkiriza eby'okulonda eby'okwesalirawo object
.
.modal('toggle')
Mu ngalo ekyusakyusa modal. Edda eri oyo ayita nga modal tennalagibwa oba okukwekebwa ddala (kwe kugamba nga shown.bs.modal
oba hidden.bs.modal
ekintu tekinnabaawo).
.modal('show')
Mu ngalo aggulawo modal. Edda eri omuyita nga modal tennalagibwa ddala (kwe kugamba nga shown.bs.modal
ekintu tekinnabaawo).
.modal('hide')
Mu ngalo akweka modal. Edda eri oyo akubira nga modal tennakwekebwa ddala (kwe kugamba nga hidden.bs.modal
ekintu tekinnabaawo).
.modal('handleUpdate')
Eddamu okutereeza ekifo kya modal okuziyiza scrollbar singa emu erina okulabika, ekyandifudde modal okubuuka ku kkono.
Yeetaagibwa yokka ng’obugulumivu bwa modal bukyuse ng’eggule.
Bootstrap's modal class eraga ebitonotono ebibaawo olw'okuyunga mu nkola ya modal.
Ebintu byonna ebibaawo mu modal bikubwa ku modal yennyini (kwe kugamba ku <div class="modal">
).
Ekika ky’Ekibaddewo | Okunnyonnyola |
---|---|
okulaga.bs.modal | Ekintu kino kikuba amangu ddala nga show enkola ya instance eyitiddwa. Singa kiva ku kunyiga, ekintu ekinyigiddwa kibeerawo ng’eky’obugagga ky’ekintu relatedTarget ekibaddewo. |
eragiddwa.bs.modal | Ekintu kino kikubwa nga modal ekoleddwa okulabika eri omukozesa (ejja kulinda enkyukakyuka za CSS okuggwa). Singa kiva ku kunyiga, ekintu ekinyigiddwa kibeerawo ng’eky’obugagga ky’ekintu relatedTarget ekibaddewo. |
okukweka.bs.modal | Ekintu kino kikubwa amangu ddala nga hide enkola ya instance eyitiddwa. |
ekikwekebwa.bs.modal | Ekintu kino kikubwa nga modal emaze okukwekebwa okuva eri omukozesa (ejja kulinda enkyukakyuka za CSS okuggwa). |
etikkiddwa.bs.modal | Ekintu kino kikubwa nga modal ebadde etisse ebirimu nga ekozesa remote eky'okulonda. |
Okwongerako menus ezikka kumpi ku kintu kyonna ne plugin eno ennyangu, omuli navbar, tabs, n’empeke.
Okuyita mu data attributes oba JavaScript, dropdown plugin ekyusa ebirimu ebikwekebwa (dropdown menus) nga ekyusa .open
class ku kintu ky'olukalala lw'omuzadde.
Ku byuma ebikozesebwa ku ssimu, okuggulawo ekintu ekikka wansi kwongerako a .dropdown-backdrop
ng’ekifo eky’okukwatako okuggalawo menyu ezikka ng’onyiga ebweru wa menu, ekyetaagisa okuwagira obulungi iOS. Kino kitegeeza nti okukyusa okuva ku menu eggule okudda ku menu ey’enjawulo kyetaagisa okukuba ennyo ku ssimu.
Note: data-toggle="dropdown"
Attribute yesigamyeko okuggalawo dropdown menus ku ddaala ly'enkola, kale kirungi bulijjo okugikozesa.
Yongera data-toggle="dropdown"
ku link oba button okukyusa dropdown.
Okukuuma URL nga tezifudde ne buttons z'enkolagana, kozesa data-target
attribute mu kifo kya href="#"
.
Kuba ku bigenda okukka wansi ng’oyita mu JavaScript:
data-toggle="dropdown"
kikyali kyetaagisaNga tofuddeeyo oba oyita dropdown yo ng'oyita mu JavaScript oba mu kifo ky'ekyo okozesa data-api, data-toggle="dropdown"
bulijjo kyetaagisa okubeerawo ku dropdown's trigger element.
Tewali
$().dropdown('toggle')
Ekyusa menu egwa wansi eya navbar oba tabbed navigation eweereddwa.
Ebintu byonna ebigwa wansi bikubwa ku .dropdown-menu
's parent element.
Ebintu byonna ebigwa wansi birina ekintu relatedTarget
, omuwendo gwakyo gwe kintu ekikyusakyusa ennanga.
Ekika ky’Ekibaddewo | Okunnyonnyola |
---|---|
show.bs.okugwa wansi | Ekintu kino kikuba amangu ddala nga enkola ya show instance eyitiddwa. |
eragiddwa.bs.okukka wansi | Ekintu kino kikubwa nga ekigwa kikoleddwa okulabika eri omukozesa (kijja kulinda enkyukakyuka za CSS, okuggwa). |
hide.bs.okukka wansi | Ekintu kino kikubwa amangu ddala nga enkola ya hide instance eyitiddwa. |
ekikwekebwa.bs.okukka wansi | Ekintu kino kikubwa nga ekigwa kiwedde okukwekebwa okuva eri omukozesa (kijja kulinda enkyukakyuka za CSS, okuggwa). |
ScrollSpy plugin ya kulongoosa nav targets mu ngeri ey’otoma okusinziira ku scroll position. Ssenda ekitundu wansi wa navbar era olabe enkyukakyuka ya kiraasi ekola. Ebintu ebitonotono ebigwa wansi nabyo bijja kulagibwa.
Ad leggings keytar, brunch id art akabaga ka dolor labore. Pitchfork yr enim lo-fi nga tebannaba kutunda qui. Tumblr eddembe ly'obugaali okuva ku faamu okutuuka ku mmeeza kyonna. Anim keffiyeh kaadi ya carles. Velit seitan mcsweeney's ekifaananyi ekifo 3 omusege omwezi irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui osanga toziwuliddeko et cardigan ssente z'obwesige culpa biodiesel wes anderson aesthetic. Nihil alina ttatu accusamus, cred irony biodiesel keffiyeh omukozi w'emikono ullamco ekivaamu.
Veniam marfa ebirevu skateboard, adipisicing ekirevu kya fugiat velit ekirevu eky’ekika kya pitchfork. Freegan ekirevu aliqua cupidatat ekirevu kya mcsweeney. Cupidatat abantu bana loko nisi, ea helvetica nulla carles. Loole y'emmere ya ssweeta ya cosby eriko ttatu, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 eby’okwewunda. Carles non aesthetic okukola dduyiro quis gentrify. Brooklyn adipisicing eby'emikono bbiya vice keytar deserunt.
Occaecat ekika kya commodo ekiyitibwa ekirungo ekiyitibwa occaecat. Fap ebyemikono bbiya deserunt skateboard ea. Lomo obugaali eddembe adipisicing banh mi, velit ea sunt omutendera oguddako locavore kaawa ow’ensibuko emu mu magna veniam. Obulamu obw'amaanyi id vinyl, echo park consequat quis aliquip banh mi ppipa. Vero VHS est okusiiga amasanyalaze. Consectetur nisi DIY minim ensawo y'omubaka. Cred ex mu, okuwangaala 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 ensawo y'omubaka marfa kyonna delectus loole y'emmere. Sapiente synth id okulowooza nti. Locavore sed helvetica cliche irony, okubwatuka osanga towuliddeko consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat nga tebannaba kutunda, terry richardson proident brunch nesciunt quis cosby ssweeta pariatur keffiyeh ut helvetica omukubi w'emikono. Cardigan craft bbiya seitan nga yeetegefu velit. VHS chambray laboris ekika kya veniam eky’ekiseera. Anim mollit minim commodo ullamco okubwatuka kw'okubwatuka.
Enkolagana za Navbar zirina okuba n'ebigendererwa bya id ebisobola okugonjoolwa. Okugeza, a <a href="#home">home</a>
erina okukwatagana n’ekintu mu DOM nga <div id="home"></div>
.
:visible
Ebintu ebitali bigendererwa bibuusibwa amaasoEbintu ebigendererwa ebitali :visible
okusinziira ku jQuery bijja kubuusibwa amaaso era ebintu byabwe ebya nav ebikwatagana tebijja kulagibwa.
Si nsonga enkola y'okussa mu nkola, scrollspy yeetaaga okukozesa position: relative;
ku elementi gy'oketta. Ebiseera ebisinga kino kye <body>
. Nga scrollspying ku elements endala ezitali <body>
, kakasa nti olina height
set era nga overflow-y: scroll;
osiigiddwa.
Okusobola okwanguyirwa okwongerako enneeyisa ya scrollspy ku topbar navigation yo, yongera data-spy="scroll"
ku elementi gy’oyagala okuketta (okusinga kino kyandibadde <body>
). Oluvannyuma yongera ku data-target
attribute ne ID oba class ya parent element ya Bootstrap .nav
component yonna.
Oluvannyuma lw’okugattako position: relative;
mu CSS yo, yita scrollspy ng’oyita mu JavaScript:
.scrollspy('refresh')
Bw'oba okozesa scrollspy wamu n'okugattako oba okuggyawo ebintu okuva mu DOM, ojja kwetaaga okuyita enkola y'okuzza obuggya nga bwe kityo:
Ebyokulonda bisobola okuyisibwa nga biyita mu data attributes oba JavaScript. Ku bikwata ku data, ssaako erinnya ly'okulonda ku data-
, nga mu data-offset=""
.
Erinnya | okuwandiika | okukosamu | okunnyonnyola |
---|---|---|---|
offset | omuwendo | 10. 10 | Pixels oku offset okuva waggulu nga obala ekifo ky'omuzingo. |
Ekika ky’Ekibaddewo | Okunnyonnyola |
---|---|
okukola.bs.srollspy | Ekintu kino kikuba omuliro buli ekintu ekipya lwe kifuuka ekikozesebwa scrollspy. |
Okwongera ku nkola ya tabu ey’amangu, ekyukakyuka okukyuka okuyita mu bitundu by’ebirimu eby’omu kitundu, wadde ng’oyita mu menyu ezikka. Taabu eziteekeddwa mu kisenge teziwagirwa.
Raw denim osanga toziwuliddeko jean shorts Austin. Nesciunt tofu stumptown aliqua, okuyonja omukugu mu kukola eby’amaguzi eby’edda. Ebirevu cliche ekiseera, williamsburg carles vegan helvetica. Reprehenderit omunyama retro keffiyeh omukwasi w'ebirooto synth. Ssweeta ya cosby eu banh mi, qui irure terry richardson eyali squid. Aliquip placeat omusajja omulala ayitibwa salvia cillum iphone. Seitan aliquip quis cardigan engoye z'omumerika, omunyama voluptate nisi qui.
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.
Plugin eno egaziya ekitundu ky'okutambulira ku tabbed okugattako ebitundu ebiriko tabba.
Ssobozesa tabu eziriko tabba ng’oyita mu JavaScript (buli tabu yeetaaga okukozesebwa kinnoomu):
Osobola okukola tabu ssekinnoomu mu ngeri eziwerako:
Osobola okukola tab oba pill navigation nga towandiise JavaScript yonna nga omala kulaga data-toggle="tab"
oba data-toggle="pill"
ku elementi. Okwongera nav
ne nav-tabs
classes ku tab ul
kijja kukozesa Bootstrap tab styling , ate okugattako nav
ne nav-pills
classes kijja kukozesa pill styling .
Okusobola okufuula tabu okuzikira mu, yongera .fade
ku buli .tab-pane
. Ekipande kya tabu ekisooka nakyo kirina okuba nga .in
kirina okufuula ebirimu ebisooka okulabika.
$().tab
Ekola ekintu kya tabu n'ekintu ekirimu. Tab erina okuba ne oba a data-target
oba an href
targeting a container node mu DOM. Mu byokulabirako waggulu, tabu ze <a>
s ezirina data-toggle="tab"
ebifaananyi.
.tab('show')
Londa ekitundu ekiweereddwa era n’alaga ebirimu ebikwatagana nabyo. Taabu endala yonna eyalondebwa emabegako efuuka etalondeddwa era ebikwatagana nayo ne bikwekebwa. Edda eri omuyita nga ekitundu kya tabu tekinnalagibwa ddala (kwe kugamba nga shown.bs.tab
ekintu tekinnabaawo).
Nga olaga tabu empya, ebibaawo bikuba amasasi mu nsengeka eno wammanga:
hide.bs.tab
(ku tabu ekola kati)show.bs.tab
(ku kitundu ekigenda okulagibwa)hidden.bs.tab
(ku tabu ekola emabega, y’emu hide.bs.tab
n’ey’omukolo)shown.bs.tab
(ku kitundu ekipya-ekikola ekyaakalagibwa, kye kimu show.bs.tab
n'eky'omukolo)Singa tewali tabu yali yakola dda, olwo hide.bs.tab
ne hidden.bs.tab
events tezijja kugobwa.
Ekika ky’Ekibaddewo | Okunnyonnyola |
---|---|
okulaga.bs.tab | Ekintu kino kikuba omuliro ku tab show, naye nga tab empya tennalagibwa. Kozesa event.target ne event.relatedTarget okutunuulira tabu ekola ne tabu ekola eyasooka (bwe kiba nga kiriwo) mu kulondako. |
eragiddwa.bs.tab | Ekintu kino kikuba omuliro ku tab show oluvannyuma lwa tab okulagibwa. Kozesa event.target ne event.relatedTarget okutunuulira tabu ekola ne tabu ekola eyasooka (bwe kiba nga kiriwo) mu kulondako. |
okukweka.bs.tab | Ekintu kino kikuba omuliro nga tabu empya egenda kulagibwa (era bwe kityo tabu ekola eyasooka erina okukwekebwa). Kozesa event.target ne event.relatedTarget okutunuulira tabu ekola kati ne tabu empya egenda okukola mu bbanga ttono, mu kulondako. |
ekikwekebwa.bs.tab | Ekintu kino kikuba omuliro oluvannyuma lwa tabu empya okulagibwa (era bwe kityo tabu ekola eyasooka ekwekebwa). Kozesa event.target ne event.relatedTarget okutunuulira tabu ekola emabega ne tabu empya ekola, mu kulondako. |
Nga efunye okubudaabudibwa okuva mu nkola ennungi ennyo eya jQuery.tipsy eyawandiikibwa Jason Frame; Tooltips ye nkyusa erongooseddwa, etasinziira ku bifaananyi, ekozesa CSS3 ku animations, ne data-attributes okutereka emitwe egy'omu kitundu.
Ebikozesebwa ebirina emitwe egy’obuwanvu bwa zero tebiragibwangako.
Hover ku links wammanga olabe ebikozesebwa:
Tight pants next level keffiyeh osanga toziwuliddeko . Ekifaananyi ekibanda ekirevu embisi denim letterpress vegan omubaka ensawo stumptown. Seitan okuva ku faamu okutuuka ku mmeeza, engoye za mcsweeney eziyitibwa fixie sustainable quinoa 8-bit american apparel zirina terry richardson vinyl chambray. Ekirevu stumptown, cardigans banh mi lomo okubwatuka. Tofu biodiesel williamsburg marfa, bana loko mcsweeney's okuyonja vegan chambray. A really ironic artisan whatever keytar , scenester faamu-ku-mmeeza banksy Austin twitter okukwata freegan cred embisi denim ensibuko emu kaawa viral.
Enkola nnya ziriwo: waggulu, ku ddyo, wansi, ne kkono nga zikwatagana.
Olw'ensonga z'okukola, Tooltip ne Popover data-apis zibeera opt-in, ekitegeeza nti olina okuzitandika ggwe kennyini .
Engeri emu ey’okutandikawo obukodyo bwonna obw’ebikozesebwa ku lupapula yandibadde okubironda okusinziira ku ngeri yaabwe data-toggle
:
Plugin y'obukodyo bw'ebikozesebwa ekola ebirimu n'obubonero ku bwetaavu, era nga bwe kibadde eteeka obukodyo bw'ebikozesebwa oluvannyuma lw'ekintu kyabwe ekiziyiza.
Trigger the tooltip nga oyita mu JavaScript:
Markup ekyetaagisa ku tooltip ye data
attribute yokka era title
ku HTML element oyagala okuba ne tooltip. Obubonero obukoleddwa obw'ekintu ekiyitibwa tooltip kyangu nnyo, wadde nga kyetaaga ekifo (nga bwe kibadde, kiteekeddwawo ku top
by the plugin).
Oluusi oyagala okwongerako tooltip ku hyperlink ezizinga layini eziwera. Enneeyisa esookerwako eya tooltip plugin kwe kugiteeka wakati mu horizontal ne vertically. Okwongerako white-space: nowrap;
ku nnanga zo okwewala kino.
Bw’oba okozesa obukodyo bw’ebikozesebwa ku bintu ebiri munda mu a .btn-group
oba an .input-group
, oba ku bintu ebikwatagana n’emmeeza ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, <tfoot>
), ojja kuba olina okulaga eky’okulonda container: 'body'
(ekiwandiikiddwa wansi) okwewala ebizibu ebiteetaagibwa (nga ekintu okukula nga kigazi ne/ oba okufiirwa enkoona zaayo ezeetooloovu nga tooltip ekoleddwa).
Ku bakozesa abatambulira ku kibboodi, n’okusingira ddala abakozesa tekinologiya ayamba, olina okwongerako obukodyo bwokka ku bintu ebitunuulirwa ku kibboodi nga enkolagana, ebifuga foomu, oba ekintu kyonna eky’okwesalirawo ekirina tabindex="0"
ekintu.
Okwongera ekiwandiiko ky’ebikozesebwa ku a disabled
oba .disabled
ekintu, teeka ekintu munda mu a <div>
era osiige ekiwandiiko ky’ebikozesebwa ku ekyo <div>
mu kifo ky’ekyo.
Ebyokulonda bisobola okuyisibwa nga biyita mu data attributes oba JavaScript. Ku bikwata ku data, ssaako erinnya ly'okulonda ku data-
, nga mu data-animation=""
.
Erinnya | Okuwandiika | Okukosamu | Okunnyonnyola |
---|---|---|---|
okukola ebifaananyi ebirina obulamu | boolean | kituufu | Kozesa enkyukakyuka ya CSS fade ku tooltip |
ekintu ekirimu ebintu | olunyiriri | -kyaamu | -kyaamu | Egattako ekintu ekikozesebwa ku kintu ekigere. Okugeza: |
okulwawo | ennamba | ekintu | 0. | Okulwawo okulaga n'okukweka tooltip (ms) - tekikwata ku kika kya manual trigger Singa ennamba eweebwa, okulwawo kukozesebwa ku byombi okukweka/okulaga Ensengeka y’ekintu eri nti: |
html | boolean | -kyaamu | Teeka HTML mu tooltip. Bwe kiba kya bulimba, enkola ya jQuery text ejja kukozesebwa okuyingiza ebirimu mu DOM. Kozesa ebiwandiiko bw'oba weeraliikirira obulumbaganyi bwa XSS. |
okuteekebwa mu kifo | olunyiriri | enkola | 'waggulu' | Engeri y'okuteeka ekiwandiiko ky'ebikozesebwa - waggulu | wansi | ku kkono | ku ddyo | auto. Omulimu bwe gukozesebwa okuzuula ekifo, guyitibwa nga tooltip DOM node ye argument yaayo esooka ate triggering element DOM node nga eyookubiri. Ensonga |
omusunsuzi | akaguwa | -kyaamu | Singa omusunsula aweebwa, ebintu ebikozesebwa bijja kuweebwa ebigendererwa ebiragiddwa. Mu nkola, kino kikozesebwa okusobozesa ebirimu ebya HTML ebikyukakyuka okuba n’obukodyo bw’ebikozesebwa obugattibwako. Laba kino n'ekyokulabirako ekirimu amawulire . |
ekifaananyi ky’ebifaananyi | akaguwa | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
Base HTML okukozesa nga okola tooltip. Tooltip's
Ekintu eky’okuzinga ekisinga ebweru kirina okuba ne |
omutwe | olunyiriri | enkola | '' . | Omuwendo gw'omutwe ogusookerwako singa Singa omulimu guweebwa, gujja kuyitibwa nga |
okusiikula | akaguwa | 'okussa essira ku 'hover'. | Engeri tooltip gy'etandikibwamu - nyweza | hover | okussa essira | maniyo. Oyinza okuyisa ebizibu ebiwerako; zaawule n’ekifo. manual tesobola kugattibwa wamu na kiziyiza kirala kyonna. |
ekifo eky’okulaba | olunyiriri | ekintu | enkola | { omusunsuzi: 'omubiri', padding: 0 } . | Akuuma tooltip mu nsalo za elementi eno. Okugeza: Singa omulimu guweebwa, guyitibwa nga ekintu ekiziyiza DOM node nga ensonga yaakyo yokka. Omu |
Enkola z’ebikozesebwa ssekinnoomu zisobola okulagibwa mu ngeri endala okuyita mu kukozesa ebikwata ku data, nga bwe kinnyonnyoddwa waggulu.
$().tooltip(options)
Egattako omukwasi w'ebikozesebwa ku kukungaanya elementi.
.tooltip('show')
Abikkula ekiwandiiko ky'ekintu ekiyitibwa tooltip. Edda eri oyo akubira nga tooltip tennalagibwa ddala (kwe kugamba nga shown.bs.tooltip
ekintu tekinnabaawo). Kino kitwalibwa nga "manual" triggering ya tooltip. Ebikozesebwa ebirina emitwe egy’obuwanvu bwa zero tebiragibwangako.
.tooltip('hide')
Ekweka ekiwandiiko ky'ekintu ekiyitibwa tooltip. Edda eri oyo akubira nga tooltip tennakwekebwa ddala (kwe kugamba nga hidden.bs.tooltip
ekintu tekinnabaawo). Kino kitwalibwa nga "manual" triggering ya tooltip.
.tooltip('toggle')
Ekyusakyusa ekintu ekiyitibwa tooltip. Edda eri oyo akubira nga tooltip tennalagibwa oba okukwekebwa ddala (kwe kugamba nga shown.bs.tooltip
oba hidden.bs.tooltip
ekintu tekinnabaawo). Kino kitwalibwa nga "manual" triggering ya tooltip.
.tooltip('destroy')
Ekweka n'okusaanyaawo ekintu ekiyitibwa tooltip. Tooltips ezikozesa delegation (ezitondebwa nga tukozesa option )selector
teziyinza kusaanawo kinnoomu ku descendant trigger elements.
Ekika ky’Ekibaddewo | Okunnyonnyola |
---|---|
show.bs.ekintu eky'okukozesa | Ekintu kino kikuba amangu ddala nga show enkola ya instance eyitiddwa. |
eragiddwa.bs.ekintu ekikozesebwa | Ekintu kino kikubwa nga tooltip ekoleddwa okulabika eri omukozesa (ejja kulinda enkyukakyuka za CSS okuggwa). |
hide.bs.ekintu eky'okukozesa | Ekintu kino kikubwa amangu ddala nga hide enkola ya instance eyitiddwa. |
ekiwandiiko ekikwekebwa.bs.tooltip | Ekintu kino kikubwa nga tooltip emaze okukwekebwa okuva eri omukozesa (ejja kulinda enkyukakyuka za CSS okuggwa). |
eyingiziddwa.bs.ekintu ekikozesebwa | Ekintu kino kigobwa oluvannyuma show.bs.tooltip lw'ekintu nga ekifaananyi ky'ekikozesebwa kyongeddwa ku DOM. |
Okwongerako obutonotono obubikkiddwako ebirimu, ng’ebyo ebiri ku iPad, ku kintu kyonna eky’okuteeka amawulire ag’okubiri.
Popovers nga omutwe n’ebirimu byombi biri zero-length tebiragibwangako.
Popovers zeetaaga tooltip plugin okuteekebwa mu nkyusa yo eya Bootstrap.
Olw'ensonga z'okukola, Tooltip ne Popover data-apis zibeera opt-in, ekitegeeza nti olina okuzitandika ggwe kennyini .
Engeri emu ey'okutandikawo popovers zonna ku lupapula yandibadde okuzilonda okusinziira ku data-toggle
attribute yazo:
Bw’oba okozesa popovers ku elementi eziri munda mu a .btn-group
oba an .input-group
, oba ku elementi ezikwatagana n’emmeeza ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, <tfoot>
), ojja kuba olina okulaga eky’okulonda container: 'body'
(ewandiikiddwa wansi) okwewala ebizibu ebiteetaagibwa (nga elementi okukula nga egazi ne/ oba okufiirwa enkoona zaayo ezeetooloovu nga popover ekoleddwa).
Okwongera popover ku a disabled
oba .disabled
element, teeka element munda mu a <div>
era osiige popover ku ekyo <div>
mu kifo ky’ekyo.
Oluusi oyagala okwongerako popover ku hyperlink ezizinga layini eziwera. Enneeyisa esookerwako eya popover plugin kwe kugiteeka wakati mu horizontal ne vertically. Okwongerako white-space: nowrap;
ku nnanga zo okwewala kino.
Enkola nnya ziriwo: waggulu, ku ddyo, wansi, ne kkono nga zikwatagana.
Sed posuere consectetur esangibwa mu kifo ekiyitibwa lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia ekisenge ky’omu lubuto ekiyitibwa vestibulum.
Sed posuere consectetur esangibwa mu kifo ekiyitibwa lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia ekisenge ky’omu lubuto ekiyitibwa vestibulum.
Sed posuere consectetur esangibwa mu kifo ekiyitibwa lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia ekisenge ky’omu lubuto ekiyitibwa vestibulum.
Sed posuere consectetur esangibwa mu kifo ekiyitibwa lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia ekisenge ky’omu lubuto ekiyitibwa vestibulum.
Kozesa focus
trigger okugoba popovers ku click okuddako omukozesa kw'akola.
Okusobola enneeyisa entuufu eya cross-browser ne cross-platform, olina okukozesa <a>
tag, so si tag <button>
, era era olina okussaamu attributes role="button"
ne .tabindex
Ssobozesa popovers nga oyita mu JavaScript:
Ebyokulonda bisobola okuyisibwa nga biyita mu data attributes oba JavaScript. Ku bikwata ku data, ssaako erinnya ly'okulonda ku data-
, nga mu data-animation=""
.
Erinnya | Okuwandiika | Okukosamu | Okunnyonnyola |
---|---|---|---|
okukola ebifaananyi ebirina obulamu | boolean | kituufu | Kozesa enkyukakyuka ya CSS fade ku popover |
ekintu ekirimu ebintu | olunyiriri | -kyaamu | -kyaamu | Agattako popover ku elementi eyeetongodde. Okugeza: |
okwesiima | olunyiriri | enkola | '' . | Omuwendo gw'ebirimu ogusookerwako singa Singa omulimu guweebwa, gujja kuyitibwa nga |
okulwawo | ennamba | ekintu | 0. | Okulwawo okulaga n'okukweka popover (ms) - tekikwata ku kika kya manual trigger Singa ennamba eweebwa, okulwawo kukozesebwa ku byombi okukweka/okulaga Ensengeka y’ekintu eri nti: |
html | boolean | -kyaamu | Teeka HTML mu popover. Bwe kiba kya bulimba, enkola ya jQuery text ejja kukozesebwa okuyingiza ebirimu mu DOM. Kozesa ebiwandiiko bw'oba weeraliikirira obulumbaganyi bwa XSS. |
okuteekebwa mu kifo | olunyiriri | enkola | 'kituufu' | Engeri y'okuteeka popover - waggulu | wansi | ku kkono | ku ddyo | auto. Omulimu bwe gukozesebwa okuzuula ekifo, guyitibwa nga popover DOM node nga ensonga yaayo esooka ate triggering element DOM node nga eyookubiri. Ensonga |
omusunsuzi | akaguwa | -kyaamu | Singa omusunsula aweebwa, ebintu bya popover bijja kuweebwa ebigendererwa ebiragiddwa. Mu nkola, kino kikozesebwa okusobozesa ebirimu bya HTML ebikyukakyuka okuba ne popovers ezigattibwako. Laba kino n'ekyokulabirako ekirimu amawulire . |
ekifaananyi ky’ebifaananyi | akaguwa | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' |
Base HTML okukozesa nga okola popover. Popover's Popover's
Ekintu eky’okuzinga ekisinga ebweru kirina okuba ne |
omutwe | olunyiriri | enkola | '' . | Omuwendo gw'omutwe ogusookerwako singa Singa omulimu guweebwa, gujja kuyitibwa nga |
okusiikula | akaguwa | 'nyiga'. | Engeri popover gy'etandika - nyweza | hover | okussa essira | maniyo. Oyinza okuyisa ebizibu ebiwerako; zaawule n’ekifo. manual tesobola kugattibwa wamu na kiziyiza kirala kyonna. |
ekifo eky’okulaba | olunyiriri | ekintu | enkola | { omusunsuzi: 'omubiri', padding: 0 } . | Akuuma popover mu nsalo za elementi eno. Okugeza: Singa omulimu guweebwa, guyitibwa nga ekintu ekiziyiza DOM node nga ensonga yaakyo yokka. Ensonga |
Enkola za popovers ssekinnoomu zisobola mu ngeri endala okulagibwa okuyita mu kukozesa data attributes, nga bwe kinnyonnyoddwa waggulu.
$().popover(options)
Etandikawo popovers olw'okukung'aanya elementi.
.popover('show')
Abikkula popover ya elementi. Edda eri oyo akubira nga popover tennalagibwa ddala (kwe kugamba nga shown.bs.popover
ekintu tekinnabaawo). Kino kitwalibwa nga "manual" triggering ya popover. Popovers nga omutwe gwazo n’ebirimu byombi biri zero-length tebiragibwangako.
.popover('hide')
Akweka popover ya elementi. Edda eri oyo akubira nga popover tennakwekebwa ddala (kwe kugamba nga hidden.bs.popover
ekintu tekinnabaawo). Kino kitwalibwa nga "manual" triggering ya popover.
.popover('toggle')
Ekyusakyusa popover ya elementi. Edda eri oyo akubira nga popover tennalagibwa oba okukwekebwa ddala (kwe kugamba nga shown.bs.popover
oba hidden.bs.popover
ekintu tekinnabaawo). Kino kitwalibwa nga "manual" triggering ya popover.
.popover('destroy')
Akweka era asaanyaawo popover ya elementi. Popovers ezikozesa delegation (ezitondebwa nga tukozesa option )selector
teziyinza kuzikirizibwa kinnoomu ku descendant trigger elements.
Ekika ky’Ekibaddewo | Okunnyonnyola |
---|---|
show.bs.obwavu | Ekintu kino kikuba amangu ddala nga show enkola ya instance eyitiddwa. |
alagiddwa.bs.obwavu | Ekintu kino kigobwa nga popover ekoleddwa okulabika eri omukozesa (ejja kulinda enkyukakyuka za CSS okuggwa). |
okukweka.bs.obwavu | Ekintu kino kikubwa amangu ddala nga hide enkola ya instance eyitiddwa. |
okukwekebwa.bs.obwavu | Ekintu kino kigobwa nga popover emaze okukwekebwa okuva eri omukozesa (ejja kulinda enkyukakyuka za CSS okuggwa). |
eyingiziddwa.bs.obwavu | Omukolo guno gugobwa oluvannyuma show.bs.popover lw'omukolo nga popover template eyongezeddwa ku DOM. |
Okwongerako enkola y'okugoba ku bubaka bwonna obw'okulabula ne plugin eno.
Nga okozesa .close
button, erina okuba omwana asooka owa .alert-dismissible
era tewali biwandiiko biyinza kujja mu maaso gaayo mu markup.
Kyusa kino ne kiri oddemu ogezeeko. Duis mollis, est non commodo luctus, nisi erat ekika ky’omugongo, eget lacinia odio sem nec elit. Cras mattis consectetur purus etuula mu kizimbulukusa.
Just add data-dismiss="alert"
ku close button yo okuwa automatically okuwa alert close functionality. Okuggalawo okulabula kukiggya mu DOM.
Okusobola okuba nga alerts zo zikozesa animation nga ziggalawo, kakasa nti zirina .fade
ne.in
classes ezaakozesebwa edda ku zo.
$().alert()
Ekola okulabula okuwuliriza ebibaawo mu kunyiga ku elementi z’ezzadde ezirina data-dismiss="alert"
attribute. (Tekyetaagisa nga okozesa data-api's auto-initialization.)
$().alert('close')
Eggalawo okulabula ng'akuggya mu DOM. Singa .fade
ne .in
classes zibeerawo ku elementi, okulabula kujja kuzikira nga tekunnaggyibwawo.
Bootstrap's alert plugin eraga ebitonotono ebibaawo olw'okuyunga mu nkola y'okulabula.
Ekika ky’Ekibaddewo | Okunnyonnyola |
---|---|
okuggalawo.bs.okulabula | Ekintu kino kikuba amangu ddala nga close enkola ya instance eyitiddwa. |
eggaddwa.bs.okulabula | Ekintu kino kikubwa nga okulabula kuggaddwa (kijja kulinda enkyukakyuka za CSS okuggwa). |
Kola ebisingawo ne buttons. Control button states oba tonda ebibinja bya buttons ku bitundu ebisingawo nga toolbars.
Firefox enywerera ku mbeera z'okufuga ffoomu (obulema n'okukeberebwa) mu kutikka empapula zonna . Eky'okugonjoola kino kwe kukozesa autocomplete="off"
. Laba ekizibu kya Mozilla #654072 .
Okwongerako data-loading-text="Loading..."
okukozesa embeera y'okutikka ku bbaatuuni.
Ekintu kino tekikozesebwa okuva ku v3.3.5 era kyaggyibwawo mu v4.
Ku lw'obulungi bw'okwolesebwa kuno, tukozesa data-loading-text
ne $().button('loading')
, naye eyo si y'embeera yokka gy'osobola okukozesa. Laba ebisingawo ku kino wansi mu $().button(string)
biwandiiko .
Okwongerako data-toggle="button"
okukola toggling ku button emu.
.active
eraaria-pressed="true"
Ku buttons ezikyusiddwa nga tezinnabaawo, olina okugattako .active
ekibiina aria-pressed="true"
n'ekintu ku button
yourself.
Okwongera data-toggle="buttons"
ku .btn-group
kasanduuko akalimu oba ebiyingizibwa ku leediyo okusobozesa okukyusakyusa mu sitayiro zaabwe.
.active
Ku by'okulonda ebirondeddwa, olina okwongera .active
ekibiina ku input's label
ggwe kennyini.
Singa embeera erongooseddwa eya button ya checkbox etereezebwa awatali kukuba click
kintu ku button (okugeza okuyita <input type="reset">
oba okuyita mu kuteekawo checked
eky'obugagga ky'okuyingiza), ojja kwetaaga okukyusa .active
ekibiina ku input's label
ggwe kennyini.
$().button('toggle')
Ekyusakyusa embeera y'okusika. Awa button endabika nti ebadde ekozeseddwa.
$().button('reset')
Ezzaawo embeera ya button - ekyusa ebiwandiiko okudda mu biwandiiko eby'olubereberye. Enkola eno ya asynchronous era ekomawo nga resetting tennaggwa ddala.
$().button(string)
Ewanyisiganya ebiwandiiko ku mbeera yonna eya data etegeezeddwa ekiwandiiko.
Plugin ekyukakyuka ekozesa kiraasi ntono olw’enneeyisa ennyangu ey’okukyusakyusa.
Okugwa kyetaagisa plugin y'enkyukakyuka okuteekebwa mu nkyusa yo eya Bootstrap.
Nywa ku buttons wansi okulaga n'okukweka elementi endala ng'oyita mu nkyukakyuka za kiraasi:
.collapse
akweka ebirimu.collapsing
ekozesebwa mu biseera by’enkyukakyuka.collapse.in
eraga ebirimuOsobola okukozesa enkolagana n'ekintu href
, oba bbaatuuni eriko data-target
ekintu. Mu mbeera zombi, the data-toggle="collapse"
is required.
Gaziya enneeyisa y'okugwa esookerwako okukola accordion n'ekitundu ky'ekipande.
Era kisoboka okukyusakyusa out .panel-body
s ne .list-group
s.
Kakasa nti oyongera aria-expanded
ku kintu ekifuga. Ekintu kino kitegeeza mu bulambulukufu embeera eriwo kati ey’ekintu ekiyinza okugwa okusengejja abasomi ne tekinologiya ow’okuyamba afaananako bwetyo. Singa ekintu ekiyinza okugwa kiggalwawo nga bwe kibadde, kisaana okuba n'omuwendo gwa aria-expanded="false"
. Bw'oba otaddewo ekintu ekiyinza okugwa okubeera ekiggule nga bwe kibadde ng'okozesa in
kiraasi, teeka aria-expanded="true"
ku kifuga mu kifo ky'ekyo. Plugin ejja kukyusakyusa ekintu kino mu ngeri ey’otoma okusinziira ku oba ekintu ekiyinza okugwa kigguddwawo oba kiggaddwa oba nedda.
Okugatta ku ekyo, singa ekintu kyo ekifuga kiba kigenderera ekintu kimu ekiyinza okugwa – kwe kugamba data-target
ekintu ekiraga ekintu id
ekisunsuddwa – oyinza okwongerako ekintu ekirala aria-controls
ku kintu ekifuga, ekirimu id
eky’ekintu ekiyinza okugwa. Ebisoma ku ssirini eby’omulembe ne tekinologiya ow’enjawulo ayambako bakozesa ekintu kino okuwa abakozesa enkola endala ennyimpi okugenda butereevu ku kintu kyennyini ekiyinza okugwa.
Plugin y’okugwa ekozesa kiraasi ntono okukwata okusitula ebizito:
.collapse
akweka ebirimu.collapse.in
eraga ebirimu.collapsing
eyongerwako ng’enkyukakyuka etandise, n’eggyibwawo ng’eweddeEbisulo bino osobola okubisanga mu component-animations.less
.
Just add data-toggle="collapse"
ne a data-target
ku element okugaba automatically control ya element eyinza okugwa. Ekintu data-target
kikkiriza ekisunsula CSS okukozesa okugwa. Kakasa nti ogattako kiraasi collapse
ku elementi eyinza okugwa. Bw'oba oyagala kiggule nga kisookerwako, yongera ku kiraasi ey'okugattako in
.
Okwongera okuddukanya ekibiina ekiringa accordion ku control eyinza okugwa, yongera ku data attribute data-parent="#selector"
. Laba demo olabe kino mu bikolwa.
Ssobozesa mu ngalo ne:
Ebyokulonda bisobola okuyisibwa nga biyita mu data attributes oba JavaScript. Ku bikwata ku data, ssaako erinnya ly'okulonda ku data-
, nga mu data-parent=""
.
Erinnya | okuwandiika | okukosamu | okunnyonnyola |
---|---|---|---|
omuzadde | omusunsuzi | -kyaamu | Singa ekisunsula kiweebwa, olwo ebintu byonna ebiyinza okugwa wansi w'omuzadde alagiddwa bijja kuggalwawo ng'ekintu kino ekiyinza okugwa kiragiddwa. (okufaananako n’enneeyisa ya accordion ey’ennono - kino kisinziira ku panel kiraasi) |
okukyusakyusa | boolean | kituufu | Ekyusa ekintu ekiyinza okugwa ku kuyita |
.collapse(options)
Ekola ebirimu byo nga ekintu ekiyinza okugwa. Akkiriza eby'okulonda eby'okwesalirawo object
.
.collapse('toggle')
Ekyusa ekintu ekiyinza okugwa okukiragibwa oba okukwekebwa. Edda eri oyo ayita nga ekintu ekiyinza okugwa tekinnalagibwa oba okukwekebwa ddala (kwe kugamba nga shown.bs.collapse
oba hidden.bs.collapse
ekintu tekinnabaawo).
.collapse('show')
Alaga ekintu ekiyinza okugwa. Edda eri oyo ayita nga ekintu ekiyinza okugwa tekinnalagibwa ddala (kwe kugamba nga shown.bs.collapse
ekintu tekinnabaawo).
.collapse('hide')
Ekweka ekintu ekiyinza okugwa. Edda eri oyo ayita nga ekintu ekiyinza okugwa tekinnakwekebwa ddala (kwe kugamba nga hidden.bs.collapse
ekintu tekinnabaawo).
Bootstrap's collapse class eraga ebitonotono ebibaawo olw'oku hooking mu collapse functionality.
Ekika ky’Ekibaddewo | Okunnyonnyola |
---|---|
show.bs.okugwa | Ekintu kino kikuba amangu ddala nga show enkola ya instance eyitiddwa. |
eragiddwa.bs.okugwa | Ekintu kino kikubwa nga ekintu ekigwa kikoleddwa okulabika eri omukozesa (kijja kulinda enkyukakyuka za CSS okuggwa). |
okukweka.bs.okugwa | Ekintu kino kikubwa amangu ddala hide ng’enkola eyitiddwa. |
ekikwekebwa.bs.okugwa | Ekintu kino kikubwa nga ekintu ekigwa kikwekeddwa okuva eri omukozesa (kijja kulinda enkyukakyuka za CSS okuggwa). |
Ekitundu kya slideshow eky’okuvuga obugaali okuyita mu elementi, nga carousel. Nested carousels teziwagirwa.
Ekitundu kya carousel okutwalira awamu tekituukana na mutindo gwa kutuuka ku bantu. Bw’oba weetaaga okugoberera amateeka, nsaba olowooze ku ngeri endala ez’okwanjuliramu ebirimu byo.
Bootstrap ekozesa CSS3 yokka ku animations zaayo, naye Internet Explorer 8 & 9 tewagira CSS properties ezeetaagisa. Bwe kityo, tewali bifaananyi bya nkyukakyuka ya slide nga okozesa browser zino. Tusazeewo mu bugenderevu obutassaamu jQuery-based fallbacks ku nkyukakyuka.
Ekibiina .active
kyetaaga okugattibwa ku emu ku slayidi. Bwe kitaba ekyo, carousel tejja kulabika.
The .glyphicon .glyphicon-chevron-left
ne .glyphicon .glyphicon-chevron-right
classes tezitegeeza nti zeetaagibwa ku controls. Bootstrap egaba .icon-prev
era .icon-next
nga plain unicode alternatives.
Okwongera ebigambo ku slide zo mu ngeri ennyangu nga .carousel-caption
elementi eri munda mu .item
. Teeka kumpi HTML yonna ey’okwesalirawo munda eyo era ejja kusengekebwa mu ngeri ey’otoma era efuulibwe ensengeka.
Carousels zeetaaga okukozesa an id
ku kibya ekisinga ebweru (the .carousel
) okusobola carousel controls okukola obulungi. Bw’oba oyongerako carousel eziwera, oba ng’okyusa carousel’s id
, kakasa nti ozza obuggya ebifuga ebikwatagana.
Kozesa data attributes okwanguyirwa okufuga ekifo kya carousel. data-slide
ekkiriza ebigambo ebikulu prev
oba next
, ekikyusa ekifo kya slayidi okusinziira ku kifo kyayo ekiriwo kati. Ekirala, kozesa data-slide-to
okuyisa omuwendo gwa slayidi embisi ku carousel data-slide-to="2"
, ekikyusa ekifo kya slayidi okudda ku muwendo ogw’enjawulo ogutandikira ku 0
.
Attribute data-ride="carousel"
ekozesebwa okussaako akabonero ku carousel nga animating okutandika ku page load. Tesobola kukozesebwa wamu ne (redundant and unnecessary) okutandika kwa JavaScript okw’olwatu okwa carousel y’emu.
Kuba carousel mu ngalo nga okozesa:
Ebyokulonda bisobola okuyisibwa nga biyita mu data attributes oba JavaScript. Ku bikwata ku data, ssaako erinnya ly'okulonda ku data-
, nga mu data-interval=""
.
Erinnya | okuwandiika | okukosamu | okunnyonnyola |
---|---|---|---|
interval | omuwendo | 5000 | Omuwendo gw’obudde okulwawo wakati w’okuvuga ekintu mu ddigi mu ngeri ey’otoma. Bwe kiba kya bulimba, carousel tejja kutambula butereevu. |
okuyimirizamu | olunyiriri | tekili mu mateeka | "okuwuubaala". | Singa eteekebwa ku "hover" , eyimiriza okuvuga obugaali bwa carousel ku mouseenter n'okuddamu okuvuga obugaali bwa carousel ku mouseleave . Singa oteekebwa ku null , okuwuubaala ku carousel tekijja kugiyimiriza. |
okuzinga | boolean | kituufu | Oba carousel erina okutambula obutasalako oba okuba n’ebifo ebikaluba. |
ekitabo ekikwata ku kibboodi | boolean | kituufu | Oba carousel erina okuddamu ku bibaddewo ku keyboard. |
.carousel(options)
Atandikawo carousel n’enkola ez’okwesalirawo object
n’atandika okuvuga obugaali ng’ayita mu bintu.
.carousel('cycle')
Ezingulula okuyita mu bintu bya carousel okuva ku kkono okudda ku ddyo.
.carousel('pause')
Ayimiriza carousel okuvuga obugaali okuyita mu bintu.
.carousel(number)
Ezingulula carousel ku fuleemu entongole (0 okusinziira, okufaananako n'ensengekera).
.carousel('prev')
Enzirukanya okutuuka ku kintu ekyayita.
.carousel('next')
Ezingulula okutuuka ku kintu ekiddako.
Bootstrap's carousel class eraga ebibaddewo bibiri eby'oku hooking mu carousel functionality.
Ebintu byombi birina eby’obugagga bino wammanga eby’okwongerako:
direction
: Obulagirizi carousel mw’eseeyeeya (oba "left"
oba "right"
).relatedTarget
: Ekintu kya DOM ekiseerezebwa mu kifo nga ekintu ekikola.Ebintu byonna ebibaawo mu carousel bikubwa ku carousel yennyini (kwe kugamba ku <div class="carousel">
).
Ekika ky’Ekibaddewo | Okunnyonnyola |
---|---|
slide.bs.ekyuma ekiyitibwa carousel | Ekintu kino kikuba amangu ddala nga slide enkola y'ekyokulabirako eyitibwa. |
ekiseeyeeya.bs.carousel | Ekintu kino kikubwa nga carousel emalirizza enkyukakyuka yaayo eya slide. |
Plugin y'okugattako ekyusakyusa position: fixed;
n'okuggyako, ng'ekoppa ekikolwa ekisangibwa ne position: sticky;
. Subnavigation ku ddyo ye live demo ya affix plugin.
Kozesa affix plugin ng'oyita mu data attributes oba mu ngalo ne JavaScript yo. Mu mbeera zombi, olina okuwa CSS ku kifo n'obugazi bw'ebirimu byo ebiteekeddwako.
Weetegereze: Tokozesa affix plugin ku elementi erimu mu elementi eteekeddwa mu kifo ekituufu, gamba nga ennyiriri ezisiddwa oba ezinyigirizibwa, olw'ekizibu ky'okulaga Safari .
Affix plugin ekyusakyusa wakati wa kiraasi ssatu, buli emu ekiikirira embeera eyeetongodde: .affix
, .affix-top
, ne .affix-bottom
. Olina okuwa emisono, okuggyako position: fixed;
ku .affix
, ku bibiina bino ggwe kennyini (nga tebyetongodde ku plugin eno) okukwata ebifo ebituufu.
Laba engeri affix plugin gy'ekola:
.affix-top
okulaga nti elementi eri mu kifo kyakyo eky’oku ntikko-ekisinga. Mu kiseera kino tewali kuteeka CSS kwetaagibwa..affix
wakyusa .affix-top
n'okuteeka position: fixed;
(eweebwa CSS ya Bootstrap)..affix
ne .affix-bottom
. Okuva offsets bweziba za kwesalirawo, okuteekawo emu kyetaagisa okuteekawo CSS esaanira. Mu mbeera eno, yongerako position: absolute;
bwe kiba kyetaagisa. Plugin ekozesa data attribute oba JavaScript option okuzuula wa okuteeka element okuva awo.Goberera emitendera egyo waggulu okuteekawo CSS yo ku emu ku nkola z'okukozesa wansi.
Okusobola okwanguyirwa okwongera ku nneeyisa y’okugatta ku elementi yonna, yongera data-spy="affix"
ku elementi gy’oyagala okuketta. Kozesa offsets okunnyonnyola ddi lw'olina okukyusakyusa okusiba ekintu.
Kuba ku affix plugin ng'oyita mu JavaScript:
Ebyokulonda bisobola okuyisibwa nga biyita mu data attributes oba JavaScript. Ku bikwata ku data, ssaako erinnya ly'okulonda ku data-
, nga mu data-offset-top="200"
.
Erinnya | okuwandiika | okukosamu | okunnyonnyola |
---|---|---|---|
offset | ennamba | omulimu | ekintu | 10. 10 | Pixels oku offset okuva ku screen nga obala ekifo ky'omuzingo. Singa ennamba emu eweebwa, offset ejja kukozesebwa mu ndagiriro zombi eza waggulu ne wansi. Okuwa eky'enjawulo, wansi n'okungulu offset just okuwa ekintu offset: { top: 10 } oba offset: { top: 10, bottom: 5 } . Kozesa omulimu nga weetaaga okubala offset mu ngeri ey’amaanyi. |
ssabaawa | omusunsuzi | node | jEkitundu ky'okubuuza | ekintu window ekyo |
Laga ekintu ekigendererwa eky'okugattako. |
.affix(options)
Ekola ebirimu byo nga ebirimu ebiteekeddwako. Akkiriza eby'okulonda eby'okwesalirawo object
.
.affix('checkPosition')
Eddamu okubala embeera y’ekigambo okusinziira ku bipimo, ekifo, n’ekifo ky’omuzingo gw’ebintu ebikwatagana. Ebika bya .affix
, .affix-top
, ne .affix-bottom
byongerwa ku oba biggyibwa mu birimu ebiteekeddwako okusinziira ku mbeera empya. Enkola eno yeetaaga okuyitibwa buli lwe wabaawo ebipimo by’ebirimu ebiteekeddwako oba ekintu ekigendererwa bikyusibwa, okukakasa nti ebirimu ebiteekeddwako biteekebwa mu kifo ekituufu.
Bootstrap's affix plugin eraga ebitonotono ebibaawo olw'okukwata mu nkola ya affix.
Ekika ky’Ekibaddewo | Okunnyonnyola |
---|---|
okussaako.bs.okussaako | Ekintu kino kikuba amangu ddala nga elementi tennateekebwako. |
ekiteekeddwako.bs.affix | Ekintu kino kikubwa oluvannyuma lw'ekintu okuteekebwako. |
affix-oku ntikko.bs.affix | Ekintu kino kikuba amangu ddala nga elementi tennateekebwako-top. |
affixed-oku ntikko.bs.affix | Ekintu kino kikubwa oluvannyuma lw'ekintu okuteekebwako-ku ntikko. |
affix-wansi.bs.omugatteko | Ekintu kino kikuba amangu ddala nga elementi tennaba kuteekebwako-wansi. |
ekiteekeddwako-wansi.bs.affix | Ekintu kino kikubwa oluvannyuma lw'ekintu okuteekebwako-wansi. |