in English

Liste ya groupe

Ba groupes ya liste ezali composante flexible pe ya makasi pona kolakisa série ya contenus. Bobongola mpe bobakisi yango mpo na kosunga kaka pene na makambo nyonso oyo ezali na kati.

Ndakisa ya moboko

Lisanga ya liste ya moboko mingi ezali liste oyo ezali na molongo te na biloko ya liste mpe bakelasi oyo ebongi. Tongela likolo na yango na ba options oyo elandi, to na CSS na yo moko soki esengeli.

  • Eloko moko
  • Eloko ya mibale
  • Eloko ya misato
  • Likambo ya minei
  • Mpe moko ya mitano
<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>

Biloko oyo ezali kosala

Bakisa .activena a .list-group-itemmpo na kolakisa kopona oyo ezali kosala sikoyo.

  • Eloko moko oyo ezali kosala
  • Eloko ya mibale
  • Eloko ya misato
  • Likambo ya minei
  • Mpe moko ya mitano
<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>

Biloko oyo ezali na bolɛmbu

Bakisa .disabledna a .list-group-itemmpo emonana lokola ekangami. Yeba ete ba éléments mosusu na .disabledekosenga mpe JavaScript personnalisé mpo na ko désactiver entièrement ba événements na bango ya cliquage (par exemple, ba liens).

  • Eloko moko oyo ekangami
  • Eloko ya mibale
  • Eloko ya misato
  • Likambo ya minei
  • Mpe moko ya mitano
<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>

Salelá <a>s to <button>s mpo na kosala biloko ya etuluku ya liste oyo ekoki kosala na makambo oyo ezali na hover, oyo ekangami, mpe oyo ezali kosala na kobakisa .list-group-item-action. Tokaboli ba pseudo-classes oyo pona ko assurer que ba groupes ya liste oyo esalemi na ba éléments non interactifs (lokola <li>s to <div>s) epesa te affordance ya clic to tap.

Sala makasi osalela ba classes standard.btn awa te .

Eloko ya lien ya lelo Eloko ya mibale ya lien Eloko ya misato ya lien Eloko ya minei ya lien Eloko ya lien oyo ekangami 
<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>

Na <button>s, okoki mpe kosalela disabledattribut na esika ya .disabledkelasi. Likambo ya mawa, <a>s esungaka te attribut oyo ekangami.

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

Kosukola yango

Bakisa .list-group-flushmpo na kolongola mwa bandelo mpe ba coins ya arrondi mpo na kolakisa biloko ya lisanga ya liste nsɔngɛ na nsɔngɛ na kati ya eloko ya moboti (ndakisa, bakarte).

  • Eloko moko
  • Eloko ya mibale
  • Eloko ya misato
  • Likambo ya minei
  • Mpe moko ya mitano
<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>

Ya kolala

Bakisa .list-group-horizontalmpo na kobongola bobongisi ya biloko ya lisanga ya liste uta na vertical kino na horizontal na kati ya ba points de rupture nionso. Na lolenge mosusu, pona variante oyo ezo répondre .list-group-horizontal-{sm|md|lg|xl}pona kosala groupe ya liste horizontale kobanda na point de rupture wana's min-width. Sikawa bituluku ya liste horizontale ekoki kosangisama te na bituluku ya liste ya flush.

ProTip: Olingi biloko ya etuluku ya liste ya bonene ekokani ntango ezali horizontal? Bakisa .flex-fillna liste moko na moko eloko ya etuluku.

  • Eloko moko
  • Eloko ya mibale
  • Eloko ya misato
  • Eloko moko
  • Eloko ya mibale
  • Eloko ya misato
  • Eloko moko
  • Eloko ya mibale
  • Eloko ya misato
  • Eloko moko
  • Eloko ya mibale
  • Eloko ya misato
  • Eloko moko
  • Eloko ya mibale
  • Eloko ya misato
<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>

Ba kelasi ya contexte

Salelá bakelasi ya contexte mpo na kosala liste ya biloko oyo ezali na fond mpe langi ya état.

  • Eloko ya groupe ya liste par défaut ya pete
  • Eloko ya groupe ya liste primaire ya pete
  • Eloko ya groupe ya liste secondaire ya pete
  • Eloko ya groupe ya liste ya succès ya pete
  • Eloko ya groupe ya liste ya makama ya pete
  • Eloko ya etuluku ya liste ya likebisi ya pɛtɛɛ
  • Eloko ya groupe ya liste ya info ya pete
  • Eloko ya etuluku ya liste ya pole ya pɛtɛɛ
  • Eloko ya groupe ya liste ya molili ya pete
<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>

Ba kelasi ya contexte esalaka mpe na .list-group-item-action. Boyeba kobakisa ba styles ya hover awa oyo ezali te na ndakisa ya liboso. Lisusu esungami ezali l’ .activeEtat; kosalela yango mpo na kolakisa koponama ya mosala na eloko ya etuluku ya liste ya contexte.

Eloko ya groupe ya liste par défaut ya pete Eloko ya groupe ya liste primaire ya pete Eloko ya groupe ya liste secondaire ya pete Eloko ya groupe ya liste ya succès ya pete Eloko ya groupe ya liste ya makama ya pete Eloko ya etuluku ya liste ya likebisi ya pɛtɛɛ Eloko ya groupe ya liste ya info ya pete Eloko ya etuluku ya liste ya pole ya pɛtɛɛ Eloko ya groupe ya liste ya molili ya pete 
<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>
Kopesa ndimbola na ba technologies ya kosunga

