Jak vytvořit navbar uprostřed bootstrap

Bootstrap - je to jeden z nejoblíbenějších rámců pro vývoj webových stránek. Poskytuje mnoho hotových komponent, včetně navbar která je důležitou součástí každé webové stránky. Ale někdy je potřeba umístit navbar do středu stránky a Bootstrap to ve výchozím nastavení neposkytuje. V tomto článku se podíváme na několik metod, které vám pomohou tento problém vyřešit.

První metodou, kterou zvážíme, je použití třídy justify-content-center od Bootstrap. Tato třída umožňuje zarovnání prvků vodorovně ve středu. Chcete-li použít tuto třídu na navbar, musíte ji přidat do nadřazené položky navbar, například do div s třídou "container" nebo "container-fluid". To nám umožní zarovnat navbar do středu stránky.

Druhou metodou, kterou prozkoumáme, je použití vlastních stylů CSS. Můžete vytvořit novou třídu a použít na ni vlastnosti CSS, které vám pomohou zarovnat navbar do středu. Můžete například použít vlastnost display: flex; vytvořit flexibilní Kontejnerový model a vlastnost justify-content: center; Chcete-li zarovnat prvky vodorovně ve středu. Poté jednoduše přidejte tuto třídu k nadřazené položce navbar.

Co je Bootstrap?

Bootstrap je založen na HTML, CSS a JavaScriptu a poskytuje hotové komponenty, jako jsou tlačítka, formuláře, navigační panely, modální okna a další, které lze snadno vložit na Vaši webovou stránku. Bootstrap má navíc flexibilní síťový systém, který pomáhá vytvářet citlivá rozvržení a přizpůsobovat webové stránky různým zařízením a rozlišení obrazovky.

Bootstrap také poskytuje hotové styly a motivy, které usnadňují přizpůsobení vzhledu vašeho webu. Můžete si vybrat z různých možností barevných schémat, písem a uspořádání, což vám umožní vytvořit jedinečný design pro váš projekt.

S Bootstrap můžete zkrátit dobu vývoje a zlepšit výkon, protože nemusíte psát mnoho kódů od nuly. Framework je také aktualizován a podporován vývojáři, což zaručuje aktualizace a opravy chyb.

Bootstrap je výkonný nástroj, který vám pomůže rychle a snadno vytvořit krásné a citlivé webové stránky.

Kroky k vytvoření navbar uprostřed

1. Zpočátku k vytvoření navbaru uprostřed budete potřebovat následující značení div :

2. V tomto příkladu používáme třídu container k vytvoření kontejneru, který centruje obsah na stránce.

3. Kromě toho přidáváme třídy navbar navbar-expand-lg navbar-light bg-light k prvku nav, abychom vytvořili NavBar. Při zmenšování velikosti obrazovky také přidáváme tlačítko přepínání nabídek.

4. K vycentrování prvků uvnitř navbaru používáme třídu justify-content-center pro prvek div s identifikátorem navbarNav .

5. Dokončete vytváření zbývajících prvků navbaru podle vašich potřeb přidáním odkazů a tříd pro aktivní prvky.

6. Poté můžete použít styly CSS k přizpůsobení vzhledu navbaru, pokud je to nutné.

7. Nyní bude váš NavBar umístěn uprostřed stránky.

Krok 1: Připojení bootstrap

Chcete-li vytvořit NavBar uprostřed pomocí bootstrap, musíte ke svému projektu připojit příslušné soubory.

Stáhněte si nejnovější verzi bootstrap z oficiálních stránek a rozbalte ji.

Ve složce projektu vytvořte nový adresář s názvem " bootstrap "a do něj přidejte složku" css "a"js".

Zkopírujte soubory " bootstrap.min.CSS "ze složky" css " a " bootstrap.min.js "ze složky" js "do příslušných složek ve vašem adresáři"bootstrap".

Dále otevřete soubor HTML a přidejte následující řádky kódu do sekce "hlava":

Nyní jste úspěšně připojili bootstrap ke svému projektu a můžete začít vytvářet navbar uprostřed.

Krok 2: Vytvoření kontejneru

Chcete-li vytvořit navbar uprostřed pomocí Bootstrap, musíte vytvořit kontejner, který bude obsahovat celý navbar. To lze provést pomocí třídy "container " nebo" container-fluid " uvnitř značky

Třída " container "omezuje šířku kontejneru na určitou hodnotu, zatímco třída" container-fluid " činí kontejner celou obrazovkou, bez omezení šířky.

Příklad vytvoření kontejneru:

Upozorňujeme, že kontejner musí být uvnitř

značka, před zahájením výroby navbar.

Jakmile vytvoříte kontejner, můžete do něj přidat svůj navbar a vytvořit navbar uprostřed na vašem webu.

Krok 3: Vytvoření navigačního panelu

K vytvoření navigačního panelu použijeme komponentu "navbar" v Bootstrap.

Nejprve vytvoříme obal pro náš navigační panel nastavením třídy "navbar" prvku :

Nyní je náš navigační panel připraven. Vytvořili jsme obal a kontejner pro prvky navigačního panelu a také jsme přidali odkazy na každou položku.

Krok 4: Přidání vycentrování

Chcete-li vycentrovat NavBar ' a vodorovně v Bootstrap, budete muset použít některé další styly. V základní struktuře NavBar 'a je třída " navbar-collapse", která umožňuje skrýt nebo zobrazit odkazy v navigačním panelu v závislosti na velikosti obrazovky. Chcete-li vycentrovat NavBar ' a, můžete k této položce Přidat třídu "justify-content-center".

Níže je uveden příklad kódu, který umožňuje vytvořit navbar uprostřed:

V tomto příkladu je NavBar 'A, Třída" justify-content-center "přidána do položky s třídou" collapse navbar-collapse " pro umístění odkazů v navigačním panelu uprostřed.

Po provedení těchto změn v kódu bude navbar uprostřed stránky.

Krok 5: Přidání stylů

Nyní je třeba přidat styly, aby byl náš navbar uprostřed stránky.

Nejprve vytvoříme novou třídu stylů navbar-center. Tuto třídu pak použijeme na prvek navbar. Kód bude vypadat následovně:

V prvním bloku stylů používáme Flex kontejner a nastavujeme vlastnost justify-content: center aby byly prvky umístěny ve středu vodorovně.

Ve druhém bloku stylů používáme vlastnost align-items: center aby byly prvky umístěny ve středu svisle.

Po přidání těchto stylů se navbar zobrazí uprostřed stránky. Můžete spustit kód a zkontrolovat jeho fungování.

Příklad kódu pro NavBar uprostřed

Chcete-li vytvořit navbar uprostřed v Bootstrap, můžete použít následující kód:

V tomto příkladu se třídy "justify-content-center" aplikují na hlavní kontejner navbar a jeho vnitřní prvky, aby je zarovnaly vodorovně uprostřed. Tím se vytvoří efekt navbar uprostřed.

HTML kód

Níže je uveden příklad HTML kódu pro vytvoření NavBar uprostřed pomocí Bootstrap:

Tento kód vytvoří navigační panel s vycentrovaným textem a rozbalovací nabídkou při prohlížení na mobilních zařízeních.

Tento kód můžete použít ve svém projektu a nakonfigurovat navigační panel, jak chcete.