Source

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.

  • Cras justo odio nga bwe kiri
  • Dapibus ac ebikozesebwa mu
  • Morbi leo ekika kya risus
  • Porta ac consectetur eky’oku ntikko
  • Ekibumbe ekiyitibwa Vestibulum ku eros
<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

Ebintu ebikola

Okwongera .activeku a .list-group-itemokulaga okulonda okukola okuliwo kati.

  • Cras justo odio nga bwe kiri
  • Dapibus ac ebikozesebwa mu
  • Morbi leo ekika kya risus
  • Porta ac consectetur eky’oku ntikko
  • Ekibumbe ekiyitibwa Vestibulum ku eros
<ul class="list-group">
  <li class="list-group-item active">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

Ebintu ebilema

Yongera .disabledku a .list-group-itemokulabika ng’eremeddwa . Weetegereze nti ebintu ebimu ebirina .disablednabyo bijja kwetaaga JavaScript eya bulijjo okulemesa mu bujjuvu ebibaddewo byabwe eby'okunyiga (okugeza, enkolagana).

  • Cras justo odio nga bwe kiri
  • Dapibus ac ebikozesebwa mu
  • Morbi leo ekika kya risus
  • Porta ac consectetur eky’oku ntikko
  • Ekibumbe ekiyitibwa Vestibulum ku eros
<ul class="list-group">
  <li class="list-group-item disabled">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

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 .btnkiraasi za mutindo wano .

Cras justo odio nga bwe kiri Dapibus ac ebikozesebwa mu Morbi leo ekika kya risus Porta ac consectetur eky’oku ntikko Ekibumbe ekiyitibwa Vestibulum ku eros 
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
  <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a>
</div>

Nga olina <button>s, osobola n’okukozesa disabledekintu mu kifo kya .disabledkiraasi. Eky'ennaku, <a>s teziwagira attribute eremeddwa.

<div class="list-group">
  <button type="button" class="list-group-item list-group-item-action active">
    Cras justo odio
  </button>
  <button type="button" class="list-group-item list-group-item-action">Dapibus ac facilisis in</button>
  <button type="button" class="list-group-item list-group-item-action">Morbi leo risus</button>
  <button type="button" class="list-group-item list-group-item-action">Porta ac consectetur ac</button>
  <button type="button" class="list-group-item list-group-item-action" disabled>Vestibulum at eros</button>
</div>

Okufuuwa

Okwongerako .list-group-flushokuggyawo ensalosalo ezimu n'enkoona ezeetooloovu okulaga ebintu by'ekibinja ky'olukalala okuva ku mbiriizi mu kibya ekizadde (okugeza, kaadi).

  • Cras justo odio nga bwe kiri
  • Dapibus ac ebikozesebwa mu
  • Morbi leo ekika kya risus
  • Porta ac consectetur eky’oku ntikko
  • Ekibumbe ekiyitibwa Vestibulum ku eros
<ul class="list-group list-group-flush">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

Ebisulo ebikwata ku mbeera

Kozesa kiraasi ezikwata ku mbeera okuwandiika sitayiro y’ebintu ebirina embeera y’emabega ne langi.

  • Dapibus ac ebikozesebwa mu
  • 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">Dapibus ac facilisis in</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 .activegavumenti; kikozese okulaga okulonda okukola ku kintu ky'ekibiina ky'olukalala lw'embeera.

Dapibus ac ebikozesebwa mu 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 
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</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-onlykiraasi.

Nga balina badge

Yongera badge ku kintu kyonna eky'ekibinja ky'olukalala okulaga okubala okutasomiddwa, emirimu, n'ebirala ng'oyambibwako ebimu ku bikozesebwa .

  • Cras justo odio nga bwe kiri14. 14
  • Dapibus ac ebikozesebwa mu2.
  • Morbi leo ekika kya risus1. 
<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Cras justo odio
    <span class="badge badge-primary badge-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Dapibus ac facilisis in
    <span class="badge badge-primary badge-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Morbi leo risus
    <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 eziyise

Donec id elit etali ya mi porta gravida ku eget metus. Ebimera ebiyitibwa Maecenas sed diam bivaamu ebimera ebiyitibwa risus varius blandit.

