Olukalala lw'ekibinja
Ebibinja by’olukalala kitundu ekikyukakyuka era eky’amaanyi eky’okulaga omuddirirwa gw’ebirimu. Kyuusa era ozigaziye okuwagira kumpi ebirimu byonna ebiri munda.
Ekyokulabirako ekikulu
Ekibinja ky’olukalala ekisinga obukulu lwe lukalala olutali lutegekeddwa nga lulimu ebintu by’olukalala n’ebika ebituufu. Zimba ku kyo n'eby'okulonda ebiddako, oba ne CSS yo nga bwe kyetaagisa.
- Ekintu
- Ekintu ekyokubiri
- Ekintu eky’okusatu
- Ekintu eky’okuna
- N’ow’okutaano
<ul class="list-group">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
Ebintu ebikola
Okwongera .active
ku a .list-group-item
okulaga okulonda okukola okuliwo kati.
- Ekintu ekikola
- Ekintu ekyokubiri
- Ekintu eky’okusatu
- Ekintu eky’okuna
- N’ow’okutaano
<ul class="list-group">
<li class="list-group-item active" aria-current="true">An active item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
Ebintu ebilema
Yongera .disabled
ku a .list-group-item
okulabika ng’eremeddwa . Weetegereze nti ebintu ebimu ebirina .disabled
nabyo bijja kwetaaga JavaScript eya bulijjo okulemesa mu bujjuvu ebibaddewo byabwe eby'okunyiga (okugeza, enkolagana).
- Ekintu ekilemaddwa
- Ekintu ekyokubiri
- Ekintu eky’okusatu
- Ekintu eky’okuna
- N’ow’okutaano
<ul class="list-group">
<li class="list-group-item disabled" aria-disabled="true">A disabled item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
Links ne buttons
Kozesa <a>
s oba <button>
s okukola ebintu by'ekibiina ky'olukalala ebisobola okukolebwa nga biriko embeera za hover, eziremeseddwa, n'ezikola ng'ogattako .list-group-item-action
. Twawula bino pseudo-classes okukakasa nti ebibinja by’olukalala ebikoleddwa mu bintu ebitali bikwatagana (nga <li>
s oba <div>
s) tebiwa click oba tap affordance.
Kakasa nti tokozesa .btn
kiraasi za mutindo wano .
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active" aria-current="true">
The current link item
</a>
<a href="#" class="list-group-item list-group-item-action">A second link item</a>
<a href="#" class="list-group-item list-group-item-action">A third link item</a>
<a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
<a class="list-group-item list-group-item-action disabled">A disabled link item</a>
</div>
Nga olina <button>
s, osobola n’okukozesa disabled
ekintu mu kifo kya .disabled
kiraasi. Eky'ennaku, <a>
s teziwagira attribute eremeddwa.
<div class="list-group">
<button type="button" class="list-group-item list-group-item-action active" aria-current="true">
The current button
</button>
<button type="button" class="list-group-item list-group-item-action">A second item</button>
<button type="button" class="list-group-item list-group-item-action">A third button item</button>
<button type="button" class="list-group-item list-group-item-action">A fourth button item</button>
<button type="button" class="list-group-item list-group-item-action" disabled>A disabled button item</button>
</div>
Okufuuwa
Okwongerako .list-group-flush
okuggyawo ensalosalo ezimu n'enkoona ezeetooloovu okulaga ebintu by'ekibinja ky'olukalala okuva ku mbiriizi mu kibya ekizadde (okugeza, kaadi).
- Ekintu
- Ekintu ekyokubiri
- Ekintu eky’okusatu
- Ekintu eky’okuna
- N’ow’okutaano
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
Okwegolola
Okwongerako .list-group-horizontal
okukyusa ensengeka y’ebintu by’ekibinja ky’olukalala okuva ku nneekulungirivu okudda ku nneekulungirivu okubuna ebifo byonna eby’okumenya. Ekirala, londa enkyukakyuka eddamu .list-group-horizontal-{sm|md|lg|xl}
okukola ekibinja ky'olukalala horizontal okutandika ku breakpoint eyo's min-width
. Mu kiseera kino ebibinja by'olukalala olw'okwebungulula tebisobola kugattibwa wamu na bibinja bya lukalala lwa flush.
ProTip: Oyagala ebintu by'ekibiina ky'olukalala eby'obugazi obwenkanankana nga bwe kiri horizontal? Yongera .flex-fill
ku buli lukalala ekintu eky’ekibinja.
- Ekintu
- Ekintu ekyokubiri
- Ekintu eky’okusatu
- Ekintu
- Ekintu ekyokubiri
- Ekintu eky’okusatu
- Ekintu
- Ekintu ekyokubiri
- Ekintu eky’okusatu
- Ekintu
- Ekintu ekyokubiri
- Ekintu eky’okusatu
- Ekintu
- Ekintu ekyokubiri
- Ekintu eky’okusatu
<ul class="list-group list-group-horizontal">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-sm">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-md">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-lg">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-xl">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
Ebisulo ebikwata ku mbeera
Kozesa kiraasi ezikwata ku mbeera okuwandiika sitayiro y’ebintu ebirina embeera y’emabega ne langi.
- Ekintu eky'ekibinja eky'olukalala ekisookerwako eky'ennyangu
- Ekintu eky’ekibiina ky’olukalala olusookerwako ennyangu
- Ekintu eky’ekibiina ky’olukalala olw’okubiri olwangu
- Ekintu eky’ekibiina eky’olukalala lw’obuwanguzi eky’enjawulo
- Ekintu eky’ekibinja eky’olukalala lw’akabi ennyangu
- Ekintu eky’ekibinja eky’olukalala lw’okulabula eky’enjawulo
- Ekintu eky'ekibiina eky'olukalala lw'amawulire ennyangu
- Ekintu eky’ekibiina eky’olukalala lw’ekitangaala eky’enjawulo
- Ekintu eky’ekibinja eky’olukalala lw’enzikiza ennyangu
<ul class="list-group">
<li class="list-group-item">A simple default list group item</li>
<li class="list-group-item list-group-item-primary">A simple primary list group item</li>
<li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
<li class="list-group-item list-group-item-success">A simple success list group item</li>
<li class="list-group-item list-group-item-danger">A simple danger list group item</li>
<li class="list-group-item list-group-item-warning">A simple warning list group item</li>
<li class="list-group-item list-group-item-info">A simple info list group item</li>
<li class="list-group-item list-group-item-light">A simple light list group item</li>
<li class="list-group-item list-group-item-dark">A simple dark list group item</li>
</ul>
Ebisulo ebikwata ku mbeera nabyo bikola ne .list-group-item-action
. Weetegereze okugattako emisono gya hover wano egitaliiwo mu kyokulabirako ekyayita. Era ewagirwa .active
gavumenti; kikozese okulaga okulonda okukola ku kintu ky'ekibiina ky'olukalala lw'embeera.
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">A simple default list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-primary">A simple primary list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-secondary">A simple secondary list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-success">A simple success list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-danger">A simple danger list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-warning">A simple warning list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-info">A simple info list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-light">A simple light list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-dark">A simple dark list group item</a>
</div>
Okutuusa amakulu mu tekinologiya ayamba
Okukozesa langi okwongera amakulu kiwa ekiraga ekirabika kyokka, ekitajja kutuusibwa eri abakozesa tekinologiya ayamba – gamba ng’ebisoma ku ssirini. Kakasa nti amawulire agalagirwa langi oba geeyoleka okuva mu birimu byennyini (okugeza ekiwandiiko ekirabika), oba gateekebwamu okuyita mu ngeri endala, gamba ng’ebiwandiiko ebirala ebikwekebwa ne .sr-only
kiraasi.
Nga balina badge
Yongera badge ku kintu kyonna eky'ekibinja ky'olukalala okulaga okubala okutasomiddwa, emirimu, n'ebirala ng'oyambibwako ebimu ku bikozesebwa .
- Ekintu eky’olukalala14. 14
- Ekintu ekyokubiri eky’olukalala2.
- Ekintu eky’okusatu eky’olukalala1.
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
A list item
<span class="badge badge-primary badge-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
A second list item
<span class="badge badge-primary badge-pill">2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
A third list item
<span class="badge badge-primary badge-pill">1</span>
</li>
</ul>
Ebirimu eby’enjawulo
Okwongerako kumpi HTML yonna munda, ne ku bibinja by'olukalala ebiyungiddwa nga ekyo wansi, ng'oyambibwako flexbox utilities .
Laga omutwe gw’ekintu ky’ekibinja
Ennaku 3 eziyiseEbimu ku bifo ebirimu mu katundu.
Era ebimu ku bitabo ebitonotono.Laga omutwe gw’ekintu ky’ekibinja
Ennaku 3 eziyiseEbimu ku bifo ebirimu mu katundu.
Era ebimu byasirisa ebiwandiiko ebitonotono.Laga omutwe gw’ekintu ky’ekibinja
Ennaku 3 eziyiseEbimu ku bifo ebirimu mu katundu.
Era ebimu byasirisa ebiwandiiko ebitonotono.<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small>3 days ago</small>
</div>
<p class="mb-1">Some placeholder content in a paragraph.</p>
<small>And some small print.</small>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small class="text-muted">3 days ago</small>
</div>
<p class="mb-1">Some placeholder content in a paragraph.</p>
<small class="text-muted">And some muted small print.</small>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small class="text-muted">3 days ago</small>
</div>
<p class="mb-1">Some placeholder content in a paragraph.</p>
<small class="text-muted">And some muted small print.</small>
</a>
</div>
Enneeyisa ya JavaScript
Kozesa tab JavaScript plugin —giteekemu kinnoomu oba okuyita mu bootstrap.js
fayiro ekunganyiziddwa —okugaziya ekibinja kyaffe eky’olukalala okukola tabbable panes z’ebirimu eby’omu kitundu.
<div class="row">
<div class="col-4">
<div class="list-group" id="list-tab" role="tablist">
<a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a>
<a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
<a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a>
<a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Settings</a>
</div>
</div>
<div class="col-8">
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">...</div>
<div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">...</div>
<div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">...</div>
<div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">...</div>
</div>
</div>
</div>
Okukozesa ebikwata ku data
Osobola okukola okutambulira mu kibinja ky’olukalala nga towandiise JavaScript yonna ng’omala okulaga data-toggle="list"
oba ku elementi. Kozesa bino ebikwata ku data ku .list-group-item
.
<div role="tabpanel">
<!-- List group -->
<div class="list-group" id="myList" role="tablist">
<a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home</a>
<a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a>
<a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a>
<a class="list-group-item list-group-item-action" data-toggle="list" href="#settings" role="tab">Settings</a>
</div>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel">...</div>
<div class="tab-pane" id="profile" role="tabpanel">...</div>
<div class="tab-pane" id="messages" role="tabpanel">...</div>
<div class="tab-pane" id="settings" role="tabpanel">...</div>
</div>
</div>
Okuyita mu JavaScript
Ssobozesa ekintu ky'olukalala lwa tabbable ng'oyita mu JavaScript (buli kintu ky'olukalala kyetaaga okukozesebwa kinnoomu):
$('#myList a').on('click', function (event) {
event.preventDefault()
$(this).tab('show')
})
Osobola okukola ekintu ky'olukalala lw'omuntu kinnoomu mu ngeri eziwerako:
$('#myList a[href="#profile"]').tab('show') // Select tab by name
$('#myList a:first-child').tab('show') // Select first tab
$('#myList a:last-child').tab('show') // Select last tab
$('#myList a:nth-child(3)').tab('show') // Select third tab
Fade effect
Okufuula tabs panel okuzikira mu, yongera .fade
ku buli .tab-pane
. Ekipande kya tabu ekisooka nakyo kirina okuba nga .show
kirina okufuula ebirimu ebisooka okulabika.
<div class="tab-content">
<div class="tab-pane fade show active" id="home" role="tabpanel">...</div>
<div class="tab-pane fade" id="profile" role="tabpanel">...</div>
<div class="tab-pane fade" id="messages" role="tabpanel">...</div>
<div class="tab-pane fade" id="settings" role="tabpanel">...</div>
</div>
Enkola
$().tab
Ekola ekintu ky'ekintu eky'olukalala n'ekintu ekirimu. Tab erina okuba ne oba a data-target
oba an href
targeting a container node mu DOM.
<div class="list-group" id="myList" role="tablist">
<a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home</a>
<a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a>
<a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a>
<a class="list-group-item list-group-item-action" data-toggle="list" href="#settings" role="tab">Settings</a>
</div>
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel">...</div>
<div class="tab-pane" id="profile" role="tabpanel">...</div>
<div class="tab-pane" id="messages" role="tabpanel">...</div>
<div class="tab-pane" id="settings" role="tabpanel">...</div>
</div>
<script>
$(function () {
$('#myList a:last-child').tab('show')
})
</script>
.tab('laga') .
Londa ekintu ky'olukalala ekiweereddwa era n'alaga ekitundu kyakyo ekikwatagana. Ekintu ekirala kyonna eky'olukalala ekyali kirondeddwa emabegako kifuuka ekitali kirondeddwa era ekitundu kyakyo ekikwatagana ne kikwekebwa. Edda eri omuyita nga ekitundu kya tabu tekinnalagibwa ddala (okugeza, nga shown.bs.tab
ekintu tekinnabaawo).
$('#someListItem').tab('show')
Ebibaddewo
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’emuhide.bs.tab
n’ey’omukolo)shown.bs.tab
(ku kitundu ekipya-ekikola ekyaakalagibwa, kye kimushow.bs.tab
n'eky'omukolo)
Singa tewali tabu yali yakola dda, ebibaddewo hide.bs.tab
ne hidden.bs.tab
tebijja kugobwa.
Ekika ky’ekintu ekibaawo | 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. |
$('a[data-toggle="list"]').on('shown.bs.tab', function (event) {
event.target // newly activated tab
event.relatedTarget // previous active tab
})