in English

Lista di grup

List grup na wan fleksibul ɛn pawaful kɔmpɔnɛnt fɔ sho wan siriɔs kɔntinyu. Modify ɛn ɛkstɛnd dɛn fɔ sɔpɔt jɔs lɛk ɛni kɔntinyu insay.

Besik ɛgzampul

Di list grup we impɔtant pas ɔl na wan list we nɔ ɔda wit di tin dɛn we de na di list ɛn di rayt klas dɛn. Bil pan am wit di opshɔn dɛn we de kam, ɔ wit yu yon CSS as nid de.

  • Wan tin we dɛn mek
  • Wan sɛkɔn tin
  • Wan tɔd tin
  • Wan nɔmba 4 tin
  • Ɛn wan nɔmba fayv wan
<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>

Di tin dɛn we de wok

Ad .activeto a .list-group-itemfɔ sho di aktif sɛlɛkshɔn we de naw.

  • Wan tin we de wok tranga wan
  • Wan sɛkɔn tin
  • Wan tɔd tin
  • Wan nɔmba 4 tin
  • Ɛn wan nɔmba fayv wan
<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>

Di tin dɛn we dɛn dɔn disable

Ad .disabledto a .list-group-itemfɔ mek i tan lɛk se i nɔ ebul fɔ wok. Notis se sɔm ɛlimɛnt dɛn wit .disabledgo nid bak kɔstɔm JavaSkript fɔ fulɔp fɔ disable dɛn klik ivin dɛn (ɛgz., link dɛn).

  • Wan tin we nɔ ebul fɔ wok
  • Wan sɛkɔn tin
  • Wan tɔd tin
  • Wan nɔmba 4 tin
  • Ɛn wan nɔmba fayv wan
<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>

Yuz <a>s ɔ <button>s fɔ mek akshɔnable list grup aytem dɛn wit hova, disabled, ɛn aktiv stet dɛn bay we yu ad .list-group-item-action. Wi de separet dɛn pseudo-klas ya fɔ mek shɔ se list grup dɛn we dɛn mek wit nɔ-intaraktiv ɛlimɛnt dɛn (lɛk <li>s ɔ <div>s) nɔ de gi klik ɔ tap afɔdans.

Mek shɔ se yu nɔ yuz di standad .btnklas dɛn we de ya .

Di link aytem we de naw Wan sɛkɔn link aytem Wan tɔd link aytem Wan nɔmba 4 link aytem Wan link aytem we nɔ de wok 
<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>

Wit <button>s, yu kin mek yus bak to di disabledatribyut insted of di .disabledklas. I sɔri fɔ no se <a>s nɔ de sɔpɔt di disabled atribyut.

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

Flush fɔ yuz am

Ad .list-group-flushfɔ pul sɔm bɔda dɛn ɛn rawnd kɔna dɛn fɔ rɛnd list grup aytem dɛn ed-to-ɛj insay wan mama kɔntena (ɛgz., kad dɛn).

  • Wan tin we dɛn mek
  • Wan sɛkɔn tin
  • Wan tɔd tin
  • Wan nɔmba 4 tin
  • Ɛn wan nɔmba fayv wan
<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>

Bifo ɛn biɛn

Ad .list-group-horizontalfɔ chenj di layout fɔ di list grup aytem dɛn frɔm vertikal to ɔrizɔntal akɔdin to ɔl di brekpɔynt dɛn. Ɔda we de fɔ du dat, pik wan rispɔnsiv vayriɔnt .list-group-horizontal-{sm|md|lg|xl}fɔ mek wan list grup ɔrizɔntal stat na da brekpɔynt de in min-width. Naw, ɔrizɔntal list grup dɛn nɔ kin jɔyn wit flush list grup dɛn.

ProTip: Yu want ikwal-wid list grup aytem dɛn we yu ɔrizɔntal? Ad .flex-fillto ɛni list grup aytem.

  • Wan tin we dɛn mek
  • Wan sɛkɔn tin
  • Wan tɔd tin
  • Wan tin we dɛn mek
  • Wan sɛkɔn tin
  • Wan tɔd tin
  • Wan tin we dɛn mek
  • Wan sɛkɔn tin
  • Wan tɔd tin
  • Wan tin we dɛn mek
  • Wan sɛkɔn tin
  • Wan tɔd tin
  • Wan tin we dɛn mek
  • Wan sɛkɔn tin
  • Wan tɔd tin
