Bootstrap 5 luetteloryhmät

peruslistaus

Peruslistaus on sisältämättömästä luettelosta koostuva luettelo:

Lisääksesi peruslistauksen, käytä luokkaa .list-group n <ul> elementti ja luokka ovat .list-group-item n <li> elementti:

Esimerkki

<ul class="list-group">
  <li class="list-group-item">Ensimmäinen kohta</li>
  <li class="list-group-item">Toinen kohta</li>
  <li class="list-group-item">Kolmas kohta</li>
</ul>

Kokeile itse

aktiivinen tila

Käytä .active Korosta nykyistä kohtaa luokalla:

Esimerkki

<ul class="list-group">
  <li class="list-group-item active">aktiivinen kohta</li>
  <li class="list-group-item">Toinen kohta</li>
  <li class="list-group-item">Kolmas kohta</li>
</ul>

Kokeile itse

linkitettyjen kohtien sisältämät listaukset

Lisääksesi linkitettyjä listauksen kohtia, käytä <div> korvaa <ul>käytä <a> korvaa <li>Vaihtoehtoisesti, jos haluat harmaat taustavärin hienostuksena, lisää .list-group-item-action Luokka:

Esimerkki

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">ensimmäinen kohta</a>
  <a href="#" class="list-group-item list-group-item-action">toinen kohta</a>
  <a href="#" class="list-group-item list-group-item-action">Kolmas kohta</a>
</div>

Kokeile itse

Estetty kohta

.disabled Luokka lisää estettyihin kohtiin vaaleamman tekstin värin. Kun käytetään linkkeihin, poistetaan hiiren osoitin efektit:

Esimerkki

<div class="list-group">
  <a href="#" class="list-group-item disabled">Estetty kohta</a>
  <a href="#" class="list-group-item disabled">Estetty kohta</a>
  <a href="#" class="list-group-item">Kolmas kohta</a>
</div>

Kokeile itse

Poista reunat

Käytä .list-group-flush Luokka poistaa reunat ja kulmat:

Esimerkki

<ul class="list-group list-group-flush">
  <li class="list-group-item">Ensimmäinen kohta</li>
  <li class="list-group-item">Toinen kohta</li>
  <li class="list-group-item">Kolmas kohta</li>
  <li class="list-group-item">Neljäs kohta</li>
</ul>

Kokeile itse

numeroidut listatyökalut

Käytä .list-group-numbered Luokka luo numeroituja listatyökalun kohtia:

Esimerkki

<ol class="list-group list-group-numbered">
  <li class="list-group-item">Ensimmäinen kohta</li>
  <li class="list-group-item">Toinen kohta</li>
  <li class="list-group-item">Kolmas kohta</li>
</ol>

Kokeile itse

Horisontaalinen listatyökalu

Jos haluat, että listatyökalun kohdat näyttävät horisontaalisesti eikä vertikaalisesti (rinnakkain eikä kerrottuna), lisää .list-group-horizontal luokka lisätään .list-group

Esimerkki

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">Ensimmäinen kohta</li>
  <li class="list-group-item">Toinen kohta</li>
  <li class="list-group-item">Kolmas kohta</li>
  <li class="list-group-item">Neljäs kohta</li>
</ul>

Kokeile itse

Kontekstiluokat

Kontekstiluokat voidaan käyttää listatyökalun kohtien väriin:

Listatyökalun kohtien värjäysluokat ovat:

  • .list-group-item-success
  • .list-group-item-secondary
  • .list-group-item-info
  • .list-group-item-warning
  • .list-group-item-danger
  • .list-group-item-primary
  • .list-group-item-dark
  • .list-group-item-light

Esimerkki

<ul class="list-group">
  <li class="list-group-item list-group-item-success">Onnistunut kohta</li>
  <li class="list-group-item list-group-item-secondary">Toissijainen kohta</li>
  <li class="list-group-item list-group-item-info">Tieto kohta</li>
  <li class="list-group-item list-group-item-warning">Varoituskohta</li>
  <li class="list-group-item list-group-item-danger">Vaarallinen kohta</li>
  <li class="list-group-item list-group-item-primary">Ensisijainen kohta</li>
  <li class="list-group-item list-group-item-dark">Tumma kohta</li>
  <li class="list-group-item list-group-item-light">Kirkas kohta</li>
</ul>

Kokeile itse

Kontekstiluokan sisältävät linkkikohtaiset elementit

Esimerkki

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">Toimintakohta</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">Onnistunut kohta</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">Toissijainen kohta</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">Tieto kohta</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">Varoituskohta</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">Vaarallinen kohta</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">Ensisijainen kohta</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">Pimeä kohta</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">Keskipohjainen kohta</a>
</div>

Kokeile itse

Tunnuslipulla varustettu luetteloryhmä

Siirrä .badge Yhdistämällä luokat ja utility/helper-luokat voidaan lisätä tunnuslippuja luetteloryhmään:

Esimerkki

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Sähköposti
    <span class="badge bg-primary rounded-pill">12</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Mainosviestit
    <span class="badge bg-primary rounded-pill">50</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Roskakori
    <span class="badge bg-primary rounded-pill">99</span>
  </li>
</ul>

Kokeile itse