Bootstrap lys groepe
Basiese lys groepe
Die mees basiese lysgroep is 'n ongeordende lys met lysitems:
- Eerste item
- Tweede item
- Derde item
Om 'n basiese lysgroep te skep, gebruik 'n <ul>
element met klas .list-group
en
<li>
elemente met klas .list-group-item
:
Voorbeeld
<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>
Lys Groep met Kentekens
Jy kan ook kentekens by 'n lysgroep voeg. Die kentekens sal outomaties aan die regterkant geplaas word:
- 12Nuut
- 5Geskrap
- 3Waarskuwings
Om 'n kenteken te skep, skep 'n <span>
element met klas .badge
binne die lysitem:
Voorbeeld
<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>
Lys groep met gekoppelde items
Die items in 'n lysgroep kan ook hiperskakels wees. Dit sal 'n grys agtergrondkleur by sweef voeg:
Om 'n lysgroep met gekoppelde items te skep, gebruik <div>
in plaas van <ul>
en <a>
in plaas van <li>
:
Voorbeeld
<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>
Aktiewe staat
Gebruik die .active
klas om die huidige item uit te lig:
Voorbeeld
<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>
Gedeaktiveerde item
Die volgende lysgroep het 'n gedeaktiveerde item:
Om 'n item te deaktiveer, voeg die .disabled
klas by:
Voorbeeld
<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>
Kontekstuele Klasse
Kontekstuele klasse kan gebruik word om lysitems in te kleur:
- Eerste item
- Tweede item
- Derde item
- Vierde item
Die klasse vir die inkleur van lysitems is:
.list-group-item-success
, list-group-item-info
,
list-group-item-warning
, en .list-group-item-danger
:
Voorbeeld
<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>
Pasgemaakte inhoud
Jy kan byna enige HTML binne 'n lys groep item byvoeg.
Bootstrap verskaf die klasse .list-group-item-heading
en
.list-group-item-text
wat soos volg gebruik kan word:
Voorbeeld
<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>