Kosalela langi mpo na kobakisa ndimbola epesaka kaka elembo ya komona, oyo ekopesama te na basaleli ya mayele ya kosunga – lokola batángi ya écran. Sala ete sango oyo elakisami na langi ezala polele uta na makambo yango moko (ndakisa makomi oyo ezali komonana), to ekotisama na nzela ya mayele mosusu, lokola makomi ya kobakisa oyo ebombami elongo na .sr-onlykelasi.

Na ba badges

Bakisa ba badges na eloko nyonso ya groupe ya liste mpo na kolakisa ba comptes oyo etangami te, activité, mpe makambo mosusu na lisalisi ya ba utilitaires mosusu .

  • Eloko moko ya liste14
  • Eloko ya mibale ya liste2. 2
  • Eloko ya misato ya liste1. 1. 
<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>

Contenu personnalisé

Bakisa pene na HTML nyonso na kati, ata mpo na bituluku ya liste oyo ezali na boyokani lokola oyo ezali awa na nse, na lisalisi ya ba utilitaires ya flexbox .

Liste ya motó ya likambo ya eloko ya etuluku
3 mikolo eleki

Makambo mosusu oyo ezali na kati ya paragrafe moko.

Mpe mwa makomi ya mikemike.
Liste ya motó ya likambo ya eloko ya etuluku
3 mikolo eleki

Makambo mosusu oyo ezali na kati ya paragrafe moko.

Mpe mwa makomi ya mikemike oyo ezalaki kokanga mongongo.
Liste ya motó ya likambo ya eloko ya etuluku
3 mikolo eleki

Makambo mosusu oyo ezali na kati ya paragrafe moko.

Mpe mwa makomi ya mikemike oyo ezalaki kokanga mongongo. 
<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>

Etamboli ya JavaScript

Salelá onglet plugin JavaScript —kotia yango mokomoko to na nzela ya bootstrap.jsfisyé oyo esangisi —mpo na koyeisa monene etuluku na biso ya liste mpo na kosala ba panneaux tabbables ya makambo ya esika.

Ba contenus ya placeholder mosusu na paragraphe moko oyo etali "Ndako". Mpe mwa makambo mosusu, esalelami awa kaka mpo na kopakola mpe kotondisa panneau oyo ya onglet. Na production, olingaki évidemment kozala na ba contenus ya solo mingi awa. Mpe kaka te bamesaje. Ekoki kozala eloko nyonso, mpenza. Makomi, bililingi, baformilɛrɛ.

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>

Kosalela ba attributs ya ba données

Okoki ko activer navigation ya groupe ya liste sans kokoma JavaScript moko te na ko préciser kaka data-toggle="list"to na élément moko. Salelá bizaleli oyo ya ba données 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>

Na nzela ya JavaScript

Activer eloko ya liste ya ba tabbables na nzela ya JavaScript (esengeli ko activer eloko moko na moko ya liste moko moko):

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

Okoki ko activer eloko ya liste moko moko na ba façons ebele:

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

Effet ya kosila

Mpo na kosala ete panneau ya ba onglets esili, bakisa .fadena moko na moko .tab-pane. Panneau ya onglet ya liboso esengeli mpe kozala .showna kosala ete makambo ya ebandeli emonanaka.

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

Ba méthodes ya kosala

$().tab

Ezali ko activer élément ya eloko ya liste mpe conteneur ya contenus. Onglet esengeli kozala na soit a soit data-targetun hrefciblant node ya conteneur na 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('lakisa') .

Pona eloko ya liste oyo epesami mpe elakisaka panneau na yango oyo esangisi yango. Eloko mosusu nyonso ya liste oyo eponami liboso ekokóma oyo eponami te mpe etanda na yango oyo esangisi yango ebombami. Ezongi na mobengi yambo ete esika ya tab elakisama mpenza (ndakisa, yambo ete shown.bs.tablikambo esalema).

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

Makambo oyo esalemaki

Ntango ozali kolakisa tab ya sika, makambo yango ekobeta na molɔngɔ oyo elandi:

  1. hide.bs.tab(na tab oyo ezali kosala lelo)
  2. show.bs.tab(na tab oyo esengeli kolakisa)
  3. hidden.bs.tab(na onglet actif ya liboso, ndenge moko na oyo ya hide.bs.tabévénement)
  4. shown.bs.tab(na tab oyo euti kolakisa sika oyo ezali kosala sika, ndenge moko na oyo ya show.bs.tablikambo yango)

Soki onglet moko te ezalaki déjà activé, ba événements hide.bs.tabmpe hidden.bs.tabekobeta te.

Lolenge ya likambo Ndimbola
lakisa.bs.tab Evenement oyo ezo beta na tab show, mais avant onglet ya sika elakisama. Salelá event.targetmpe mpo na event.relatedTargetko cibler onglet active mpe onglet active ya kala (soki ezali) respectivement.
elakisami.bs.tab Evenement oyo ezo beta na tab show sima ya tab moko elakisama. Salelá event.targetmpe mpo na event.relatedTargetko cibler onglet active mpe onglet active ya kala (soki ezali) respectivement.
bomba.bs.tab Evenement oyo ezo beta tango onglet ya sika esengeli kolakisa (et donc onglet actif ya kala esengeli kobombama). Salelá event.targetmpe event.relatedTargetmpo na kopesa motuya na tab oyo ezali kosala sikoyo mpe onglet ya sika oyo ekosalema kala mingi te, na kolanda.
ebombami.bs.tab Evenement oyo ezo beta sima ya onglet ya sika elakisami (mpe bongo onglet actif ya kala ebombami). Salelá event.targetmpe mpo na event.relatedTargetko cibler onglet active ya kala mpe onglet active ya sika, respectivement. 
$('a[data-toggle="list"]').on('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})