Hvordan lage/designe en navbar i bootstrap 5

I Bootstrap 5 brukes Nav Bar til å koble til og koble alle websidene relatert til et nettsted, og en bruker kan flytte mellom sider enkelt. Navigasjonslinje er en veldig viktig komponent i et nettsted som inneholder en merkevarelogo, sidenavn og deres lenker og en søkeboks i henhold til brukerkrav.

Denne artikkelen gir deg en detaljkunnskap om

Opprette en Navbar
Navbar med rullegardinmeny
Navbar med inline form
Sammenleggbar Navbar
Endre navbarfarger

Hvordan lage en navbar

For å lage en Navbar -bruk, .Navbar klasse og for å justere menyen på rad bruk .Navbar-EXPAND-XXL/LG/MD/SM. For å velge mellom lys eller mørk stemningsbruk .Navbar-lys/mørk og å gi en bakgrunnsfarge til en navbarbruk .BG-lys.

Kode:

Bootstrap 5 Navbar

Slik lager du en Navbar i Bootstrap 5.

Navbar med rullegardinmeny

For å lage en Navbar med rullegardinmeny Bruk .rullegardinlasse med .Nav-artikklasse i

stikkord, ta en Tag med .rullegardinmeny-klasse, og pakk den rundt ankerkoden med klassen .rullegardin-element. For å vise rullegardinmenyen bruk .Dropdown-toggle-klasse med .Nav-link-klasse og også Bruk data-BS-toggle = ”rullegardinsattributt på stikkord som inneholder .Nav-link-klasse.

Kode

Slik opprettes en Navbar med en rullegardinmeny.

Navbar med inline form

For å lage en Navbar med inline -form, bruk Tag med klassen .inline-form og pakk den rundt en Tag med klassen .formkontroll og legg til en knapp ved hjelp av en Tag med klassen .BTN, BTN-Success, Rett etter lukkende tag.

Slik lager du en Navbar med inline -skjema.

Sammenleggbar Navbar

For å lage en sammenleggbar navbar, bruk en med .kollapse og .Navbar-Collaps klasser. Gi en unik id = ”” til diven og pakk deretter diven rundt deg

.kollapse

.Navbar-Togggler

Gi data-BS-Target = “kollaps”

Data-BS-Target = “#id”

.Navbar-Togggler-Icon

Slik lager du en sammenleggbar navbar.

Endre Navbar -farge

For å endre fargen på Navbar -bruken etter klasser

BG-lys
BG-Primary
BG-suksess
BG-advarsel
BG-Info
BG-Danger

eller bruk inline stikkord med bakgrunnsfarge; Egenskap.

Konklusjon

For å lage en Navbar -bruk, .Navbar, .Navbar-EXPAND-XXL/LG/MD/SM, .Navbar-Light/Dark, BG-Light/Primary/Success/Warning/Info/Danger Class med

Kraftskall

Hvordan bruke kommandoen “Start-Sleep” i PowerShell?

Start-Sleep Cmdlet i PowerShell er ansvarlig for å suspendere en aktivitet eller pause en økt for en...

Oskar Fossum

Git

Hvordan omskrive den siste forpliktelseshistorien i Git?

For å omskrive forpliktelseshistorien, kan git commit -kommandoen brukes med alternativet -amend -m ...

Elias Krogh Svendsen

Linux -kommandoer

Hvordan starte en multicast -trafikk i IPERF

Opplæring om hvordan du starter en multicast -trafikk i IPERF og IPERF -kommandoene for å sende og m...

Simen Ødegård