Source

Lista grupului

Grupurile de liste sunt o componentă flexibilă și puternică pentru afișarea unei serii de conținut. Modificați-le și extindeți-le pentru a sprijini aproape orice conținut din interior.

Exemplu de bază

Cel mai elementar grup de liste este o listă neordonată cu elemente de listă și clasele adecvate. Construiți pe el cu opțiunile care urmează sau cu propriul dvs. CSS, după cum este necesar.

  • Cras justo odio
  • Dapibus ac facilitis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum la 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>

Elemente active

Adăugați .activela a .list-group-itempentru a indica selecția activă curentă.

  • Cras justo odio
  • Dapibus ac facilitis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum la 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>

Articole dezactivate

Adăugați .disabledla a .list-group-itempentru ca acesta să pară dezactivat. Rețineți că unele elemente cu .disabledvor necesita, de asemenea, JavaScript personalizat pentru a dezactiva complet evenimentele de clic (de exemplu, linkuri).

  • Cras justo odio
  • Dapibus ac facilitis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum la 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>

Utilizați <a>s sau <button>s pentru a crea elemente de grup de listă acționabile cu stări de trecere, dezactivat și activ, adăugând .list-group-item-action. Separăm aceste pseudo-clase pentru a ne asigura că grupurile de liste formate din elemente neinteractive (cum ar fi <li>s sau <div>s) nu oferă un clic sau atingere.

Asigurați-vă că nu utilizați clasele standard.btn aici .

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

Cu <button>s, puteți folosi și disabledatributul în locul .disabledclasei. Din păcate, <a>s nu acceptă atributul dezactivat.

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

Culoare

Adăugați .list-group-flushpentru a elimina unele margini și colțuri rotunjite pentru a reda elementele din grupul listei de la margine la margine într-un container părinte (de exemplu, carduri).

  • Cras justo odio
  • Dapibus ac facilitis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum la 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ă

Adăugați .list-group-horizontalpentru a modifica aspectul elementelor grupului de liste de la vertical la orizontal în toate punctele de întrerupere. Ca alternativă, alegeți o variantă receptivă .list-group-horizontal-{sm|md|lg|xl}pentru a face un grup de liste orizontal, începând de la punctul de întrerupere respectiv min-width. În prezent , grupurile de liste orizontale nu pot fi combinate cu grupurile de liste de culoare.

Sfat: doriți elemente de grup de listă cu lățime egală când sunt orizontale? Adăugați .flex-fillla fiecare element de grup din listă.

  • Cras justo odio
  • Dapibus ac facilitis in
  • 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 ac facilitis in
  • 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 ac facilitis in
  • 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 ac facilitis in
  • 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 ac facilitis in
  • 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>

Clasele contextuale

Utilizați clase contextuale pentru a stila elementele listei cu un fundal și o culoare cu stare.

  • Dapibus ac facilitis in
  • Un element simplu de grup de listă primară
  • Un simplu element secundar de grup de listă
  • Un element simplu de grup din lista de succes
  • Un element simplu de grup din lista de pericole
  • Un element simplu de grup din lista de avertizare
  • Un element simplu de grup din lista de informații
  • Un simplu element de grup de listă luminoasă
  • Un simplu element de grup din lista întunecată
<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>

Clasele contextuale funcționează și cu .list-group-item-action. Rețineți că adăugarea stilurilor de hover aici nu este prezentă în exemplul anterior. De asemenea, este sprijinit .activestatul; aplicați-l pentru a indica o selecție activă pe un element de grup de listă contextuală.

<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>
Transmiterea sensului tehnologiilor de asistență

Folosirea culorii pentru a adăuga sens oferă doar o indicație vizuală, care nu va fi transmisă utilizatorilor de tehnologii de asistență, cum ar fi cititoarele de ecran. Asigurați-vă că informațiile notate de culoare sunt fie evidente din conținutul în sine (de exemplu, textul vizibil), fie sunt incluse prin mijloace alternative, cum ar fi textul suplimentar ascuns cu .sr-onlyclasa.

Cu insigne

Adăugați insigne la orice element din grupul de listă pentru a afișa numărătoarele necitite, activitatea și multe altele, cu ajutorul unor utilitare .

  • Cras justo odio14
  • Dapibus ac facilitis in2
  • 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>

Conținut personalizat

Adăugați aproape orice HTML în interior, chiar și pentru grupurile de liste legate, cum ar fi cel de mai jos, cu ajutorul utilitarelor 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>

Comportamentul JavaScript

Utilizați pluginul JavaScript pentru filă - includeți-l individual sau prin bootstrap.jsfișierul compilat - pentru a extinde grupul nostru de listă pentru a crea panouri de conținut local cu tabele.

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

Utilizarea atributelor de date

Puteți activa o navigare în grup de listă fără a scrie JavaScript, prin simpla specificare data-toggle="list"sau pe un element. Utilizați aceste atribute de date pe .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>

Prin JavaScript

Activați elementul din listă cu tabele prin JavaScript (fiecare element din listă trebuie activat individual):

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

Puteți activa un element individual din listă în mai multe moduri:

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

Efect de estompare

Pentru a face ca panoul de file să dispară, adăugați .fadela fiecare .tab-pane. De asemenea, primul panou de file trebuie .showsă facă vizibil conținutul inițial.

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

Metode

$().tab

Activează un element de listă și un container de conținut. Tab ar trebui să aibă fie un, fie un data-targetnod hrefde container în 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('arată')

Selectează elementul din listă dat și arată panoul asociat acestuia. Orice alt element din listă care a fost selectat anterior devine neselectat și panoul asociat este ascuns. Revine la apelant înainte ca panoul de file să fie afișat efectiv (de exemplu, înainte de apariția shown.bs.tabevenimentului).

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

Evenimente

Când se afișează o filă nouă, evenimentele se declanșează în următoarea ordine:

  1. hide.bs.tab(în fila activă curentă)
  2. show.bs.tab(pe fila de afișat)
  3. hidden.bs.tab(pe fila activă anterioară, aceeași ca pentru hide.bs.tabeveniment)
  4. shown.bs.tab(în fila nou-activă tocmai afișată, aceeași ca și pentru show.bs.tabeveniment)

Dacă nicio filă nu a fost deja activă, evenimentele hide.bs.tabși hidden.bs.tabnu vor fi declanșate.

Tip de eveniment Descriere
arată.bs.tab Acest eveniment se declanșează în afișarea filelor, dar înainte ca noua filă să fie afișată. Utilizați event.targetși event.relatedTargetpentru a viza fila activă și, respectiv, fila activă anterioară (dacă este disponibilă).
afișat.bs.tab Acest eveniment se declanșează în afișarea filelor după ce a fost afișată o filă. Utilizați event.targetși event.relatedTargetpentru a viza fila activă și, respectiv, fila activă anterioară (dacă este disponibilă).
ascunde.bs.tab Acest eveniment se declanșează atunci când trebuie afișată o filă nouă (și astfel fila activă anterioară trebuie să fie ascunsă). Utilizați event.targetși event.relatedTargetpentru a viza fila activă curentă și, respectiv, noua filă care va fi activă în curând.
ascuns.bs.tab Acest eveniment se declanșează după ce este afișată o nouă filă (și astfel fila activă anterioară este ascunsă). Utilizați event.targetși event.relatedTargetpentru a viza fila activă anterioară și, respectiv, noua filă activă.
$('a[data-toggle="list"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})