Donec id elit abatali ba mi porta.
Laga omutwe gw’ekintu ky’ekibinja
Ennaku 3 eziyise

Donec id elit etali ya mi porta gravida ku eget metus. Ebimera ebiyitibwa Maecenas sed diam bivaamu ebimera ebiyitibwa risus varius blandit.

Donec id elit abatali ba mi porta.
Laga omutwe gw’ekintu ky’ekibinja
Ennaku 3 eziyise

Donec id elit etali ya mi porta gravida ku eget metus. Ebimera ebiyitibwa Maecenas sed diam bivaamu ebimera ebiyitibwa risus varius blandit.

Donec id elit abatali ba mi porta. 
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start 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">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small>Donec id elit non mi porta.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
    <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">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small class="text-muted">Donec id elit non mi porta.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
    <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">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small class="text-muted">Donec id elit non mi porta.</small>
  </a>
</div>

Enneeyisa ya JavaScript

Kozesa tab JavaScript plugin —giteekemu kinnoomu oba okuyita mu bootstrap.jsfayiro ekunganyiziddwa —okugaziya ekibinja kyaffe eky’olukalala okukola tabbable panes z’ebirimu eby’omu kitundu.

Velit aute mollit ipsum ad dolor consectetur nulla officia culpa okuzimba omubiri okukola dduyiro okudduka akaseera. Voluptate deserunt okutuula sunt nisi aliqua okudduka proident ea ut. Mollit voluptate okunenya occaecat nisi ad non minim tempor sunt okwegomba consectetur okukola dduyiro id ut nulla. Ea et fugiat aliquip nostrud sunt incididunt consectetur culpa amazzi eusmod dolor. Anim ad Lorem aliqua mu cupidatat n'obutafaali obutono ennyo.

Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur consectetur ex nisi eu do cillum ad laborum. Mollit et eu officia dolore sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim incididunt laboris deserunt anim aute dolor incididunt veniam aute dolore do exercitation. Dolor nisi culpa ex ad irure in elit eu dolore. Ad laboris ipsum reprehenderit irure non commodo enim culpa commodo veniam incididunt veniam ad.

Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo reprehenderit aute ipsum voluptate. Irure Lorem et laboris nostrud amet cupidatat cupidatat anim do ut velit mollit consequat enim tempor. Consectetur est minim nostrud nostrud consectetur irure labore voluptate irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod aliquip nulla laborum elit adipisicing pariatur cillum.

Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna sit occaecat laboris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua labore aute occaecat ea aliquip sunt amet. Aute mollit dolor ut exercitation irure commodo non amet consectetur quis amet culpa. Quis ullamco nisi amet qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt dolor eiusmod eu pariatur culpa mollit in irure.

<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.

<!-- 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>

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 (e) {
  e.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 .fadeku buli .tab-pane. Ekipande kya tabu ekisooka nakyo kirina okuba nga .showkirina 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-targetoba an hreftargeting 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.tabekintu tekinnabaawo).

$('#someListItem').tab('show')

Ebibaddewo

Nga olaga tabu empya, ebibaawo bikuba amasasi mu nsengeka eno wammanga:

  1. hide.bs.tab(ku tabu ekola kati)
  2. show.bs.tab(ku kitundu ekigenda okulagibwa)
  3. hidden.bs.tab(ku tabu ekola emabega, y’emu hide.bs.tabn’ey’omukolo)
  4. shown.bs.tab(ku kitundu ekipya-ekikola ekyaakalagibwa, kye kimu show.bs.tabn'eky'omukolo)

Singa tewali tabu yali yakola dda, ebibaddewo hide.bs.tabne hidden.bs.tabtebijja kugobwa.

Ekika ky’ekintu ekibaawo Okunnyonnyola
okulaga.bs.tab Ekintu kino kikuba omuliro ku tab show, naye nga tab empya tennalagibwa. Kozesa event.targetne event.relatedTargetokutunuulira 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.targetne event.relatedTargetokutunuulira 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.targetne event.relatedTargetokutunuulira 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.targetne event.relatedTargetokutunuulira tabu ekola emabega ne tabu empya ekola, mu kulondako. 
$('a[data-toggle="list"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})