<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>

Klas dɛn we de tɔk bɔt di kɔntɛks

Yuz kɔntɛkstual klas fɔ stayl list aytem dɛn wit stetful bakgrɔn ɛn kɔlɔ.

  • Wan simpul difɔlt list grup aytem
  • Wan simpul praymari list grup aytem
  • Wan simpul sɛkɔndari list grup aytem
  • Wan simpul sakses list grup aytem
  • Wan simpul denja list grup aytem
  • Wan simpul wɔnin list grup aytem
  • Wan simpul info list grup aytem
  • Wan simpul layt list grup aytem
  • Wan simpul dak list grup aytem
<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>

Kɔntɛkstual klas dɛn kin wok bak wit .list-group-item-action. Notis di addɛshɔn fɔ di hova stayl dɛn ya we nɔ de na di ɛgzampul we bin dɔn pas. Di .activestet de sɔpɔt bak; aplay am fɔ sho wan aktif sɛlɛkshɔn pan wan kɔntɛkstual list grup aytem.

Wan simpul difɔlt list grup aytem Wan simpul praymari list grup aytem Wan simpul sɛkɔndari list grup aytem Wan simpul sakses list grup aytem Wan simpul denja list grup aytem Wan simpul wɔnin list grup aytem Wan simpul info list grup aytem Wan simpul layt list grup aytem Wan simpul dak list grup aytem 
<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>
Fɔ gi minin to ɛtɛknɔlɔji dɛn we de ɛp

Yuz kala fɔ ad minin de jɔs gi wan vijual indikashɔn, we dɛn nɔ go gi to di wan dɛn we de yuz ɛtɛknɔlɔji dɛn we de ɛp – lɛk skrin rida dɛn. Mek shɔ se di infɔmeshɔn we dɛn sho wit di kɔlɔ de sho klia wan frɔm di tin we de insay insɛf (ɛgz. di tɛks we yu de si), ɔ dɛn put am insay ɔda we dɛn, lɛk ɔda tɛks we dɛn ayd wit di .sr-onlyklas.

Wit badge dɛn

Ad badge dɛn to ɛni list grup aytem fɔ sho di kɔnt dɛn we dɛn nɔ rid, di tin dɛn we dɛn de du, ɛn ɔda tin dɛn wit di ɛp we sɔm yutiliti dɛn de gi .

  • Wan tin we de na di list14 we de tɔk bɔt
  • Wan sɛkɔn tin we de na di list2. Di wan dɛn we de
  • Wan tɔd tin we de na di list1. Di wan dɛn we de 
<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>

Kɔstɔm kɔntinyu

Ad klos to ɛni HTML insay, ivin fɔ link list grup dɛn lɛk di wan we de dɔŋ ya, wit di ɛp fɔ flexbox utilities .

Lista di grup aytem edlayn
3 dez bifo

Sɔm ples dɛn we de insay wan paregraf.

Ɛn sɔm smɔl smɔl tin dɛn we dɛn rayt.
Lista di grup aytem edlayn
3 dez bifo

Sɔm ples dɛn we de insay wan paregraf.

Ɛn sɔm dɛn bin de muv smɔl smɔl print dɛn.
Lista di grup aytem edlayn
3 dez bifo

Sɔm ples dɛn we de insay wan paregraf.

Ɛn sɔm dɛn bin de muv smɔl smɔl print dɛn. 
<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>

JavaSkript bihayvya

Yuz di tab JavaSkript plɔgin—inklud am wan wan ɔ tru di bootstrap.jsfayl we dɛn dɔn kɔmpilayt—fɔ ɛkstɛnd wi list grup fɔ mek tabbul pan dɛn fɔ lokal kɔntinyu.

