in English

Lis gwoup

Gwoup lis yo se yon eleman fleksib ak pwisan pou montre yon seri kontni. Modifye ak pwolonje yo pou sipòte prèske nenpòt kontni andedan.

Egzanp de baz

Gwoup lis ki pi fondamantal la se yon lis ki pa gen lòd ak atik lis yo ak klas apwopriye yo. Bati sou li ak opsyon ki swiv yo, oswa ak pwòp CSS ou jan sa nesesè.

  • Yon atik
  • Yon dezyèm atik
  • Yon twazyèm atik
  • Yon katriyèm atik
  • Ak yon senkyèm youn
<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>

Atik aktif

Ajoute .activenan yon .list-group-itempou endike seleksyon aktif aktyèl la.

  • Yon atik aktif
  • Yon dezyèm atik
  • Yon twazyèm atik
  • Yon katriyèm atik
  • Ak yon senkyèm youn
<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>

Atik ki andikape

Ajoute .disablednan yon .list-group-itempou fè li parèt enfim. Remake byen ke kèk eleman ak .disabledyo pral mande tou JavaScript koutim konplètman enfim evènman klike sou yo (egzanp, lyen).

  • Yon atik ki andikape
  • Yon dezyèm atik
  • Yon twazyèm atik
  • Yon katriyèm atik
  • Ak yon senkyèm youn
<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>

Sèvi ak <a>s oswa <button>s pou kreye atik gwoup lis aksyon ak eta hover, andikape, ak aktif lè w ajoute .list-group-item-action. Nou separe pseudo-klas sa yo pou asire gwoup lis ki fèt ak eleman ki pa entèaktif (tankou <li>s oswa <div>s) pa bay yon abònman klike sou oswa tiyo.

Asire w ou pa sèvi ak klas estanda .btnyo isit la .

Atik lyen aktyèl la Yon dezyèm atik lyen Yon twazyèm atik lyen Yon atik lyen katriyèm Yon atik lyen ki andikape 
<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>

Avèk <button>s, ou ka sèvi ak disabledatribi a olye pou .disabledklas la. Malerezman, <a>yo pa sipòte atribi ki andikape.

<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

Ajoute .list-group-flushpou retire kèk fwontyè ak kwen awondi pou rann atik gwoup lis kwen-a-bò nan yon veso paran (pa egzanp, kat).

  • Yon atik
  • Yon dezyèm atik
  • Yon twazyèm atik
  • Yon katriyèm atik
  • Ak yon senkyèm youn
<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>

Orizontal

Ajoute .list-group-horizontalpou chanje Layout atik gwoup lis yo soti nan vètikal a orizontal atravè tout pwen rupture. Altènativman, chwazi yon varyant ki reponn .list-group-horizontal-{sm|md|lg|xl}pou fè yon gwoup lis orizontal apati pwen breakpoint sa a min-width. Aktyèlman gwoup lis orizontal pa ka konbine avèk gwoup lis flush.

ProTip: Vle atik gwoup lis egal-lajè lè orizontal? Ajoute .flex-fillnan chak atik gwoup lis.

  • Yon atik
  • Yon dezyèm atik
  • Yon twazyèm atik
  • Yon atik
  • Yon dezyèm atik
  • Yon twazyèm atik
  • Yon atik
  • Yon dezyèm atik
  • Yon twazyèm atik
  • Yon atik
  • Yon dezyèm atik
  • Yon twazyèm atik
  • Yon atik
  • Yon dezyèm atik
  • Yon twazyèm atik
<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 kontèks yo

Sèvi ak klas kontèks pou style atik lis yo ak yon background ak koulè.

  • Yon senp atik gwoup lis default
  • Yon senp atik gwoup lis prensipal
  • Yon senp atik gwoup lis segondè
  • Yon senp atik gwoup lis siksè
  • Yon senp atik gwoup lis danje
  • Yon atik gwoup lis avètisman senp
  • Yon atik gwoup lis enfòmasyon senp
  • Yon senp atik gwoup lis limyè
  • Yon senp atik gwoup lis nwa
<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>

Klas kontèks yo travay tou ak .list-group-item-action. Remake byen adisyon nan estil yo hover isit la pa prezan nan egzanp anvan an. Leta sipòte tou .active; aplike li pou endike yon seleksyon aktif sou yon atik gwoup lis kontèks.

Yon senp atik gwoup lis default Yon senp atik gwoup lis prensipal Yon senp atik gwoup lis segondè Yon senp atik gwoup lis siksè Yon senp atik gwoup lis danje Yon atik gwoup lis avètisman senp Yon atik gwoup lis enfòmasyon senp Yon senp atik gwoup lis limyè Yon senp atik gwoup lis nwa 
<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>
Transmèt siyifikasyon nan teknoloji asistans

Sèvi ak koulè pou ajoute siyifikasyon sèlman bay yon endikasyon vizyèl, ki pa pral transmèt bay itilizatè teknoloji asistans - tankou lektè ekran. Asire w ke enfòmasyon ki endike nan koulè a ​​se swa evidan nan kontni an li menm (egzanp tèks vizib la), oswa yo enkli nan mwayen altènatif, tankou tèks adisyonèl kache ak .sr-onlyklas la.

Avèk badj

Ajoute badj nan nenpòt atik gwoup lis pou montre konte yo, aktivite, ak plis ankò avèk èd kèk sèvis piblik .

  • Yon atik lis14
  • Yon dezyèm atik lis2
  • Yon twazyèm atik lis1 
<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>

Kontni Custom

Ajoute prèske nenpòt HTML nan, menm pou gwoup lis ki lye tankou sa ki anba a, avèk èd nan sèvis piblik flexbox .

Lis gwoup atik tit
3 jou de sa

Gen kèk kontni anplasman nan yon paragraf.

Ak kèk ti enprime.
Lis gwoup atik tit
3 jou de sa

Gen kèk kontni anplasman nan yon paragraf.

Ak kèk ti enprime muet.
Lis gwoup atik tit
3 jou de sa

Gen kèk kontni anplasman nan yon paragraf.

Ak kèk ti enprime muet. 
<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>

Konpòtman JavaScript

Sèvi ak tab JavaScript plugin la—enkli li endividyèlman oswa atravè bootstrap.jsfichye konpile a—pou pwolonje gwoup lis nou an pou kreye fenèt tabulab nan kontni lokal yo.

Gen kèk kontni anplasman nan yon paragraf ki gen rapò ak "Lakay". Ak kèk plis kontni, yo itilize isit la jis pad deyò epi ranpli panèl tab sa a. Nan pwodiksyon, ou ta evidamman gen plis kontni reyèl isit la. Epi li pa jis tèks. Li ta ka nenpòt bagay, reyèlman. Tèks, imaj, fòm.

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>

Sèvi ak atribi done yo

Ou ka aktive yon navigasyon gwoup lis san yo pa ekri okenn JavaScript pa senpleman espesifye data-toggle="list"oswa sou yon eleman. Sèvi ak atribi done sa yo sou .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>

Via JavaScript

Pèmèt atik lis tabable atravè JavaScript (yo dwe aktive chak atik nan lis endividyèlman):

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

Ou ka aktive atik endividyèl lis nan plizyè fason:

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

Efè fennen

Pou fè panèl onglets fennen nan, ajoute .fadenan chak .tab-pane. Premye volet tab la dwe genyen tou .showpou fè kontni inisyal la vizib.

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

Metòd

$().tab

Aktive yon eleman atik lis ak veso kontni. Tab ta dwe gen swa yon data-targetoswa yon hrefvize yon ne veso nan DOM la.

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

Chwazi atik lis yo bay la epi li montre fenèt ki asosye li yo. Nenpòt lòt atik lis ki te chwazi deja vin pa seleksyone epi fenèt ki asosye li yo kache. Retounen bay moun kap rele a anvan yo te montre volet tab la (pa egzanp, anvan shown.bs.tabevènman an rive).

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

Evènman

Lè w ap montre yon nouvo tab, evènman yo pran dife nan lòd sa a:

  1. hide.bs.tab(sou onglet aktif aktyèl la)
  2. show.bs.tab(sou onglet ki dwe montre)
  3. hidden.bs.tab(sou onglet aktif anvan an, menm jan ak hide.bs.tabevènman an)
  4. shown.bs.tab(sou onglet ki fèk parèt aktif la, menm bagay la tou pou show.bs.tabevènman an)

Si pa gen okenn tab ki te deja aktif, evènman yo hide.bs.tabak hidden.bs.tabyo p ap revoke.

Kalite evènman Deskripsyon
montre.bs.tab Evènman sa a dife sou tab montre, men anvan yo te montre nouvo tab la. Sèvi event.targetak ak event.relatedTargetpou vize tab aktif la ak tab aktif anvan an (si disponib) respektivman.
montre.bs.tab Evènman sa a pran dife sou tab montre apre yo fin montre yon tab. Sèvi event.targetak ak event.relatedTargetpou vize tab aktif la ak tab aktif anvan an (si disponib) respektivman.
kache.bs.tab Evènman sa a dife lè yon nouvo tab yo dwe montre (e konsa tab aktif anvan an dwe kache). Sèvi event.targetak ak event.relatedTargetpou vize onglet aktyèl la aktif ak nouvo tab la byento-a-aktif, respektivman.
hidden.bs.tab Evènman sa a dife apre yo fin montre yon nouvo tab (e konsa tab aktif anvan an kache). Sèvi event.targetak ak event.relatedTargetpou vize tab aktif anvan an ak nouvo tab aktif la, respektivman. 
$('a[data-toggle="list"]').on('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})