SourceIbitonyanga
Kuzuza ibice byuzuye kugirango werekane urutonde rwihuza nibindi hamwe na Bootstrap yamanutse.
Incamake
Ibitonyanga birashobora guhindagurika, guhuza ibice kugirango werekane urutonde rwihuza nibindi byinshi. Byakozwe muburyo bwimikorere ya Bootstrap yamanutse plugin ya JavaScript. Barahindurwa mukanda, ntabwo ari ukuzunguruka; iki nicyemezo cyo gushushanya nkana .
Ibitonyanga byubatswe kububiko bwibitabo byabandi, Popper.js , itanga umwanya uhagaze hamwe no kureba ibintu. Wemeze gushyiramo popper.min.js mbere ya JavaScript ya Bootstrap cyangwa ukoreshe bootstrap.bundle.min.js
/ bootstrap.bundle.js
irimo Popper.js. Popper.js ntabwo ikoreshwa mugushira ibitonyanga muri navbars nubwo nkibikorwa bya dinamike bidasabwa.
Niba wubaka JavaScript yacu kuva isoko, birasabautil.js
.
Kuboneka
Igipimo cya WAI ARIA gisobanura role="menu"
widget ifatika , ariko ibi birihariye kubisabwa-nkibikubiyemo bitera ibikorwa cyangwa imikorere. Ibikubiyemo bya ARIA birashobora gusa kuba bikubiyemo ibintu, kugenzura agasanduku k'ibikubiyemo, ibintu bya radiyo buto ya menu, amatsinda ya buto ya radio, na sub-menus.
Ibitonyanga bya Bootstrap, kurundi ruhande, byashizweho kugirango bibe rusange kandi bikurikizwa mubihe bitandukanye no kuranga imiterere. Kurugero, birashoboka gukora ibitonyanga birimo inyongeramusaruro ninyongera kugenzura, nkibice byo gushakisha cyangwa ifishi yinjira. Kubwiyi mpamvu, Bootstrap ntabwo yiteze (cyangwa guhita yongeraho) icyaricyo cyose role
nibiranga aria-
bisabwa kuri ARIA nyayo . Abanditsi bagomba gushyiramo ibi biranga byihariye ubwabo.
Ariko, Bootstrap yongeramo inkunga-yubufasha bwa menu ya clavier isanzwe ikora, nkubushobozi bwo kunyura .dropdown-item
mubintu bitandukanye ukoresheje urufunguzo rwa indanga no gufunga menu ESC nurufunguzo.
Ingero
Kuzuza ibimanuka (buto yawe cyangwa ihuza) na menu yamanutse imbere .dropdown
, cyangwa ikindi kintu gitangaza position: relative;
. Ibitonyanga birashobora gukururwa bivuye <a>
cyangwa <button>
ibintu kugirango bihuze neza nibyo ukeneye.
Ikintu icyo aricyo cyose .btn
gishobora guhinduka kumanuka uhindagurika hamwe nibimenyetso byahindutse. Dore uburyo ushobora kubashyira mubikorwa hamwe <button>
nibintu:
Gukoporora
<div class= "dropdown" >
<button class= "btn btn-secondary dropdown-toggle" type= "button" id= "dropdownMenuButton" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
Dropdown button
</button>
<div class= "dropdown-menu" aria-labelledby= "dropdownMenuButton" >
<a class= "dropdown-item" href= "#" > Action</a>
<a class= "dropdown-item" href= "#" > Another action</a>
<a class= "dropdown-item" href= "#" > Something else here</a>
</div>
</div>
Kandi hamwe <a>
nibintu:
Gukoporora
<div class= "dropdown" >
<a class= "btn btn-secondary dropdown-toggle" href= "#" role= "button" id= "dropdownMenuLink" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
Dropdown link
</a>
<div class= "dropdown-menu" aria-labelledby= "dropdownMenuLink" >
<a class= "dropdown-item" href= "#" > Action</a>
<a class= "dropdown-item" href= "#" > Another action</a>
<a class= "dropdown-item" href= "#" > Something else here</a>
</div>
</div>
Igice cyiza nuko ushobora kubikora ukoresheje buto iyo ariyo yose, nayo:
Ibanze
Secondary
Intsinzi
Amakuru
Iburira
Akaga
Gukoporora
<!-- Example single danger button -->
<div class= "btn-group" >
<button type= "button" class= "btn btn-danger dropdown-toggle" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
Action
</button>
<div class= "dropdown-menu" >
<a class= "dropdown-item" href= "#" > Action</a>
<a class= "dropdown-item" href= "#" > Another action</a>
<a class= "dropdown-item" href= "#" > Something else here</a>
<div class= "dropdown-divider" ></div>
<a class= "dropdown-item" href= "#" > Separated link</a>
</div>
</div>
Mu buryo busa nabwo, kora ibice bitandukanya ibice byamanutse hamwe nikimenyetso kimwe kimwe na buto imwe yamanutse, ariko hamwe no kongeramo .dropdown-toggle-split
umwanya ukwiye hafi yigitonyanga.
Dukoresha iri somo ryinyongera kugirango tugabanye horizontal padding
kumpande zombi za caret kuri 25% hanyuma dukureho margin-left
ibyo byongeweho kubisanzwe bya buto. Izo mpinduka zinyongera zituma caret yibanze muri bouton igabanijwe kandi igatanga ahantu hanini cyane hit hitabwa kuruhande rwa buto nkuru.
Ibanze
Toggle Ibitonyanga
Secondary
Toggle Ibitonyanga
Intsinzi
Toggle Ibitonyanga
Amakuru
Toggle Ibitonyanga
Iburira
Toggle Ibitonyanga
Akaga
Toggle Ibitonyanga
Gukoporora
<!-- Example split danger button -->
<div class= "btn-group" >
<button type= "button" class= "btn btn-danger" > Action</button>
<button type= "button" class= "btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
<span class= "sr-only" > Toggle Dropdown</span>
</button>
<div class= "dropdown-menu" >
<a class= "dropdown-item" href= "#" > Action</a>
<a class= "dropdown-item" href= "#" > Another action</a>
<a class= "dropdown-item" href= "#" > Something else here</a>
<div class= "dropdown-divider" ></div>
<a class= "dropdown-item" href= "#" > Separated link</a>
</div>
</div>
Ingano
Utubuto tumanuka dukorana na buto yubunini bwose, harimo nibisanzwe no kugabanura ibitonyanga.
Gukoporora
<!-- Large button groups (default and split) -->
<div class= "btn-group" >
<button class= "btn btn-secondary btn-lg dropdown-toggle" type= "button" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
Large button
</button>
<div class= "dropdown-menu" >
...
</div>
</div>
<div class= "btn-group" >
<button class= "btn btn-secondary btn-lg" type= "button" >
Large split button
</button>
<button type= "button" class= "btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
<span class= "sr-only" > Toggle Dropdown</span>
</button>
<div class= "dropdown-menu" >
...
</div>
</div>
<!-- Small button groups (default and split) -->
<div class= "btn-group" >
<button class= "btn btn-secondary btn-sm dropdown-toggle" type= "button" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
Small button
</button>
<div class= "dropdown-menu" >
...
</div>
</div>
<div class= "btn-group" >
<button class= "btn btn-secondary btn-sm" type= "button" >
Small split button
</button>
<button type= "button" class= "btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
<span class= "sr-only" > Toggle Dropdown</span>
</button>
<div class= "dropdown-menu" >
...
</div>
</div>
Icyerekezo
Ibitonyanga
Imbarutso yamanutse iboneka hejuru yibintu wongeyeho .dropup
kubabyeyi.
Ibitonyanga
Gutandukanya ibitonyanga
Toggle Ibitonyanga
Gukoporora
<!-- Default dropup button -->
<div class= "btn-group dropup" >
<button type= "button" class= "btn btn-secondary dropdown-toggle" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
Dropup
</button>
<div class= "dropdown-menu" >
<!-- Dropdown menu links -->
</div>
</div>
<!-- Split dropup button -->
<div class= "btn-group dropup" >
<button type= "button" class= "btn btn-secondary" >
Split dropup
</button>
<button type= "button" class= "btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
<span class= "sr-only" > Toggle Dropdown</span>
</button>
<div class= "dropdown-menu" >
<!-- Dropdown menu links -->
</div>
</div>
Ibitonyanga
Imbarutso yamanutse iboneka iburyo bwibintu wongeyeho .dropright
kubabyeyi.
Ibitonyanga
Gutandukanya iburyo
Toggle Ibitonyanga
Gukoporora
<!-- Default dropright button -->
<div class= "btn-group dropright" >
<button type= "button" class= "btn btn-secondary dropdown-toggle" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
Dropright
</button>
<div class= "dropdown-menu" >
<!-- Dropdown menu links -->
</div>
</div>
<!-- Split dropright button -->
<div class= "btn-group dropright" >
<button type= "button" class= "btn btn-secondary" >
Split dropright
</button>
<button type= "button" class= "btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
<span class= "sr-only" > Toggle Dropright</span>
</button>
<div class= "dropdown-menu" >
<!-- Dropdown menu links -->
</div>
</div>
Ibitonyanga
Imbarutso yamanutse iboneka ibumoso bwibintu wongeyeho .dropleft
kubabyeyi.
Ibitonyanga
Toggle Ibitonyanga
Gutandukanya ibitonyanga
Gukoporora
<!-- Default dropleft button -->
<div class= "btn-group dropleft" >
<button type= "button" class= "btn btn-secondary dropdown-toggle" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
Dropleft
</button>
<div class= "dropdown-menu" >
<!-- Dropdown menu links -->
</div>
</div>
<!-- Split dropleft button -->
<div class= "btn-group" >
<div class= "btn-group dropleft" role= "group" >
<button type= "button" class= "btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
<span class= "sr-only" > Toggle Dropleft</span>
</button>
<div class= "dropdown-menu" >
<!-- Dropdown menu links -->
</div>
</div>
<button type= "button" class= "btn btn-secondary" >
Split dropleft
</button>
</div>
Amateka yamanutse yibirimo yagombaga kuba amahuza, ariko ibyo ntibikiri kuri v4. Noneho urashobora guhitamo gukoresha <button>
ibintu mumanuka aho gukoresha <a>
s gusa.
Gukoporora
<div class= "dropdown" >
<button class= "btn btn-secondary dropdown-toggle" type= "button" id= "dropdownMenu2" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
Dropdown
</button>
<div class= "dropdown-menu" aria-labelledby= "dropdownMenu2" >
<button class= "dropdown-item" type= "button" > Action</button>
<button class= "dropdown-item" type= "button" > Another action</button>
<button class= "dropdown-item" type= "button" > Something else here</button>
</div>
</div>
Urashobora kandi gukora ibintu bitagabanije kumanura ibintu hamwe .dropdown-item-text
. Wumve neza ko wuburyo bwiza hamwe na CSS yihariye cyangwa ibikoresho byingirakamaro.
Gukoporora
<div class= "dropdown-menu" >
<span class= "dropdown-item-text" > Dropdown item text</span>
<a class= "dropdown-item" href= "#" > Action</a>
<a class= "dropdown-item" href= "#" > Another action</a>
<a class= "dropdown-item" href= "#" > Something else here</a>
</div>
Bikora
Ongeraho .active
mubintu mumanuka kugirango ubitondere nkibikorwa .
Gukoporora
<div class= "dropdown-menu" >
<a class= "dropdown-item" href= "#" > Regular link</a>
<a class= "dropdown-item active" href= "#" > Active link</a>
<a class= "dropdown-item" href= "#" > Another link</a>
</div>
Abamugaye
Ongeraho .disabled
mubintu biri kumanuka kugirango ubitondere nkuko byahagaritswe .
Gukoporora
<div class= "dropdown-menu" >
<a class= "dropdown-item" href= "#" > Regular link</a>
<a class= "dropdown-item disabled" href= "#" tabindex= "-1" aria-disabled= "true" > Disabled link</a>
<a class= "dropdown-item" href= "#" > Another link</a>
</div>
Mburabuzi, menu yamanutse ihita ishyirwa 100% uhereye hejuru no kuruhande rwibumoso rwababyeyi. Ongeraho iburyo .dropdown-menu-right
kugirango .dropdown-menu
uhuze menu yamanutse.
Umutwe! Ibitonyanga byashyizwe kumurongo dukesha Popper.js (usibye iyo bikubiye muri navbar).
Gukoporora
<div class= "btn-group" >
<button type= "button" class= "btn btn-secondary dropdown-toggle" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
Right-aligned menu
</button>
<div class= "dropdown-menu dropdown-menu-right" >
<button class= "dropdown-item" type= "button" > Action</button>
<button class= "dropdown-item" type= "button" > Another action</button>
<button class= "dropdown-item" type= "button" > Something else here</button>
</div>
</div>
Guhuza ibisubizo
Niba ushaka gukoresha ihuza ryitondewe, hagarika dinamike ihagaze wongeyeho data-display="static"
ikiranga kandi ukoreshe ibyiciro bitandukanye.
Guhuza iburyo ibimanuka hamwe nibisobanuro byatanzwe cyangwa binini, ongeraho .dropdown-menu{-sm|-md|-lg|-xl}-right
.
Ibumoso-buhujwe ariko iburyo buhujwe iyo ecran nini
Gukoporora
<div class= "btn-group" >
<button type= "button" class= "btn btn-secondary dropdown-toggle" data-toggle= "dropdown" data-display= "static" aria-haspopup= "true" aria-expanded= "false" >
Left-aligned but right aligned when large screen
</button>
<div class= "dropdown-menu dropdown-menu-lg-right" >
<button class= "dropdown-item" type= "button" > Action</button>
<button class= "dropdown-item" type= "button" > Another action</button>
<button class= "dropdown-item" type= "button" > Something else here</button>
</div>
</div>
Guhuza ibumoso bwamanutse hamwe nibisobanuro byatanzwe cyangwa binini, ongeraho .dropdown-menu-right
na .dropdown-menu{-sm|-md|-lg|-xl}-left
.
Iburyo-iburyo ariko ibumoso buhujwe iyo ecran nini
Gukoporora
<div class= "btn-group" >
<button type= "button" class= "btn btn-secondary dropdown-toggle" data-toggle= "dropdown" data-display= "static" aria-haspopup= "true" aria-expanded= "false" >
Right-aligned but left aligned when large screen
</button>
<div class= "dropdown-menu dropdown-menu-right dropdown-menu-lg-left" >
<button class= "dropdown-item" type= "button" > Action</button>
<button class= "dropdown-item" type= "button" > Another action</button>
<button class= "dropdown-item" type= "button" > Something else here</button>
</div>
</div>
Menya ko udakeneye kongeramo data-display="static"
ikiranga kumanuka utubuto muri navbars, kubera ko Popper.js idakoreshwa muri navbars.
Ongeraho umutwe kumurango ibice byibikorwa muri menu yamanutse.
Gukoporora
<div class= "dropdown-menu" >
<h6 class= "dropdown-header" > Dropdown header</h6>
<a class= "dropdown-item" href= "#" > Action</a>
<a class= "dropdown-item" href= "#" > Another action</a>
</div>
Abatandukanya
Tandukanya amatsinda yibintu bifitanye isano nibice.
Gukoporora
<div class= "dropdown-menu" >
<a class= "dropdown-item" href= "#" > Action</a>
<a class= "dropdown-item" href= "#" > Another action</a>
<a class= "dropdown-item" href= "#" > Something else here</a>
<div class= "dropdown-divider" ></div>
<a class= "dropdown-item" href= "#" > Separated link</a>
</div>
Inyandiko
Shira inyandiko iyo ari yo yose yubuntu muri menu yamanutse hamwe ninyandiko hanyuma ukoreshe umwanya utandukanye . Menya ko ushobora gukenera inyongera zingana kugirango ubuze menu ubugari.
Gukoporora
<div class= "dropdown-menu p-4 text-muted" style= "max-width: 200px;" >
<p>
Some example text that's free-flowing within the dropdown menu.
</p>
<p class= "mb-0" >
And this is more example text.
</p>
</div>
Shira ifishi muri menu yamanutse, cyangwa uyigire muri menu yamanutse, hanyuma ukoreshe margin cyangwa padding utanga kugirango uhe umwanya mubi ukeneye.
Gukoporora
<div class= "dropdown-menu" >
<form class= "px-4 py-3" >
<div class= "form-group" >
<label for= "exampleDropdownFormEmail1" > Email address</label>
<input type= "email" class= "form-control" id= "exampleDropdownFormEmail1" placeholder= "[email protected] " >
</div>
<div class= "form-group" >
<label for= "exampleDropdownFormPassword1" > Password</label>
<input type= "password" class= "form-control" id= "exampleDropdownFormPassword1" placeholder= "Password" >
</div>
<div class= "form-group" >
<div class= "form-check" >
<input type= "checkbox" class= "form-check-input" id= "dropdownCheck" >
<label class= "form-check-label" for= "dropdownCheck" >
Remember me
</label>
</div>
</div>
<button type= "submit" class= "btn btn-primary" > Sign in</button>
</form>
<div class= "dropdown-divider" ></div>
<a class= "dropdown-item" href= "#" > New around here? Sign up</a>
<a class= "dropdown-item" href= "#" > Forgot password?</a>
</div>
Gukoporora
<form class= "dropdown-menu p-4" >
<div class= "form-group" >
<label for= "exampleDropdownFormEmail2" > Email address</label>
<input type= "email" class= "form-control" id= "exampleDropdownFormEmail2" placeholder= "[email protected] " >
</div>
<div class= "form-group" >
<label for= "exampleDropdownFormPassword2" > Password</label>
<input type= "password" class= "form-control" id= "exampleDropdownFormPassword2" placeholder= "Password" >
</div>
<div class= "form-group" >
<div class= "form-check" >
<input type= "checkbox" class= "form-check-input" id= "dropdownCheck2" >
<label class= "form-check-label" for= "dropdownCheck2" >
Remember me
</label>
</div>
</div>
<button type= "submit" class= "btn btn-primary" > Sign in</button>
</form>
Amahitamo
Koresha data-offset
cyangwa data-reference
uhindure ahantu hamanuka.
Gukoporora
<div class= "d-flex" >
<div class= "dropdown mr-1" >
<button type= "button" class= "btn btn-secondary dropdown-toggle" id= "dropdownMenuOffset" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" data-offset= "10,20" >
Offset
</button>
<div class= "dropdown-menu" aria-labelledby= "dropdownMenuOffset" >
<a class= "dropdown-item" href= "#" > Action</a>
<a class= "dropdown-item" href= "#" > Another action</a>
<a class= "dropdown-item" href= "#" > Something else here</a>
</div>
</div>
<div class= "btn-group" >
<button type= "button" class= "btn btn-secondary" > Reference</button>
<button type= "button" class= "btn btn-secondary dropdown-toggle dropdown-toggle-split" id= "dropdownMenuReference" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" data-reference= "parent" >
<span class= "sr-only" > Toggle Dropdown</span>
</button>
<div class= "dropdown-menu" aria-labelledby= "dropdownMenuReference" >
<a class= "dropdown-item" href= "#" > Action</a>
<a class= "dropdown-item" href= "#" > Another action</a>
<a class= "dropdown-item" href= "#" > Something else here</a>
<div class= "dropdown-divider" ></div>
<a class= "dropdown-item" href= "#" > Separated link</a>
</div>
</div>
</div>
Ikoreshwa
Binyuze muri data ibiranga cyangwa JavaScript, plugin yamanutse ihinduranya ibintu byihishe (ibimanuka byamanutse) muguhindura .show
icyiciro kurutonde rwababyeyi. Ikiranga data-toggle="dropdown"
gishingiye ku gufunga ibimanuka kurutonde rwa porogaramu, nibyiza rero guhora tuyikoresha.
Kubikoresho bifasha gukoraho, gufungura ibitonyanga byongeramo ubusa ( $.noop
) mouseover
imashini kubana bahita ba <body>
element. Ibi byemewe ko ari hack birakenewe kugirango dukore hafi yikinamico mu ntumwa za iOS , ibyo bikaba byabuza gukanda ahantu hose hanze y’igitonyanga gukurura code ifunga ibitonyanga. Iyo ibitonyanga bimaze gufungwa, ibyo byongeweho ubusa mouseover
bikurwaho.
Binyuze mu biranga amakuru
Ongeraho data-toggle="dropdown"
kumurongo cyangwa buto kugirango uhindure ibitonyanga.
Gukoporora
<div class= "dropdown" >
<button id= "dLabel" type= "button" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
Dropdown trigger
</button>
<div class= "dropdown-menu" aria-labelledby= "dLabel" >
...
</div>
</div>
Binyuze kuri JavaScript
Hamagara ibitonyanga ukoresheje JavaScript:
Gukoporora
$ ( '.dropdown-toggle' ). dropdown ()
data-toggle="dropdown"
biracyasabwa
Utitaye ko wahamagaye ibitonyanga ukoresheje JavaScript cyangwa ugakoresha data-api, data-toggle="dropdown"
burigihe birasabwa kuba uhari kubintu byamanutse.
Amahitamo
Amahitamo arashobora kunyuzwa kumurongo wamakuru cyangwa JavaScript. Kubiranga Ibyatanzwe, Ongeraho Ihitamo Izina Kuri data-
, Nka Muri data-offset=""
.
Izina
Andika
Mburabuzi
Ibisobanuro
offset
umubare | umugozi | imikorere
0
Kureka kugabanuka ugereranije nintego yayo. Kubindi bisobanuro reba popper.js ya offset ya doc .
flip
boolean
ni ukuri
Emerera Ibitonyanga guhindagurika mugihe habaye guhuzagurika kubintu bifatika. Kubindi bisobanuro reba flip docs ya Popper.js .
imbibi
umugozi | element
'umuzingoParent'
Kurenga imipaka imbibi za menu yamanutse. Emera indangagaciro za ,,, 'viewport'
cyangwa HTMLElement yerekana (JavaScript gusa). Kubindi bisobanuro reba Popper.js yo gukumiraOverflow docs .'window'
'scrollParent'
Indanganturo
umugozi | element
'guhinduranya'
Ibikoresho byerekana ibintu byamanutse. Emera indangagaciro za 'toggle'
,, 'parent'
cyangwa HTMLElement yerekana. Kubindi bisobanuro reba Popper.js yerekanaObject docs .
Kugaragaza
umugozi
'imbaraga'
Mburabuzi, dukoresha Popper.js kumwanya uhagaze. Hagarika ibi hamwe static
.
Icyitonderwa mugihe boundary
gishyizwe kumurongo uwo ariwo wose usibye 'scrollParent'
, imiterere position: static
ikoreshwa kuri .dropdown
kontineri.
Uburyo
Uburyo
Ibisobanuro
$().dropdown('toggle')
Kuzuza menu yamanutse ya navbar yatanzwe cyangwa kugendagenda.
$().dropdown('show')
Erekana ibimanuka byamanuka ya navbar yatanzwe cyangwa tabbed navigation.
$().dropdown('hide')
Hisha menu yamanutse ya navbar yatanzwe cyangwa kugendagenda.
$().dropdown('update')
Kuvugurura umwanya wibintu byamanutse.
$().dropdown('dispose')
Gusenya ikintu cyamanutse.
Ibyabaye
Ibintu byose byamanutse birasa kuri .dropdown-menu
'ababyeyi bababyeyi kandi bafite relatedTarget
umutungo, agaciro kabo ni uguhindura icyuma. nibyabaye bifite hide.bs.dropdown
umutungo (gusa iyo ibyabaye byumwimerere ubwoko ni ) bikubiyemo ikintu cyabaye cyo gukanda ibyabaye.hidden.bs.dropdown
clickEvent
click
Icyabaye
Ibisobanuro
show.bs.dropdown
Ibirori birasa ako kanya iyo kwerekana urugero uburyo bwitwa.
shown.bs.dropdown
Ibirori birukanwa mugihe ibitonyanga byakozwe kugaragara kubakoresha (bizategereza inzibacyuho ya CSS, kugirango birangire).
hide.bs.dropdown
Ibi birori birahita bisohoka mugihe uburyo bwo guhisha bwahamagawe.
hidden.bs.dropdown
Ibirori birukanwa mugihe ibitonyanga byarangije guhishwa kubakoresha (bizategereza inzibacyuho ya CSS, kugirango birangire).
Gukoporora
$ ( '#myDropdown' ). on ( 'show.bs.dropdown' , function () {
// do something…
})