Bootstrap 5 Listgrupper

grundläggande listgrupp

Den mest grundläggande listgruppen är en icke-punktlist med listobjekt:

För att skapa en grundläggande listgrupp, använd klassen .list-group s <ul> element och klass är .list-group-item s <li> elementet:

Exempel

<ul class="list-group">
  <li class="list-group-item">Första posten</li>
  <li class="list-group-item">Andra posten</li>
  <li class="list-group-item">Tredje posten</li>
</ul>

Prova själv

aktiv status

Använd .active Klass för att markera den aktuella posten:

Exempel

<ul class="list-group">
  <li class="list-group-item active">aktiv post</li>
  <li class="list-group-item">Andra posten</li>
  <li class="list-group-item">Tredje posten</li>
</ul>

Prova själv

listgrupp med länkar

För att skapa en listgrupp med länkar, använd <div> istället för <ul>, använd <a> istället för <li>Valfritt, om du vill ha en grå bakgrundsfärg när den är hoverad, lägg till .list-group-item-action Klass:

Exempel

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">det första</a>
  <a href="#" class="list-group-item list-group-item-action">den andra</a>
  <a href="#" class="list-group-item list-group-item-action">Tredje posten</a>
</div>

Prova själv

Inaktiverade objekt

.disabled Klassen lägger till ljusare textfärg till inaktiverade objekt. När använda på länkar tas hover-effekten bort:

Exempel

<div class="list-group">
  <a href="#" class="list-group-item disabled">Inaktiverad post</a>
  <a href="#" class="list-group-item disabled">Inaktiverad post</a>
  <a href="#" class="list-group-item">Tredje posten</a>
</div>

Prova själv

Ta bort kantlinjer

Använd .list-group-flush Klassen tar bort kantlinjer och rundhörn:

Exempel

<ul class="list-group list-group-flush">
  <li class="list-group-item">Första posten</li>
  <li class="list-group-item">Andra posten</li>
  <li class="list-group-item">Tredje posten</li>
  <li class="list-group-item">Fjärde posten</li>
</ul>

Prova själv

Numrerade listgrupper

Använd .list-group-numbered Klassen skapar listobjekt med numrering framför:

Exempel

<ol class="list-group list-group-numbered">
  <li class="list-group-item">Första posten</li>
  <li class="list-group-item">Andra posten</li>
  <li class="list-group-item">Tredje posten</li>
</ol>

Prova själv

Horisontell listgrupp

Om du vill visa listobjekten horisontellt istället för vertikalt (vid sidan om varandra istället för staplat), lägg till .list-group-horizontal Lägg till klassen till .list-group：

Exempel

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">Första posten</li>
  <li class="list-group-item">Andra posten</li>
  <li class="list-group-item">Tredje posten</li>
  <li class="list-group-item">Fjärde posten</li>
</ul>

Prova själv

Kontextklasser

Kontextklasser kan användas för att lägga till färg till listobjekt:

Klasser för att färga in listobjekt är:

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

Exempel

<ul class="list-group">
  <li class="list-group-item list-group-item-success">Lyckad post</li>
  <li class="list-group-item list-group-item-secondary">Sekundär element</li>
  <li class="list-group-item list-group-item-info">Infomelement</li>
  <li class="list-group-item list-group-item-warning">Varningselement</li>
  <li class="list-group-item list-group-item-danger">Farligt element</li>
  <li class="list-group-item list-group-item-primary">Primärt element</li>
  <li class="list-group-item list-group-item-dark">Mörkt element</li>
  <li class="list-group-item list-group-item-light">Ljust element</li>
</ul>

Prova själv

Länkar med kontextklass

Exempel

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">Åtgärds element</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">Framgångselement</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">Infomelement</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">Varningselement</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">Farligt objekt</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">Primärt objekt</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">Mörkt objekt</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">Ljust objekt</a>
</div>

Prova själv

Bärbara listgrupper

För .badge Kombinera klasser med utility/helper-klasser för att lägga till märken i listgrupper:

Exempel

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Inkommande brev
    <span class="badge bg-primary rounded-pill">12</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Reklammail
    <span class="badge bg-primary rounded-pill">50</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Papperskorgen
    <span class="badge bg-primary rounded-pill">99</span>
  </li>
</ul>

Prova själv