Grupy z listą Bootstrap
Podstawowe grupy list
Najbardziej podstawową grupą list jest lista nieuporządkowana z elementami listy:
- Pierwsza pozycja
- Druga pozycja
- Trzecia pozycja
Aby utworzyć podstawową grupę list, użyj <ul>elementu z class .list-groupi
<li>elementów z class .list-group-item:
Przykład
<ul class="list-group">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
</ul>
Lista grup z odznakami
Możesz także dodać odznaki do grupy list. Plakietki zostaną automatycznie umieszczone po prawej stronie:
- 12 Nowy
- 5 Usunięto
- 3 Ostrzeżenia
Aby utworzyć odznakę, utwórz <span>element z klasą .badge
wewnątrz elementu listy:
Przykład
<ul class="list-group">
<li class="list-group-item">New <span class="badge">12</span></li>
<li class="list-group-item">Deleted <span class="badge">5</span></li>
<li class="list-group-item">Warnings <span class="badge">3</span></li>
</ul>
Lista grup z połączonymi elementami
Elementy w grupie list mogą być również hiperłączami. Spowoduje to dodanie szarego koloru tła po najechaniu myszą:
Aby utworzyć grupę list z połączonymi elementami, użyj <div>zamiast <ul>
i <a>zamiast <li>:
Przykład
<div class="list-group">
<a href="#" class="list-group-item">First item</a>
<a href="#" class="list-group-item">Second item</a>
<a href="#" class="list-group-item">Third item</a>
</div>
Stan aktywny
Użyj .activeklasy, aby podświetlić bieżący element:
Przykład
<div class="list-group">
<a href="#" class="list-group-item active">First item</a>
<a href="#" class="list-group-item">Second item</a>
<a href="#" class="list-group-item">Third item</a>
</div>
Wyłączona pozycja
Następująca grupa list ma wyłączony element:
Aby wyłączyć element, dodaj .disabledklasę:
Przykład
<div class="list-group">
<a href="#" class="list-group-item disabled">First item</a>
<a href="#" class="list-group-item">Second item</a>
<a href="#" class="list-group-item">Third item</a>
</div>
Klasy kontekstowe
Klasy kontekstowe mogą być używane do kolorowania elementów listy:
- Pierwsza pozycja
- Druga pozycja
- Trzecia pozycja
- Czwarty element
Klasy do kolorowania elementów listy to:
.list-group-item-success, list-group-item-info,
list-group-item-warningi .list-group-item-danger:
Przykład
<ul class="list-group">
<li class="list-group-item list-group-item-success">First item</li>
<li class="list-group-item list-group-item-info">Second item</li>
<li class="list-group-item list-group-item-warning">Third item</li>
<li class="list-group-item list-group-item-danger">Fourth item</li>
</ul>
Treść niestandardowa
Możesz dodać prawie każdy kod HTML wewnątrz elementu grupy listy.
Bootstrap udostępnia klasy .list-group-item-heading,
.list-group-item-textktórych można używać w następujący sposób:
Przykład
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">First List Group Item Heading</h4>
<p class="list-group-item-text">List Group Item Text</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Second List Group Item Heading</h4>
<p class="list-group-item-text">List Group Item Text</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Third List Group Item Heading</h4>
<p class="list-group-item-text">List Group Item Text</p>
</a>
</div>