Source

Andika itsinda

Amatsinda y'urutonde ni ibintu byoroshye kandi bikomeye byo kwerekana urukurikirane rw'ibirimo. Hindura kandi ubagure kugirango bashyigikire hafi y'ibirimo byose imbere.

Urugero rwibanze

Urutonde rwibanze rwitsinda ni urutonde rudafite urutonde rwibintu hamwe nibyiciro bikwiye. Wiyubakire hamwe namahitamo akurikira, cyangwa hamwe na CSS yawe nkuko bikenewe.

  • Cras justo odio
  • Dapibus ac facilisis muri
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum kuri 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>

Ibintu bifatika

Ongeraho .activea .list-group-itemkugirango werekane ibyatoranijwe bikora.

  • Cras justo odio
  • Dapibus ac facilisis muri
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum kuri 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>

Ibintu byahagaritswe

Ongeraho .disabledkuri a .list-group-itemkugirango bigaragare ko byahagaritswe. Menya ko ibintu bimwe na bimwe .disabledbizakenera JavaScript yihariye kugirango ihagarike byimazeyo ibyabaye (urugero, amahuza).

  • Cras justo odio
  • Dapibus ac facilisis muri
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum kuri eros
<ul class="list-group">
  <li class="list-group-item disabled" aria-disabled="true">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>

Koresha <a>s cyangwa <button>s kugirango ukore urutonde rwibikorwa byitsinda ryibintu hamwe na hover, byahagaritswe, hamwe na leta ikora wongeyeho .list-group-item-action. Dutandukanya aya masomo ya pseudo kugirango tumenye amatsinda yakozwe kurutonde rwibintu bidakorana (nka <li>s cyangwa <div>s) bidatanga gukanda cyangwa gukanda.

Witondere kudakoresha .btnamasomo asanzwe hano .

Cras justo odio Dapibus ac facilisis muri Morbi leo risus Porta ac consectetur ac Vestibulum kuri 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" tabindex="-1" aria-disabled="true">Vestibulum at eros</a>
</div>

Hamwe na <button>s, urashobora kandi gukoresha disabledikiranga aho kuba .disabledicyiciro. Birababaje, <a>ntabwo ushyigikiye ikiranga.

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

Fasha

Ongeraho .list-group-flushkugirango ukureho imipaka hamwe nu mfuruka zizengurutse kugirango utange urutonde rwibintu byitsinda kugeza ku kintu cyababyeyi (urugero, amakarita).

  • Cras justo odio
  • Dapibus ac facilisis muri
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum kuri 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>

Uhagaritse

Ongeraho .list-group-horizontalkugirango uhindure imiterere yurutonde rwibintu kuva kuri vertical to horizontal kurwego rwose. Ubundi, hitamo impinduka zishubije .list-group-horizontal-{sm|md|lg|xl}kugirango ukore urutonde itsinda ritambitse guhera kuri iyo ngingo min-width. Kugeza ubu urutonde rutambitse ntirushobora guhuzwa hamwe na flush urutonde rwamatsinda.

ProTip: Urashaka ubugari buringaniye urutonde rwibintu mugihe utambitse? Ongeraho .flex-fillkuri buri rutonde rw'itsinda.

  • Cras justo odio
  • Dapibus ac facilisis muri
  • Morbi leo risus
<ul class="list-group list-group-horizontal">
  <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>
</ul>
  • Cras justo odio
  • Dapibus ac facilisis muri
  • Morbi leo risus
<ul class="list-group list-group-horizontal-sm">
  <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>
</ul>
  • Cras justo odio
  • Dapibus ac facilisis muri
  • Morbi leo risus
<ul class="list-group list-group-horizontal-md">
  <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>
</ul>
  • Cras justo odio
  • Dapibus ac facilisis muri
  • Morbi leo risus
<ul class="list-group list-group-horizontal-lg">
  <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>
</ul>
  • Cras justo odio
  • Dapibus ac facilisis muri
  • Morbi leo risus
<ul class="list-group list-group-horizontal-xl">
  <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>
</ul>

Amasomo ajyanye

Koresha amasomo ajyanye nuburyo bwo gutondekanya urutonde hamwe na leta hamwe nibara.

  • Dapibus ac facilisis muri
  • Urutonde rwibanze rwibanze rwitsinda
  • Urutonde rworoheje rwa kabiri urutonde rwitsinda
  • Intsinzi yoroshye kurutonde rwitsinda
  • Urutonde rworoshye urutonde rwibintu
  • Urutonde rworoshye rwo kuburira urutonde rwitsinda
  • Ibisobanuro byoroshye urutonde rwitsinda
  • Urutonde rworoheje urutonde rwibintu
  • Urutonde rworoshye rwurutonde rwitsinda
<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>

Amasomo ajyanye nayo akorana nayo .list-group-item-action. Reba inyongera yuburyo bwa hover hano ntabwo igaragara murugero rwabanje. Inkunga nayo ni .activeleta; shyira mu bikorwa kugirango ugaragaze ihitamo rikorwa kurutonde rwibintu.

Dapibus ac facilisis muri Urutonde rwibanze rwibanze rwitsinda Urutonde rworoheje rwa kabiri urutonde rwitsinda Intsinzi yoroshye kurutonde rwitsinda Urutonde rworoshye urutonde rwibintu Urutonde rworoshye rwo kuburira urutonde rwitsinda Ibisobanuro byoroshye urutonde rwitsinda Urutonde rworoheje urutonde rwibintu Urutonde rworoshye rwurutonde rwitsinda 
<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>
Gutanga ibisobanuro kubuhanga bufasha

Gukoresha ibara kugirango wongere ibisobanuro bitanga gusa icyerekezo cyerekana, kitazashyikirizwa abakoresha tekinoroji ifasha - nk'abasoma ecran. Menya neza ko amakuru yerekanwe n'ibara agaragara uhereye kubirimo ubwabyo (urugero: inyandiko igaragara), cyangwa bigashyirwa muburyo butandukanye, nk'inyandiko y'inyongera ihishe hamwe .sr-onlyn'ishuri.

N'ibirango

Ongeraho badge kurutonde urwo arirwo rwose kugirango werekane ibara ridasomwe, ibikorwa, nibindi byinshi bifashishije ibikorwa bimwe na bimwe byingirakamaro .

  • Cras justo odio14
  • Dapibus ac facilisis muri2
  • Morbi leo 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>

Ibirimo

Ongeramo hafi HTML iyo ari yo yose, ndetse no kumurwi uhuza urutonde nkurwo hepfo, hamwe nubufasha bwa flexbox .

Andika itsinda ryumutwe
Iminsi 3 ishize

Donec id elit non mi porta gravida kuri eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.
Andika itsinda ryumutwe
Iminsi 3 ishize

Donec id elit non mi porta gravida kuri eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.
Andika itsinda ryumutwe
Iminsi 3 ishize

Donec id elit non mi porta gravida kuri eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta. 
<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">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">
    <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">
    <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>

Imyitwarire ya JavaScript

Koresha tab JavaScript plugin-shyiramo kugiti cyawe cyangwa unyuze muri bootstrap.jsdosiye yakusanyijwe - kugirango wongere itsinda ryurutonde kugirango ukore imbonerahamwe yibirimo yibirimo.

Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisising imyitozo ya fugiat igihe gito. Voluptate deserunt icara sunt nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minim tempor sunt voluptate consectetur imyitozo id ut nulla. Ea et fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip eiusmod dolor. Anim ad Lorem aliqua muri cupidatat nisi enim eu nostrud do aliquip veniam minim.

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>

Koresha ibiranga amakuru

Urashobora gukora urutonde rwitsinda ryanditse utanditse JavaScript iyo ari yo yose ugaragaza data-toggle="list"cyangwa ku kintu. Koresha aya makuru ibiranga kuri .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>

Binyuze kuri JavaScript

Gushoboza urutonde rwibintu ukoresheje JavaScript (buri kintu cyurutonde kigomba gukoreshwa kugiti cye):

$('#myList a').on('click', function (e) {
  e.preventDefault()
  $(this).tab('show')
})

Urashobora gukora urutonde rwumuntu muburyo butandukanye:

$('#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

Ingaruka zashize

Kugirango utume pansiyo ishire, ongera .fadekuri buri .tab-pane. Urupapuro rwa mbere rwa pane rugomba kandi .showgukora ibintu byambere bigaragara.

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

Uburyo

$ (). tab

Gukora urutonde rwibintu nibintu birimo. Tab igomba kuba ifite a data-targetcyangwa hrefigamije icyerekezo cya kontineri muri 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 ('kwerekana')

Hitamo urutonde rwatanzwe kandi rwerekane pane. Ibindi bintu byose byurutonde byari byatoranijwe mbere biba bitatoranijwe kandi pane bifitanye isano irahishe. Garuka kumuhamagara mbere yuko tab pane yerekanwe mubyukuri (urugero, mbere yuko shown.bs.tabibyabaye bibaho).

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

Ibyabaye

Iyo werekanye tab nshya, ibyabaye birashya muburyo bukurikira:

  1. hide.bs.tab(kuri tab ikora)
  2. show.bs.tab(kuri to-kwerekanwa tab)
  3. hidden.bs.tab(kurupapuro rwibanze rukora, kimwe hide.bs.tabnkicyabaye)
  4. shown.bs.tab(ku gishya-gikora gusa-cyerekanwe tab, kimwe kimwe show.bs.tabnicyabaye)

Niba nta tab yari isanzwe ikora, hide.bs.tabibyabaye hidden.bs.tabntibizasezererwa.

Ubwoko bwibyabaye Ibisobanuro
kwerekana.bs.tab Ibirori birasa kuri tab yerekana, ariko mbere yuko tab nshya yerekanwe. Koresha event.targetno event.relatedTargetgutondekanya tab ikora hamwe na tab yabanjirije gukora (niba ihari).
yerekanwe.bs.tab Ibirori birasa kuri tab yerekanwe nyuma ya tab yerekanwe. Koresha event.targetno event.relatedTargetgutondekanya tab ikora hamwe na tab yabanjirije gukora (niba ihari).
guhisha.bs.tab Ibirori birasa iyo tab nshya igomba kwerekanwa (nuko rero tab ikora ibanza igomba guhishwa). Koresha event.targetno event.relatedTargetkugenera icyerekezo gikora hamwe nigishya vuba-kugirango-gikore, kimwe.
bihishe.bs.tab Ibirori birashya nyuma ya tab nshya yerekanwe (nuko rero tab yabanjirije gukora irahishe). Koresha event.targetno event.relatedTargetguhitamo intego yabanjirije gukora hamwe na tab nshya ikora, uko bikurikirana. 
$('a[data-toggle="list"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})