in English
Gulu la batani
Gwirizanitsani mabatani angapo pamzere umodzi ndi gulu la mabatani, ndikuwalimbitsa kwambiri ndi JavaScript.
Chitsanzo choyambirira
Manga mabatani angapo ndi .btn
mu .btn-group
. Onjezani pa wayilesi ya JavaScript yosankha komanso mawonekedwe a bokosi loyang'ana ndi mabatani athu owonjezera .
Kumanzere
Pakati
Kulondola
Koperani
<div class= "btn-group" role= "group" aria-label= "Basic example" >
<button type= "button" class= "btn btn-secondary" > Left</button>
<button type= "button" class= "btn btn-secondary" > Middle</button>
<button type= "button" class= "btn btn-secondary" > Right</button>
</div>
Onetsetsani kuti mwalondola role
ndikupereka chizindikiro
Kuti matekinoloje othandizira (monga owerenga skrini) awonetse kuti mabatani angapo agawidwa m'magulu, role
muyenera kuperekedwa mawonekedwe oyenera. Kwa magulu a mabatani, izi zitha kukhala role="group"
, pomwe zida zogwiritsira ntchito ziyenera kukhala ndi role="toolbar"
.
Kuonjezera apo, magulu ndi zida ziyenera kupatsidwa chizindikiro chomveka bwino, chifukwa matekinoloje ambiri othandizira sangawalengeze, ngakhale pali mbali yoyenera. Mu zitsanzo zomwe zaperekedwa apa, timagwiritsa ntchito aria-label
, koma njira zina aria-labelledby
zomwe zingagwiritsidwe ntchito.
Phatikizani ma seti amagulu a batani kukhala mabatani a zida zamagulu ovuta kwambiri. Gwiritsani ntchito makalasi ofunikira ngati pakufunika kugawa magulu, mabatani, ndi zina zambiri.
Koperani
<div class= "btn-toolbar" role= "toolbar" aria-label= "Toolbar with button groups" >
<div class= "btn-group mr-2" role= "group" aria-label= "First group" >
<button type= "button" class= "btn btn-secondary" > 1</button>
<button type= "button" class= "btn btn-secondary" > 2</button>
<button type= "button" class= "btn btn-secondary" > 3</button>
<button type= "button" class= "btn btn-secondary" > 4</button>
</div>
<div class= "btn-group mr-2" role= "group" aria-label= "Second group" >
<button type= "button" class= "btn btn-secondary" > 5</button>
<button type= "button" class= "btn btn-secondary" > 6</button>
<button type= "button" class= "btn btn-secondary" > 7</button>
</div>
<div class= "btn-group" role= "group" aria-label= "Third group" >
<button type= "button" class= "btn btn-secondary" > 8</button>
</div>
</div>
Khalani omasuka kusakaniza magulu olowa ndi magulu a mabatani muzitsulo zanu. Mofanana ndi chitsanzo pamwambapa, mungafunike zina zothandizira kuti muyike zinthu moyenera.
Koperani
<div class= "btn-toolbar mb-3" role= "toolbar" aria-label= "Toolbar with button groups" >
<div class= "btn-group mr-2" role= "group" aria-label= "First group" >
<button type= "button" class= "btn btn-secondary" > 1</button>
<button type= "button" class= "btn btn-secondary" > 2</button>
<button type= "button" class= "btn btn-secondary" > 3</button>
<button type= "button" class= "btn btn-secondary" > 4</button>
</div>
<div class= "input-group" >
<div class= "input-group-prepend" >
<div class= "input-group-text" id= "btnGroupAddon" > @</div>
</div>
<input type= "text" class= "form-control" placeholder= "Input group example" aria-label= "Input group example" aria-describedby= "btnGroupAddon" >
</div>
</div>
<div class= "btn-toolbar justify-content-between" role= "toolbar" aria-label= "Toolbar with button groups" >
<div class= "btn-group" role= "group" aria-label= "First group" >
<button type= "button" class= "btn btn-secondary" > 1</button>
<button type= "button" class= "btn btn-secondary" > 2</button>
<button type= "button" class= "btn btn-secondary" > 3</button>
<button type= "button" class= "btn btn-secondary" > 4</button>
</div>
<div class= "input-group" >
<div class= "input-group-prepend" >
<div class= "input-group-text" id= "btnGroupAddon2" > @</div>
</div>
<input type= "text" class= "form-control" placeholder= "Input group example" aria-label= "Input group example" aria-describedby= "btnGroupAddon2" >
</div>
</div>
Kukula
M'malo mogwiritsa ntchito makalasi owerengera mabatani pa batani lililonse pagulu, ingowonjezerani .btn-group-*
pa chilichonse .btn-group
, kuphatikiza chilichonse mukamanga magulu angapo.
Kumanzere
Pakati
Kulondola
Kumanzere
Pakati
Kulondola
Kumanzere
Pakati
Kulondola
Koperani
<div class= "btn-group btn-group-lg" role= "group" aria-label= "..." > ...</div>
<div class= "btn-group" role= "group" aria-label= "..." > ...</div>
<div class= "btn-group btn-group-sm" role= "group" aria-label= "..." > ...</div>
Nesting
Ikani .btn-group
mkati mwa ina .btn-group
pamene mukufuna mindandanda yotsitsa yosakanikirana ndi mabatani angapo.
Koperani
<div class= "btn-group" role= "group" aria-label= "Button group with nested dropdown" >
<button type= "button" class= "btn btn-secondary" > 1</button>
<button type= "button" class= "btn btn-secondary" > 2</button>
<div class= "btn-group" role= "group" >
<button id= "btnGroupDrop1" type= "button" class= "btn btn-secondary dropdown-toggle" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
Dropdown
</button>
<div class= "dropdown-menu" aria-labelledby= "btnGroupDrop1" >
<a class= "dropdown-item" href= "#" > Dropdown link</a>
<a class= "dropdown-item" href= "#" > Dropdown link</a>
</div>
</div>
</div>
Kusintha koyima
Pangani mabatani angapo kuti awoneke ngati atayikidwa molunjika osati mopingasa. Kutsikira kwa mabatani ogawanika sikutheka pano.
Batani
Batani
Batani
Batani
Batani
Batani
Batani
Batani
Tsitsa m'munsi
Batani
Batani
Tsitsa m'munsi
Tsitsa m'munsi
Tsitsa m'munsi
Koperani
<div class= "btn-group-vertical" >
...
</div>