Podstawowe Lista użytkowników Grupy
Najbardziej podstawowa grupa lista jest nieuporządkowana lista z elementów listy:
- Pierwszy element
- Drugi element
- Trzeci punkt
Aby utworzyć grupę zasadową listy, użyj <ul> element z klasy .list-group i <li> elementy z klasy .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> Spróbuj sam " Grupa Lista z odznaki
Można również dodać plakietki do grupy na liście. Odznaczenia zostaną automatycznie umieszczone po prawej stronie:
- 12 Nowy
- 5 usuniętych
- 3 Ostrzeżenia
Aby utworzyć odznaki utwórz <span> element z klasy .badge wewnątrz elementu listy:
Przykład
<ul class="list-group">
<li
class="list-group-item"><span class="badge">12</span> New</li>
<li
class="list-group-item"><span class="badge">5</span> Deleted</li>
<li class="list-group-item"><span class="badge">3</span> Warnings</li>
</ul> Spróbuj sam " Lista grup z połączonymi Items
Elementy wchodzące w skład grupy lista może być również hiperłączy. To doda szary kolor tła przy aktywowaniu:
Aby utworzyć grupę z listy połączonych elementów, 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> Spróbuj sam " stan aktywny
Użyj .active klasę na podświetlenie aktualnej pozycji:
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> Spróbuj sam " Przedmiot niepełnosprawnych
Poniższa lista grupa ma wyłączoną przedmiot:
Aby wyłączyć element, dodać .disabled klasę:
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> Spróbuj sam " Klasy kontekstowe
Klasy kontekstowe mogą być stosowane do elementów listy kolor:
- Pierwszy element
- Drugi element
- Trzeci punkt
- czwarta pozycja
Zajęcia dla barwiących list-pozycji są: .list-group-item-success , list-group-item-info , list-group-item-warning i .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> Spróbuj sam " Materiały modyfikowane
Możesz dodać niemal każdego elementu HTML wewnątrz grupy list.
Bootstrap zapewnia klas .list-group-item-heading i .list-group-item-text , które mogą być wykorzystane 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> Spróbuj sam " Sprawdź się z ćwiczeń!
Ćwiczenie 1 » Ćwiczenie 2» Ćwiczenie 3 » Ćwiczenia 4» Zadanie 5 »