Grupuri de bază Listă
Cel mai grup listă de bază este o lista neordonata cu elemente de listă:
- Primul articol
- Al doilea articol
- Al treilea element
Pentru a crea un grup listă de bază, utilizați un <ul> Element cu clasa .list-group , și <li> elemente cu clasa .list-group-item :
Exemplu
<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> Încearcă - l singur » Lista de grup cu insigne
Puteți adăuga, de asemenea, insigne la un grup listă. Insignele vor fi poziționate în mod automat pe dreapta:
- 12 noi
- 5 șters
- 3 avertismente
Pentru a crea o insignă, a crea un <span> element de clasă cu .badge în interiorul elementului din listă:
Exemplu
<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> Încearcă - l singur » Lista de grup cu puncte legate
Elementele dintr-un grup listă poate fi, de asemenea hyperlink-uri. Aceasta va adăuga o culoare de fundal gri pe Hover:
Pentru a crea un grup listă cu elemente legate, utilizarea <div> în loc de <ul> și <a> în loc de <li> :
Exemplu
<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> Încearcă - l singur » stat activ
Utilizați .active clasa pentru a evidenția elementul curent:
Exemplu
<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> Încearcă - l singur » Postul pentru persoane cu handicap
Următoarea listă Grupul are un element dezactivat:
Pentru a dezactiva un element, adăugați .disabled clasă:
Exemplu
<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> Încearcă - l singur » clasele Contextual
clase contextuale pot fi utilizate pentru elementele de listă de culoare:
- Primul articol
- Al doilea articol
- Al treilea element
- Al patrulea element
Clasele de colorare listă articole sunt: .list-group-item-success , list-group-item-info de list-group-item-warning .list-group-item-danger list-group-item-info , list-group-item-warning de list-group-item-warning , și .list-group-item-danger :
Exemplu
<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> Încearcă - l singur » Conținut personalizat
Puteți adăuga aproape orice HTML în interiorul unui element de grup listă.
Bootstrap prevede clasele .list-group-item-heading și .list-group-item-text , care pot fi utilizate după cum urmează:
Exemplu
<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> Încearcă - l singur » Testați-te cu exerciții!
Exercițiul 1 » Exercițiul 2» Exercițiul 3 » Exercițiul 4» Exercițiul 5 »