Bootstrap List Groups
Základní seznamové skupiny
Nejzákladnější skupinou seznamů je neuspořádaný seznam s položkami seznamu:
- První položka
- Druhá položka
- Třetí položka
Chcete-li vytvořit základní skupinu seznamů, použijte <ul>
prvek s class .list-group
a
<li>
prvky s class .list-group-item
:
Příklad
<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>
Seznam Skupina S Odznaky
Do skupiny seznamu můžete také přidat odznaky. Odznaky budou automaticky umístěny vpravo:
- 12 Nový
- 5 Smazáno
- 3 Varování
Chcete-li vytvořit odznak, vytvořte <span>
prvek s třídou .badge
uvnitř položky seznamu:
Příklad
<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>
Seznam skupin s propojenými položkami
Položky ve skupině seznamů mohou být také hypertextové odkazy. Tím se při umístění kurzoru přidá šedá barva pozadí:
Chcete-li vytvořit skupinu seznamů s propojenými položkami, použijte <div>
místo <ul>
a <a>
místo <li>
:
Příklad
<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>
Aktivní stav
Pomocí .active
třídy zvýrazněte aktuální položku:
Příklad
<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>
Deaktivovaná položka
Následující skupina seznamů má zakázanou položku:
Chcete-li zakázat položku, přidejte .disabled
třídu:
Příklad
<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>
Kontextové třídy
Kontextové třídy lze použít k vybarvení položek seznamu:
- První položka
- Druhá položka
- Třetí položka
- Čtvrtá položka
Třídy pro položky seznamu barev jsou:
.list-group-item-success
, list-group-item-info
,
list-group-item-warning
a .list-group-item-danger
:
Příklad
<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>
Vlastní obsah
Do položky skupiny seznamu můžete přidat téměř jakýkoli kód HTML.
Bootstrap poskytuje třídy .list-group-item-heading
,
.list-group-item-text
které lze použít následovně:
Příklad
<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>