Bootstrap 4 Listy grup

Podstawowe grupy list

Najbardziej podstawową grupą list jest lista nieuporządkowana z elementami listy:

• Pierwsza pozycja
• Druga pozycja
• Trzecia pozycja

Aby utworzyć podstawową grupę list, użyj <ul>elementu z class .list-groupi <li>elementów z class .list-group-item:

Stan aktywny

• Aktywny przedmiot
• Druga pozycja
• Trzecia pozycja

Użyj .activeklasy, aby podświetlić bieżący element:

Lista grup z połączonymi elementami

Aby utworzyć grupę list z połączonymi elementami, użyj <div>zamiast <ul> i <a>zamiast <li>. Opcjonalnie dodaj .list-group-item-actionklasę, jeśli chcesz mieć szary kolor tła po najechaniu myszą:

Wyłączona pozycja

Klasa .disableddodaje jaśniejszy kolor tekstu do wyłączonego elementu. A gdy zostanie użyty na linkach, usunie efekt najechania:

Wyrównaj/usuń obramowania

Użyj .list-group-flushklasy, aby usunąć niektóre obramowania i zaokrąglone rogi:

Poziome grupy list

Jeśli chcesz, aby elementy listy były wyświetlane w poziomie zamiast w pionie (obok siebie, a nie jeden nad drugim), dodaj .list-group-horizontalklasę do .list-group:

Klasy kontekstowe

Klasy kontekstowe mogą być używane do kolorowania elementów listy:

• Pozycja sukcesu
• Druga pozycja
• Element informacyjny
• Element ostrzegawczy
• Niebezpieczny przedmiot
• Podstawowy przedmiot
• Ciemny przedmiot
• Lekki przedmiot

Klasy kolorowania elementów listy to: .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-darki list-group-item-light,:

Połącz elementy z klasami kontekstowymi

Lista grupy z odznakami

Połącz .badgeklasy z klasami użytkowymi/pomocniczymi, aby dodać odznaki wewnątrz grupy listy: