Source

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

  • Cras justo odio
  • Dapibus ak fasilite nan
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum nan 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>

Atik aktif

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

  • Cras justo odio
  • Dapibus ak fasilite nan
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum nan 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>

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

  • Cras justo odio
  • Dapibus ak fasilite nan
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum nan 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>

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 .

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

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

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

  • Cras justo odio
  • Dapibus ak fasilite nan
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum nan 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>

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.

  • Cras justo odio
  • Dapibus ak fasilite nan
  • 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 ak fasilite nan
  • 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 ak fasilite nan
  • 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 ak fasilite nan
  • 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 ak fasilite nan
  • 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>

Klas kontèks yo

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

  • Dapibus ak fasilite nan
  • 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">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>

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.

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

  • Cras justo odio14
  • Dapibus ak fasilite nan2
  • 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>

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 .

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

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.

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

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

Via JavaScript

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

$('#myList a').on('click', function (e) {
  e.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 (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})