Bootstrap- lijstgroepen

Basislijstgroepen

De meest elementaire lijstgroep is een ongeordende lijst met lijstitems:

• Eerste item
• Tweede item
• Derde item:

Gebruik een <ul>element met class .list-groupen <li>elementen met class om een ​​basislijstgroep te maken .list-group-item:

Lijst groep met badges

U kunt ook badges toevoegen aan een lijstgroep. De badges komen automatisch aan de rechterkant te staan:

• 12Nieuw
• 5verwijderd
• 3Waarschuwingen

Om een ​​badge te maken, maakt u een <span>element met klasse .badge in het lijstitem:

Lijstgroep met gekoppelde items

De items in een lijstgroep kunnen ook hyperlinks zijn. Dit voegt een grijze achtergrondkleur toe bij het aanwijzen:

Als u een lijstgroep met gekoppelde items wilt maken, gebruikt u <div>in plaats van <ul> en <a>in plaats van <li>:

Actieve staat

Gebruik de .activeklasse om het huidige item te markeren:

Uitgeschakeld item

De volgende lijstgroep heeft een uitgeschakeld item:

Voeg de .disabledklasse toe om een ​​item uit te schakelen:

Contextuele lessen

Contextuele klassen kunnen worden gebruikt om lijstitems te kleuren:

• Eerste item
• Tweede item
• Derde item:
• vierde item

De klassen voor het kleuren van lijstitems zijn: .list-group-item-success, list-group-item-info, list-group-item-warning, en .list-group-item-danger:

Aangepaste inhoud

U kunt bijna elke HTML binnen een lijstgroepitem toevoegen.

Bootstrap biedt de klassen .list-group-item-headingen .list-group-item-textdie als volgt kunnen worden gebruikt: