Bootstrap 5 luetteloryhmät
- Edellinen sivu BS5 välilehdet
- Seuraava sivu BS5 kortti
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
- Edellinen sivu BS5 välilehdet
- Seuraava sivu BS5 kortti