Grundliste Gruppen
Die grundlegendste Listengruppe ist eine ungeordnete Liste mit Listenelementen:
- Erster Punkt
- Zweiter Punkt
- Drittes Element
Um eine Grundliste Gruppe zu erstellen, verwenden Sie ein <ul> Element mit Klasse .list-group und <li> Elemente mit Klasse .list-group-item :
Beispiel
<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> Versuch es selber " Listengruppe mit Abzeichen
Sie können auch Abzeichen auf eine Liste Gruppe hinzufügen. Die Abzeichen werden automatisch auf der rechten Seite positioniert werden:
- 12 Neue
- 5 Deleted
- 3 Warnungen
Um ein Abzeichen zu erstellen, erstellen Sie eine <span> Element mit Klasse .badge innerhalb der Listenposition:
Beispiel
<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> Versuch es selber " Listengruppe mit verknüpften Artikel
Die Elemente in einer Liste Gruppe kann auch Hyperlinks sein. Dies wird eine graue Hintergrundfarbe auf schweben hinzu:
Um eine Liste Gruppe mit verknüpften Elementen erstellen, verwenden <div> anstelle von <ul> und <a> anstelle von <li> :
Beispiel
<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> Versuch es selber " Active State
Verwenden Sie die .active Klasse den aktuellen Punkt zu markieren:
Beispiel
<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> Versuch es selber " Deaktiviert Option
Die folgende Liste Gruppe hat ein behindertes Artikel:
Um einen Artikel zu deaktivieren, fügen Sie die .disabled Klasse:
Beispiel
<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> Versuch es selber " Kontext-bezogene Klassen
Kontext-bezogene Klassen können zu Farblistenelemente verwendet werden:
- Erster Punkt
- Zweiter Punkt
- Drittes Element
- Vierter Punkt
Die Klassen für die Färbung list-Elemente sind: .list-group-item-success , list-group-item-info , list-group-item-warning und .list-group-item-danger :
Beispiel
<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> Versuch es selber " Custom Content
Sie können in einer Liste Gruppenelement fast jede HTML hinzuzufügen.
Bootstrap bietet die Klassen .list-group-item-heading und .list-group-item-text , die verwendet werden können , wie folgt:
Beispiel
<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> Versuch es selber " Testen Sie sich mit Übungen!
Übung 1 » Übung 2» Übung 3 » Übung 4» Übung 5 »