Sɔm pleshɔlda kɔntinyu na wan paregraf we gɛt fɔ du wit "Om". Ɛn sɔm mɔ kɔntinyu, yuz ya jɔs fɔ pad aut ɛn ful dis tab panɛl. Insay prodakshɔn, i klia se yu go gɛt mɔ rial kɔntinyu ya. Ɛn nɔto jɔs tɛks. I kin bi ɛnitin, fɔ tru. Tɛks, pikchɔ dɛn, fɔm dɛn.

Some placeholder content in a paragraph relating to "Profile". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

Some placeholder content in a paragraph relating to "Messages". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

Some placeholder content in a paragraph relating to "Settings". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

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

Yuz data atribyut dɛn

Yu kin aktiv wan list grup nevigishɔn we yu nɔ rayt ɛni JavaSkript bay we yu jɔs spɛsifa data-toggle="list"ɔ pan wan ɛlimɛnt. Yuz dɛn data atribyut dɛn ya na .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>

Yu kin yuz JavaSkript fɔ yuz am

Enable tabbable list item via JavaScript (ɛni list aytem nid fɔ aktiv wan wan):

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

Yu kin aktiv wan wan list aytem insay sɔm we dɛn:

$('#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 effekt we yu de du

Fɔ mek tab dɛn panɛl fayn insay, ad .fadeto ɛni wan pan dɛn .tab-pane. Di fɔs tab pan fɔ gɛt bak .showfɔ mek di fɔs tin dɛn we de insay de sho.

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

Di we aw dɛn de du am

$().tab fɔ di wan dɛn

Aktiv wan list aytem ɛlimɛnt ɛn kɔntinyu kɔntena. Tab fɔ gɛt ɛni wan pan wan data-targetɔ wan hrefwe de tɔch wan kɔntena node na di 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('sho') .

Pik di list aytem we dɛn gi ɛn sho di pan we gɛt fɔ du wit am. Ɛni ɔda list aytem we dɛn bin dɔn pik bifo tɛm nɔ kin pik ɛn di pan we gɛt fɔ du wit am kin ayd. Ritɔn to di pɔsin we kɔl bifo dɛn rili sho di tab pan (fɔ ɛgzampul, bifo di shown.bs.tabtin apin).

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

Di tin dɛn we kin apin

We yu de sho nyu tab, di tin dɛn we de apin de faya insay di ɔda we we de dɔŋ ya:

  1. hide.bs.tab(na di tab we de wok naw)
  2. show.bs.tab(na di tab we dɛn go sho)
  3. hidden.bs.tab(na di fɔs aktif tab, di sem wan we bin de fɔ di hide.bs.tabivin)
  4. shown.bs.tab(na di nyu-aktiv tab we jɔs sho, di sem wan we de fɔ di show.bs.tabivin)

If no tab nɔ bin dɔn ɔlrɛdi aktif, di hide.bs.tabɛn hidden.bs.tabivin dɛn nɔ go faya.

Di kayn tin we apin Tɔk bɔt
sho.bs.tab fɔ sho Dis ivent de faya pan tab sho, bɔt bifo dɛn dɔn sho di nyu tab. Yuz event.targetɛn event.relatedTargetfɔ tɔch di aktiv tab ɛn di aktiv tab we bin de bifo (if i de) rispɛktful wan.
we dɛn sho.bs.tab Dis ivent de faya pan tab sho afta dɛn dɔn sho wan tab. Yuz event.targetɛn event.relatedTargetfɔ tɔch di aktiv tab ɛn di aktiv tab we bin de bifo (if i de) rispɛktful wan.
ayd.bs.tab fɔ di wan dɛn we de Dis ivent de faya we dɛn fɔ sho nyu tab (ɛn so di fɔs aktif tab fɔ ayd). Yuz event.targetɛn event.relatedTargetfɔ tɔch di tab we de wok naw ɛn di nyu tab we go aktiv jisnɔ, rispɛktful wan.
di tab we dɛn ayd.bs Dis ivent de faya afta dɛn dɔn sho nyu tab (ɛn so di fɔs aktif tab de ayd). Yuz event.targetɛn event.relatedTargetfɔ tɔch di fɔs aktif tab ɛn di nyu aktif tab, rispɛktful wan. 
$('a[data-toggle="list"]').on('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})