Bootstrap 4 Seznam skupin

Základní seznamové skupiny

Nejzákladnější skupinou seznamů je neuspořádaný seznam s položkami seznamu:

• První položka
• Druhá položka
• Třetí položka

Chcete-li vytvořit základní skupinu seznamů, použijte <ul>prvek s class .list-groupa <li>prvky s class .list-group-item:

Aktivní stav

• Aktivní položka
• Druhá položka
• Třetí položka

Pomocí .activetřídy zvýrazněte aktuální položku:

Seznam skupin s propojenými položkami

Chcete-li vytvořit skupinu seznamů s propojenými položkami, použijte <div>místo <ul> a <a>místo <li>. Volitelně přidejte .list-group-item-actiontřídu, pokud chcete, aby byla při umístění kurzoru šedá barva pozadí:

Deaktivovaná položka

Třída .disabledpřidá do zakázané položky světlejší barvu textu. A když se použije na odkazy, odstraní efekt přechodu:

Spláchnout / odstranit okraje

Použijte .list-group-flushtřídu k odstranění některých okrajů a zaoblených rohů:

Horizontální seznam skupin

Pokud chcete, aby se položky seznamu zobrazovaly vodorovně namísto svisle (vedle sebe namísto nad sebou), přidejte .list-group-horizontaltřídu do .list-group:

Kontextové třídy

Kontextové třídy lze použít k vybarvení položek seznamu:

• Úspěšná položka
• Sekundární položka
• Info položka
• Výstražná položka
• Nebezpečný předmět
• Primární položka
• Tmavá položka
• Lehká položka

Třídy pro vybarvování položek seznamu jsou: .list-group-item-success, list-group-item-secondary, list-group-item-info, list-group-item-warning, .list-group-item-danger, .list-group-item-primarya list-group-item-dark, list-group-item-light:

Propojte položky s kontextovými třídami

Seznam skupin s odznaky

Kombinujte .badgetřídy s pomocnými/pomocnými třídami a přidejte odznaky do skupiny seznamu: