Bootstrap 5 liste grupper

grundlæggende liste

Den mest grundlæggende liste er en uordnet liste, der indeholder listeemner:

For at oprette en grundlæggende liste, brug klasse .list-group af <ul> element og klasse er .list-group-item af <li> element:

Eksempel

<ul class="list-group">
  <li class="list-group-item">Første element</li>
  <li class="list-group-item">Andet element</li>
  <li class="list-group-item">Tredje element</li>
</ul>

Prøv det selv

aktiv tilstand

Brug .active Klasse til at fremhæve det aktuelle element:

Eksempel

<ul class="list-group">
  <li class="list-group-item active">aktiv element</li>
  <li class="list-group-item">Andet element</li>
  <li class="list-group-item">Tredje element</li>
</ul>

Prøv det selv

liste af elementer med links

For at oprette en liste af elementer med links, brug <div> erstat <ul>, brug <a> erstat <li>Valgfrit, hvis du ønsker en grå baggrundsfarve ved musoverførsel, tilføj .list-group-item-action Klasse:

Eksempel

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">første element</a>
  <a href="#" class="list-group-item list-group-item-action">andet element</a>
  <a href="#" class="list-group-item list-group-item-action">Tredje element</a>
</div>

Prøv det selv

Deaktiverede elementer

.disabled Klassen tilføjer en lysere tekstfarve til deaktiverede elementer. Når brugt med links, fjernes hover-effekten:

Eksempel

<div class="list-group">
  <a href="#" class="list-group-item disabled">Deaktiveret element</a>
  <a href="#" class="list-group-item disabled">Deaktiveret element</a>
  <a href="#" class="list-group-item">Tredje element</a>
</div>

Prøv det selv

Fjern kanter

Brug .list-group-flush Klassen fjerner kanter og rundhjørner:

Eksempel

<ul class="list-group list-group-flush">
  <li class="list-group-item">Første element</li>
  <li class="list-group-item">Andet element</li>
  <li class="list-group-item">Tredje element</li>
  <li class="list-group-item">Fjerde element</li>
</ul>

Prøv det selv

Nummererede liste

Brug .list-group-numbered Klassen opretter listeelementer med numre foran:

Eksempel

<ol class="list-group list-group-numbered">
  <li class="list-group-item">Første element</li>
  <li class="list-group-item">Andet element</li>
  <li class="list-group-item">Tredje element</li>
</ol>

Prøv det selv

Horisontal liste

Hvis du ønsker, at listeelementerne skal vises horisontalt i stedet for vertikalt (side om side i stedet for at stå op ad hinanden), skal du tilføje .list-group-horizontal klassen tilføjes til .list-group：

Eksempel

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">Første element</li>
  <li class="list-group-item">Andet element</li>
  <li class="list-group-item">Tredje element</li>
  <li class="list-group-item">Fjerde element</li>
</ul>

Prøv det selv

Kontekstklasser

Kontekstklasser kan bruges til at tilføje farve til listeelementer:

Listelementernes farve kan indstilles ved at bruge klassen:

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

Eksempel

<ul class="list-group">
  <li class="list-group-item list-group-item-success">Success item</li>
  <li class="list-group-item list-group-item-secondary">Sekundær element</li>
  <li class="list-group-item list-group-item-info">Info element</li>
  <li class="list-group-item list-group-item-warning">Advarsel element</li>
  <li class="list-group-item list-group-item-danger">Farlig element</li>
  <li class="list-group-item list-group-item-primary">Primær element</li>
  <li class="list-group-item list-group-item-dark">Mørk element</li>
  <li class="list-group-item list-group-item-light">Lys element</li>
</ul>

Prøv det selv

Linkprojekter med kontekstklasse

Eksempel

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">Handlingselement</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success"> Succes element</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">Sekundær element</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">Info element</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">Advarsel element</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">Farlig element</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">Primær element</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">Mørk element</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">Lys element</a>
</div>

Prøv det selv

Medaljestribet liste

Flyt .badge Kombineret med utility/helper-klasser kan du tilføje medaljer til listen:

Eksempel

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Indbakken
    <span class="badge bg-primary rounded-pill">12</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Reklamebreve
    <span class="badge bg-primary rounded-pill">50</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Søppelkasse
    <span class="badge bg-primary rounded-pill">99</span>
  </li>
</ul>

Prøv det selv