Bootstrap 4 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-groupen
<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>
Aktiewe staat
- Aktiewe item
- Tweede item
- Derde item
Gebruik die .activeklas om die huidige item uit te lig:
Voorbeeld
<ul class="list-group">
<li class="list-group-item
active">Active item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
</ul>
Lys groep met gekoppelde items
Om 'n lysgroep met gekoppelde items te skep, gebruik <div>in plaas van <ul>
en <a>in plaas van <li>. Opsioneel, voeg die .list-group-item-actionklas by as jy 'n grys agtergrondkleur wil hê as jy beweeg:
Voorbeeld
<div class="list-group">
<a href="#"
class="list-group-item list-group-item-action">First item</a>
<a
href="#" class="list-group-item list-group-item-action">Second item</a>
<a href="#" class="list-group-item list-group-item-action">Third item</a>
</div>
Gedeaktiveerde item
Die .disabledklas voeg 'n ligter tekskleur by die gestremde item. En wanneer dit op skakels gebruik word, sal dit die sweef-effek verwyder:
Voorbeeld
<div class="list-group">
<a href="#" class="list-group-item disabled">Disabled item</a>
<a href="#"
class="list-group-item disabled">Disabled item</a>
<a href="#" class="list-group-item">Third item</a>
</div>
Spoel / verwyder grense
Gebruik die .list-group-flushklas om 'n paar rande en afgeronde hoeke te verwyder:
- Eerste item
- Tweede item
- Derde item
- Vierde item
Voorbeeld
<ul class="list-group
list-group-flush">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
<li class="list-group-item">Fourth item</li>
</ul>
Horisontale lys groepe
As jy wil hê dat die lysitems horisontaal in plaas van vertikaal moet vertoon (langs mekaar in plaas van bo-op mekaar), voeg die .list-group-horizontalklas by .list-group:
- Eerste item
- Tweede item
- Derde item
- Vierde item
Voorbeeld
<ul class="list-group
list-group-horizontal">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
<li class="list-group-item">Fourth item</li>
</ul>
Kontekstuele Klasse
Kontekstuele klasse kan gebruik word om lysitems in te kleur:
- Sukses item
- Sekondêre item
- Inligting item
- Waarskuwing item
- Gevaar item
- Primêre item
- Donker item
- Ligte item
Die klasse vir die inkleur van lysitems is:
.list-group-item-success, list-group-item-secondary, list-group-item-info,
list-group-item-warning, .list-group-item-danger, .list-group-item-primary, list-group-item-darken list-group-item-light,:
Voorbeeld
<ul class="list-group">
<li class="list-group-item
list-group-item-success">Success item</li>
<li
class="list-group-item list-group-item-secondary">Secondary item</li>
<li class="list-group-item list-group-item-info">Info item</li>
<li
class="list-group-item list-group-item-warning">Warning item</li>
<li class="list-group-item list-group-item-danger">Danger item</li>
<li class="list-group-item list-group-item-primary">Primary item</li>
<li class="list-group-item list-group-item-dark">Dark item</li>
<li
class="list-group-item list-group-item-light">Light item</li>
</ul>
Koppel items met kontekstuele klasse
Voorbeeld
<div class="list-group">
<a href="#" class="list-group-item
list-group-item-action">Action item</a>
<a href="#"
class="list-group-item list-group-item-action list-group-item-success">Success item</a>
<a
href="#" class="list-group-item list-group-item-action list-group-item-secondary">Secondary item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-info">Info item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-warning">Warning item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-danger">Danger item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-primary">Primary item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-dark">Dark item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-light">Light item</a>
</div>
Lys groep met kentekens
Kombineer .badgeklasse met nuts-/helperklasse om kentekens binne die lysgroep by te voeg:
- Inkassie 12
- Advertensies 50
- Rommel 99
Voorbeeld
<ul class="list-group">
<li class="list-group-item d-flex
justify-content-between align-items-center">
Inbox
<span class="badge badge-primary badge-pill">12</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Ads
<span class="badge badge-primary
badge-pill">50</span>
</li>
<li class="list-group-item
d-flex justify-content-between align-items-center">
Junk
<span class="badge badge-primary badge-pill">99</span>
</li>
</ul>
Wenk: Lees meer oor Bootstrap 4 Utility/Helper-klasse in ons BS4 Utilities-hoofstuk .