Adaptivní nabídka je nedílnou součástí moderních webových stránek a umožňuje uživatelům snadno navigovat web i na zařízeních s malými obrazovkami, jako jsou mobilní telefony a tablety. Jedním z oblíbených nástrojů pro vytváření adaptivních nabídek je Bootstrap.
Bootstrap poskytuje hotové komponenty a třídy, které umožňují použití adaptivního chování na webu. Ve výchozím nastavení však Bootstrap používá ve svých třídách tečky a dvojtečky k definování různých bodů rozlišení obrazovky a aplikaci příslušných stylů.
V tomto článku se podíváme na přístup, který umožňuje vytvořit adaptivní nabídku Bootstrap bez použití teček a dvojtečky. To může být užitečné, pokud chcete použít své vlastní body rozlišení nebo změnit chování adaptivní nabídky.
Začněme a Naučme se tento přístup krok za krokem!
Adaptivní nabídka Bootstrap bez teček a dvojtečky
Pro začátek připojte styly CSS Bootstrap k vašemu projektu. To lze provést přidáním odkazu na soubor stylů Bootstrap do sekce head vašeho dokumentu HTML. Například:
Poté vytvořte hlavní obal pro vaši nabídku:
V tomto příkladu jsme vytvořili navigační panel Bootstrap pomocí třídy "navbar". Uvnitř jsou prvky "container-fluid", "navbar-header"a" collapse navbar-collapse". Všimněte si tlačítka třídy "navbar-toggle", které se používá k minimalizaci nabídek na mobilních zařízeních.
Dále přidejte odkazy na sekce vašeho webu do položek seznamu "nav nav navbar-nav". Každý odkaz musí být zabalen do značky "li". Například:
Po dokončení značení nabídky uložte změny a spusťte webový prohlížeč. Měli byste vidět adaptivní nabídku Bootstrap bez použití teček a dvojtečky. Zkuste změnit velikost okna prohlížeče nebo otevřít stránku na mobilním zařízení, abyste viděli, jak se nabídka automaticky přizpůsobuje různým zařízením.
Nyní víte, jak vytvořit adaptivní nabídku Bootstrap bez použití teček a dvojtečky. Nezapomeňte, že vzhled a chování nabídky můžete přizpůsobit pomocí dalších tříd a možností Bootstrap.
Instalace Bootstrap
Chcete-li vytvořit adaptivní nabídku pomocí Bootstrap, musíte nainstalovat knihovnu Bootstrap. To lze provést následujícími kroky:
- Přejděte na oficiální web Bootstrap (https://getbootstrap.com) a stáhněte si nejnovější verzi knihovny.
- Rozbalte stažený archiv do adresáře vhodného pro vás v počítači.
- Do dokumentu HTML přidejte odkaz na soubor stylů Bootstrap pomocí značky .
- Pokud chcete používat funkce JavaScript Bootstrap, přidejte odkaz na soubory skriptů Bootstrap pomocí značky .
Po úspěšné instalaci Bootstrap můžete použít jeho třídy a komponenty k vytvoření adaptivní nabídky.
Vytvoření hlavní struktury nabídky
Než začnete vytvářet adaptivní nabídku bez použití teček a dvojtečky, musíte vytvořit základní strukturu nabídky. K tomu použijeme HTML tagy a CSS styly k vytvoření tabulky s více řádky a sloupci, které budou reprezentovat naši nabídku.
Uveďme příklad kódu:
Главная О нас Услуги Продукты Контакты Карта сайта
V tomto příkladu jsme vytvořili tabulku se dvěma řádky a třemi sloupci. Každá položka nabídky je reprezentována odkazem na příslušnou stránku. Nahraďte symbol " # " v atributu href odkazem, který chcete použít.
Vytvořili jsme tedy základní strukturu nabídky pomocí tabulky. V další části se podíváme na to, jak přidat styly a učinit toto menu přizpůsobivým.
Přidání přizpůsobivosti pro různé velikosti obrazovky
Bootstrap nabízí několik tříd pro práci s adaptabilitou:
- .d-none - skrýt položku na všech velikostech obrazovky
- .d-sm-none - skrýt položku pouze na obrazovkách "sm" (od 576px)
- .d-md-none - skrýt položku pouze na obrazovkách "md" (od 768px)
- .d-lg-none - skrýt položku pouze na obrazovkách "lg" (od 992px)
- .d-xl-none - skrýt položku pouze na obrazovkách "xl" (od 1200px)
Tímto způsobem lze snadno skrýt a zobrazit položky v závislosti na velikosti obrazovky. K vytvoření adaptivní nabídky lze například použít třídy .d-none a .d-lg-block:
To vám umožní skrýt položky nabídky na malých obrazovkách, ale zobrazit je na velkých.
Tedy pomocí tříd .d-none a .d-lg-block, lze vytvořit adaptivní nabídku, která se přizpůsobí velikosti obrazovky a zůstane funkční pro uživatele na všech zařízeních.
Nastavení vzhledu nabídky
Při vytváření adaptivního menu Bootstrap bez použití teček a dvojtečky je možné upravit jeho vzhled pomocí různých CSS tříd.
Pro změnu barvy pozadí nabídky použijte třídu. bg-primary, kde je primary výchozí barvou. Z poskytnuté sady barev Bootstrap si můžete vybrat jinou barvu.
Chcete-li změnit barvu textu v nabídce, přidejte třídu .text-light . Pomocí poskytnutých tříd Bootstrap si můžete vybrat jinou barvu textu.
Chcete-li přidat odsazení mezi položky nabídky, můžete použít třídu .mr-2 k přidání pravého odsazení, nebo .ml-2 k přidání levého odsazení. Velikost odsazení můžete také upravit pomocí dostupných tříd Bootstrap.
Pro změnu písma v nabídce můžete použít třídu .font-weight-bold pro aby byl text tučný.
Pokud chcete změnit velikost písma, použijte třídy .text-sm , .text-md , .text-lg nebo .text-xl pro nastavení odpovídající velikosti písma.
Přidání funkce do nabídky
Jakmile vytvoříte adaptivní nabídku pomocí Bootstrap, můžete přidat další funkce, aby byla nabídka uživatelsky přívětivější.
Jednou z užitečných funkcí je přidání aktivního stavu do vybrané položky nabídky. Pokud je uživatel například na aktuální stránce, měla by být jako aktivní zvýrazněna položka nabídky odpovídající této stránce. K tomu lze použít třídu active a zkontrolujte aktuální adresu URL pomocí JavaScriptu.
Další užitečnou funkcí je přidání rozevíracího seznamu do položek nabídky s podnabídkou. To vám umožní vytvořit hierarchii v nabídce a zobrazit další oddíly nebo kategorie. K tomu lze použít třídu dropdown a speciální označení pro podnabídku.
Můžete také přidat animace nebo přechody při otevírání a zavírání rozbalovacích položek. Můžete například použít třídu fade a nakonfigurovat přechodový efekt pomocí CSS.
Další funkce lze přidat také pomocí pluginů a skriptů Bootstrap. Můžete například použít karuselové pluginy nebo Modální okno k vytvoření interaktivních položek v nabídce.
Někdy je užitečné přidat do nabídky vyhledávání nebo filtrování, aby uživatelé mohli rychle najít požadované stránky nebo oddíly. K tomu lze použít formulář v nabídce a zpracování dat pomocí JavaScriptu nebo serverového programovacího jazyka.
Přidání funkce do nabídky samozřejmě závisí na potřebách a požadavcích konkrétního webu nebo projektu. Je důležité vzít v úvahu uživatelskou zkušenost a učinit nabídku pohodlnou a intuitivní.