Bootstrap Navbar

Jak to funguje

Než začnete s navigační lištou, potřebujete vědět:

• NavBars vyžadují obalující třídu .navbar s .navbar-expand{-sm|-md|-lg|-xl} která určuje při jakém rozměru bude menu přepnuto do responzivního vzhledu.
• Navbars a jejich obsah jsou ve výchozím nastavení flexibilní. Pro omezení šířky se vždy používají obalující třídy určující šířku.
• Použijte třídy mezer a flex pro regulaci rozteče a zarovnání uvnitř NavBars.
• Navbars jsou při tisku ve výchozím nastavení skryté. Vynucení tisku se dosáhne přidáním .d-print do .navbar.
• Zajistěte přístupnost pomocí prvku nebo, pokud používáte obecnější prvek, jako je, přidejte role="navigation" na každý navbar s jeho ID jako identifikátor pro uživatele asistenčních technologií.

Podporovaný obsah

Navbars přicházejí s vestavěnou podporou pro několik dílčích součástí. Podle potřeby vyberte z následujících možností:

• .navbar-brand pro název vaší společnosti, produktu nebo projektu.
• .navbar-nav pro plnou výšku a lehkou navigaci (včetně podpory rozevírací nabídky).
• .navbar-toggler pro použití s ​​rozbalovacím pluginem a dalšími chováními při přepínání navigace.
• .form-inline pro všechny ovládací prvky a akce formulářů.
• .navbar-text pro přidání svisle vystředěných řetězců textu.
• .collapse.navbar-collapse pro seskupování a skrývání obsahu navbar podle nadřazeného bodu přerušení.

Zde je příklad všech dílčích součástí obsažených v navbar, která se automaticky nepřepíná v bodě přerušení, protože je nastaven .navbar-expand-sm. Pokud změníte na .navbar-expand-lg, bude se automaticky přepínat při změně rozměru obrazovky. Všimněte si rozdílu v -sm a -lg.

Značka (Logo)

.navbar-brand Lze aplikovat na většinu prvků, ale odkazová kotva funguje nejlépe, protože některé prvky mohou vyžadovat pomocné třídy nebo vlastní styly.

Přidání obrázků do .navbar-brand bude pravděpodobně vždy vyžadovat vlastní styly. Zde je několik příkladů.

Nav

Navigační odkazy navigačního panelu Navbar staví možnostech třídy .nav s jejich vlastní třídou modifikátorů a vyžadují použití přepínacích tříd pro správné reakce v responzivním zorbrazení. Navigace v navbars bude měnit rozměr tak, aby zabírala co nejvíce horizontálního prostoru, aby byl obsah navbar bezpečně zarovnán.

Aktivní stavy - pomocí .active — označuje, že aktuální stránka může být aplikována přímo na .nav-link s nebo na jejich bezprostřední nadřazené .nav-item.

V uvedeném příkladu byl použit seznam, ale lez to vyřešit i bez něj.

Můžete se využít rozbalovací nabídky v navigačním panelu navbar. Rozevírací nabídky vyžadují pro polohování obalovací prvek, takže se použije .nav-item a .nav-link jak je ukázáno níže.

Formuláře

Do navbar lze umístit různé ovládací prvky formuláře a další komponenty pomocí .form-inline.

Výchozí umístění je definováno justify-content: between. Pokud se má změnit umístění, musí se využít dalších flex prvků.

Fungují také skupiny formulářů:

Text

Navbars mohou obsahovat fragmenty textu pomocí .navbar-text. Tato třída upravuje svislé zarovnání a vodorovné mezery pro řetězce textu.

Podle potřeby lze vše spojit a provázat s dalšími komponentami a nástroji.

Barevná schémata

Barevná témata navbar nikdy je velmi snadné používat, díky výchozím nastavením v background-color utilit. Vyberte si .navbar-light pro použití se světlými barvami pozadí nebo .navbar-dark pro tmavé barvy pozadí. Poté přizpůsobte pomocí .bg-* nástrojů.

Responzivní chování

Navbars mohou používat .navbar-toggler, .navbar-collapsea .navbar-expand{-sm|-md|-lg|-xl} třídy ke změně, které se dosáhne při změně rozměru zobrazení do responsivního módu. V kombinaci s jinými nástroji si můžete snadno vybrat, kdy se mají konkrétní prvky zobrazit nebo skrýt.

U navbarů, které se nikdy nebudou měnit, přidejte .navbar-expand třídu na navbar. U navbarů, které se vždy změní, nepřidávejte žádnou .navbar-expand třídu.

Toggler (přepínač)

Přepínače navbar jsou ve výchozím nastavení zarovnány doleva, ale pokud bude následovat sourozenecký prvek jako .navbar-brand, budou automaticky zarovnány zcela vpravo. Obrácením vašeho označení se změní umístění přepínače. Níže jsou uvedeny příklady různých přepínacích stylů.

Bez .navbar-brand nejnižšího bodu změny:

Se značkou zobrazenou vlevo a přepínačem vpravo:

S přepínačem vlevo a značkou vpravo:

Externí obsah

Někdy chceme použít sbalitelný plugin k zobrazení skrytého obsahu kdekoli na stránce. Plugin funguje s id a data-target.