Source

Kundi la orodha

Vikundi vya orodha ni sehemu inayoweza kunyumbulika na yenye nguvu ya kuonyesha mfululizo wa maudhui. Zirekebishe na zipanue ili kusaidia takriban maudhui yoyote ndani.

Mfano wa msingi

Kundi la msingi zaidi la orodha ni orodha isiyo na mpangilio iliyo na vitu vya orodha na madarasa sahihi. Jenga juu yake na chaguo zinazofuata, au na CSS yako mwenyewe inavyohitajika.

Cras justo odio
Dapibus ac kuwezesha katika
Morbi leo rius
Porta ac consectetur ac
Vestibulum na 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>

Vipengee vinavyotumika

Ongeza .activekwa a .list-group-itemili kuonyesha uteuzi unaotumika sasa.

Cras justo odio
Dapibus ac kuwezesha katika
Morbi leo rius
Porta ac consectetur ac
Vestibulum na 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>

Vipengee vilivyozimwa

Ongeza .disabledkwa a .list-group-itemili kuifanya ionekane kuwa imezimwa. Kumbuka kwamba baadhi ya vipengele vilivyo na .disabledpia vitahitaji JavaScript maalum ili kuzima kikamilifu matukio yao ya kubofya (kwa mfano, viungo).

Cras justo odio
Dapibus ac kuwezesha katika
Morbi leo rius
Porta ac consectetur ac
Vestibulum na 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>

Viungo na vifungo

Tumia <a>s au <button>s kuunda vipengee vya kikundi vinavyoweza kutekelezeka kwa hali ya kuelea, iliyozimwa, na amilifu kwa kuongeza .list-group-item-action. Tunatenganisha madarasa haya ya uwongo ili kuhakikisha vikundi vya orodha vilivyoundwa na vipengee visivyoingiliana (kama vile <li>s au <div>s) havitoi uwezo wa kubofya au kugusa.

Hakikisha hutumii madarasa ya kawaida .btnhapa .

Cras justo odio Dapibus ac kuwezesha katika Morbi leo rius Porta ac consectetur ac Vestibulum na 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>

Na <button>s, unaweza pia kutumia disabledsifa badala ya .disableddarasa. Cha kusikitisha ni kwamba, <a>s haiungi mkono sifa ya walemavu.

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

Suuza

Ongeza .list-group-flushili kuondoa baadhi ya mipaka na pembe zilizoviringwa ili kutoa vipengee vya orodha ukingo-kwa-kingo katika kontena kuu (km, kadi).

Cras justo odio
Dapibus ac kuwezesha katika
Morbi leo rius
Porta ac consectetur ac
Vestibulum na 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>

Mlalo

Ongeza .list-group-horizontalili kubadilisha mpangilio wa orodha ya vipengee vya kikundi kutoka wima hadi mlalo katika sehemu zote za kukatisha. Vinginevyo, chagua lahaja jibu .list-group-horizontal-{sm|md|lg|xl}ili kufanya kikundi cha orodha kiwe mlalo kuanzia kwenye sehemu hiyo ya kuvunja min-width. Kwa sasa vikundi vya orodha za mlalo haviwezi kuunganishwa na vikundi vya orodha ya safisha.

ProTip: Je, unataka vipengee vya kikundi vya upana wa usawa vikiwa mlalo? Ongeza .flex-fillkwa kila kipengee cha kikundi cha orodha.

Cras justo odio
Dapibus ac kuwezesha katika
Morbi leo rius

<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 kuwezesha katika
Morbi leo rius

<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 kuwezesha katika
Morbi leo rius

<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 kuwezesha katika
Morbi leo rius

<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 kuwezesha katika
Morbi leo rius

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

Madarasa ya muktadha

Tumia madarasa ya muktadha ili kuunda vipengee vya orodha vilivyo na usuli na rangi maridadi.

Dapibus ac kuwezesha katika
Kipengee rahisi cha orodha ya msingi
Kipengee rahisi cha kikundi cha sekondari
Kipengee rahisi cha orodha ya mafanikio
Kipengee rahisi cha orodha ya hatari
Kipengee rahisi cha orodha ya onyo
Kipengee rahisi cha orodha ya habari
Kipengee rahisi cha orodha ya mwanga
Kipengee rahisi cha kikundi cha orodha nyeusi

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

Madarasa ya muktadha pia hufanya kazi na .list-group-item-action. Kumbuka nyongeza ya mitindo ya kuelea hapa haipo katika mfano uliopita. Pia inaungwa mkono na .activeserikali; itumie ili kuonyesha uteuzi unaotumika kwenye kipengee cha kikundi cha muktadha.

Dapibus ac kuwezesha katika Kipengee rahisi cha orodha ya msingi Kipengee rahisi cha kikundi cha sekondari Kipengee rahisi cha orodha ya mafanikio Kipengee rahisi cha orodha ya hatari Kipengee rahisi cha orodha ya onyo Kipengee rahisi cha orodha ya habari Kipengee rahisi cha orodha ya mwanga Kipengee rahisi cha kikundi cha orodha nyeusi

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

Kuwasilisha maana kwa teknolojia za usaidizi

Kutumia rangi ili kuongeza maana hutoa tu kielelezo cha kuona, ambacho hakitawasilishwa kwa watumiaji wa teknolojia saidizi - kama vile visoma skrini. Hakikisha kwamba maelezo yanayoashiriwa na rangi ni dhahiri kutoka kwa maudhui yenyewe (km maandishi yanayoonekana), au yanajumuishwa kupitia njia mbadala, kama vile maandishi ya ziada yaliyofichwa na .sr-onlydarasa.

Na beji

Ongeza beji kwa bidhaa yoyote ya kikundi ili kuonyesha hesabu ambazo hazijasomwa, shughuli na zaidi kwa usaidizi wa baadhi ya huduma .

Cras justo odio14
Dapibus ac kuwezesha katika2
Morbi leo rius1

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

Maudhui maalum

Ongeza karibu HTML yoyote ndani, hata kwa vikundi vya orodha vilivyounganishwa kama ilivyo hapa chini, kwa usaidizi wa huduma za flexbox .

Orodhesha kichwa cha kipengee cha kikundi

siku 3 zilizopita

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

Donec id elit non mi porta.

Orodhesha kichwa cha kipengee cha kikundi

siku 3 zilizopita

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

Donec id elit non mi porta.

Orodhesha kichwa cha kipengee cha kikundi

siku 3 zilizopita

Donec id elit non mi porta gravida at 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>

Tabia ya JavaScript

Tumia kichupo cha programu-jalizi ya JavaScript—ijumuishe kibinafsi au kupitia faili iliyokusanywa bootstrap.js—ili kupanua kikundi chetu cha orodha ili kuunda vidirisha vya kichupo vya maudhui ya ndani.

Nyumbani Wasifu Ujumbe Mipangilio

Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing exercitation fugiat tempor. Voluptate deserunt sit sunt nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minim tempor sunt vouptate consectetur exercitation id ut nulla. Et fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip eiusmod dolor. Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud kufanya 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>

Kutumia sifa za data

Unaweza kuwezesha urambazaji wa kikundi cha orodha bila kuandika JavaScript yoyote kwa kubainisha tu data-toggle="list"au kwa kipengele. Tumia sifa hizi za data kwenye .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>

Kupitia JavaScript

Washa kipengee cha orodha kinachoweza kutekelezeka kupitia JavaScript (kila kipengee cha orodha kinahitaji kuamilishwa kibinafsi):

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

Unaweza kuwezesha kipengee cha orodha kwa njia kadhaa:

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

Fifisha athari

Ili kufanya kidirisha cha vichupo kufifia, ongeza .fadekwa kila .tab-pane. Kidirisha cha kichupo cha kwanza lazima pia kiwe na .showmaudhui ya awali kuonekana.

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

Mbinu

$().kichupo

Huwasha kipengele cha kipengee cha orodha na kontena ya maudhui. Kichupo kinapaswa kuwa na nodi ya chombo data-targetau inayolenga kwenye DOM.href

<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('onyesha')

Huchagua kipengee cha orodha kilichotolewa na kuonyesha kidirisha chake kinachohusiana. Kipengee kingine chochote cha orodha ambacho kilichaguliwa hapo awali kitaacha kuchaguliwa na kidirisha chake kinachohusishwa hufichwa. Hurejesha kwa mpigaji kabla kidirisha cha kichupo hakijaonyeshwa (kwa mfano, kabla ya shown.bs.tabtukio kutokea).

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

Matukio

Wakati wa kuonyesha kichupo kipya, matukio huwaka kwa mpangilio ufuatao:

hide.bs.tab(kwenye kichupo kinachotumika sasa)
show.bs.tab(kwenye kichupo cha-kuonyeshwa)
hidden.bs.tab(kwenye kichupo amilifu kilichotangulia, sawa na cha hide.bs.tabtukio)
shown.bs.tab(kwenye kichupo kipya-kilichoonyeshwa, sawa na cha show.bs.tabtukio)

Ikiwa hakuna kichupo kilichokuwa tayari kinatumika, matukio hide.bs.tabna hidden.bs.tabmatukio hayatafutwa.

Aina ya tukio	Maelezo
kichupo cha.bs	Tukio hili linawaka kwenye onyesho la kichupo, lakini kabla ya kichupo kipya kuonyeshwa. Tumia `event.target`na `event.relatedTarget`kulenga kichupo amilifu na kichupo amilifu cha awali (kama kinapatikana) mtawalia.
kichupo.cha.bs	Tukio hili huwashwa kwenye onyesho la kichupo baada ya kichupo kuonyeshwa. Tumia `event.target`na `event.relatedTarget`kulenga kichupo amilifu na kichupo amilifu cha awali (kama kinapatikana) mtawalia.
Ficha.bs.kichupo	Tukio hili huwaka wakati kichupo kipya kitaonyeshwa (na kwa hivyo kichupo amilifu cha awali kitafichwa). Tumia `event.target`na `event.relatedTarget`kulenga kichupo kinachotumika sasa na kichupo kipya kitakachotumika hivi karibuni, mtawalia.
kichupo.bs.fiche	Tukio hili huwaka baada ya kichupo kipya kuonyeshwa (na kwa hivyo kichupo amilifu cha awali kimefichwa). Tumia `event.target`na `event.relatedTarget`kulenga kichupo amilifu cha awali na kichupo kipya kinachotumika, mtawalia.

$('a[data-toggle="list"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})