Grupy list Bootstrap 5

podstawowa lista grup

Najbardziej podstawowa lista grup to lista bez kolejności zawierająca elementy listy:

Aby utworzyć podstawową listę grup, użyj klasy .list-group z <ul> elementy i klasy: .list-group-item z <li> element:

Przykład

<ul class="list-group">
  <li class="list-group-item">Pierwszy element</li>
  <li class="list-group-item">Drugi element</li>
  <li class="list-group-item">Trzeci element</li>
</ul>

Spróbuj sam

stan aktywny

Użyj .active Klasa wyróżniająca bieżący element:

Przykład

<ul class="list-group">
  <li class="list-group-item active">aktywny element</li>
  <li class="list-group-item">Drugi element</li>
  <li class="list-group-item">Trzeci element</li>
</ul>

Spróbuj sam

lista grup zawierająca elementy z linkami

Aby utworzyć listę grup z linkami, użyj <div> zamiast <ul>, użyj <a> zamiast <li>Opcjonalnie, jeśli chcesz dodać szary tło przy najechaniu, dodaj .list-group-item-action Klasa:

Przykład

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">pierwszy element</a>
  <a href="#" class="list-group-item list-group-item-action">drugi element</a>
  <a href="#" class="list-group-item list-group-item-action">Trzeci Element</a>
</div>

Spróbuj sam

Projekty zablokowane

.disabled klasa dodaje jaśniejszy kolor tekstu do elementów zablokowanych. Gdy używane są w linkach, usuwa efekt podkreślenia przy najechaniu:

Przykład

<div class="list-group">
  <a href="#" class="list-group-item disabled">Projekt zablokowany</a>
  <a href="#" class="list-group-item disabled">Projekt zablokowany</a>
  <a href="#" class="list-group-item">Trzeci element</a>
</div>

Spróbuj sam

usuwa obramowanie

używając .list-group-flush klasę usuwa obramowanie i zaokrąglenia:

Przykład

<ul class="list-group list-group-flush">
  <li class="list-group-item">Pierwszy element</li>
  <li class="list-group-item">Drugi element</li>
  <li class="list-group-item">Trzeci element</li>
  <li class="list-group-item">Czwarty element</li>
</ul>

Spróbuj sam

listy grupowej z numerami

używając .list-group-numbered klasę tworzy elementy listy z numerami na początku:

Przykład

<ol class="list-group list-group-numbered">
  <li class="list-group-item">Pierwszy element</li>
  <li class="list-group-item">Drugi element</li>
  <li class="list-group-item">Trzeci element</li>
</ol>

Spróbuj sam

pozioma lista grupowa

Jeśli chcesz, aby elementy listy były wyświetlane poziomo zamiast pionowo (po bokach zamiast jeden nad drugim), dodaj .list-group-horizontal klasę dodać do .list-group：

Przykład

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">Pierwszy element</li>
  <li class="list-group-item">Drugi element</li>
  <li class="list-group-item">Trzeci element</li>
  <li class="list-group-item">Czwarty element</li>
</ul>

Spróbuj sam

Klasy kontekstowe

Klasy kontekstowe mogą być używane do dodania koloru do elementów listy:

Klasy używane do kolorowania elementów listy to:

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

Przykład

<ul class="list-group">
  <li class="list-group-item list-group-item-success">Sukces item</li>
  <li class="list-group-item list-group-item-secondary">Secondary item</li>
  <li class="list-group-item list-group-item-info">Info item</li>
  <li class="list-group-item list-group-item-warning">Warning item</li>
  <li class="list-group-item list-group-item-danger">Danger item</li>
  <li class="list-group-item list-group-item-primary">Primary item</li>
  <li class="list-group-item list-group-item-dark">Dark item</li>
  <li class="list-group-item list-group-item-light">Light item</li>
</ul>

Spróbuj sam

Link item z klasą kontekstową

Przykład

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">Action item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">Success item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">Secondary item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">Info item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">Warning item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">Element zagrożenia</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">Główny element</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">Ciemny element</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">Lśniący element</a>
</div>

Spróbuj sam

Lista grupowa z odznaką

Przypisz .badge Klasy oraz klasy utility/helper mogą być łączone, aby dodać odznaki do listy grupowej:

Przykład

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Skrzynka odbiorcza
    <span class="badge bg-primary rounded-pill">12</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    E-maile reklamowe
    <span class="badge bg-primary rounded-pill">50</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Kosz na śmieci
    <span class="badge bg-primary rounded-pill">99</span>
  </li>
</ul>

Spróbuj sam