Bootstrap 5 er den nyeste versjonen av Bootstrap-rammeverket som lar brukerne lage responsive nettsteder bygget med mobil-første teknikk. Bootstrap 5 ble lansert i år 2021 og har mange kjennetegn som den har raske stilark og forbedret responsivitet. I denne opplæringen skal vi demonstrere hvordan du kan opprette en enkel webside ved hjelp av Bootstrap 5.

La oss begynne.

Hvordan lage din første webside ved hjelp av Bootstrap 5

Inkluder Bootstrap 5

Det første trinnet er å åpenbart legge til Bootstrap 5 i HTML -filen din. For å inkludere Bootstrap 5, få en CDN for CSS, og JavaScript og legg den til i filen din som vi har vist nedenfor.

Bortsett fra CDN har vi også lagt til et UTF-8-tegnsett sammen med en responsiv metakode. I denne taggen er bredden satt til enhetsbredde, noe som betyr at bredden på nettet vil endre For første gang vil zoomnivået være 1.

Lag en navigasjonslinje

Etter å ha inkludert Bootstrap 5 i filen vår, vil vi nå lage en toppnavigasjonslinje ved hjelp av forskjellige Bootstrap 5 -klasser.

Nedenfor skal vi forklare de forskjellige klassene som brukes til å lage en navigasjonslinje.

1. De .Navbar brukes til å pakke en navigasjonslinje sammen med .Navbar-Expand-SM for responsiv kollapsing, i mellomtiden .BG-Secondary og .Navbar-Dark er de forskjellige fargevalgene som er gitt til navigasjonslinjen.
2. De .container Klasse pakker alle elementene i en navigasjonslinje med en fast bredde.
3. De .teksthvit og .Tekstsenter Klasser tilsvarer fargen og justeringen av hovedoverskriften på nettstedet.
4. De .Navbar-Nav brukes til å lage en navigasjonslinje som har en maksimal høyde og er lett og støtter også rullegardinmenyer. i mellomtiden, .ML-Auto Angir venstre margin på listeelementene til Auto.
5. De .Nav-element, og .Nav-link brukes til å lage forskjellige listeelementer i navigasjonslinjen.
6. De .aktiv Klassen lager en lenke aktiv.

Produksjon

Det ble opprettet en navigasjonslinje.

Legge til innhold

Nå som vi har opprettet en navigasjonslinje, vil vi legge til noe innhold på nettstedet. I koden nedenfor legger vi bare litt tekst til delen "Om oss".

Om oss

Hei. Velkommen til min første webside. Dette er en responsiv webside som jeg opprettet ved hjelp av Bootstrap 5. Bootstrap er den nyeste versjonen av Bootstrap-rammeverket som lar brukerne lage responsive nettsteder med en mobil-første teknikk. Denne tilnærmingen sier at webdesignet først er utviklet for mobiltelefoner, og senere for andre enheter.

Bootstrap 5 ble lansert i år 2021 og har mange fantastiske funksjoner som det har raske stilark og forbedret responsivitet.

Ulike klasser som brukes til å legge til innhold på websiden er forklart her.

1. De .rad Klassen oppretter en rad der vi skal plassere teksten vår, i mellomtiden, .Align-elems-venstre Klassen justerer innholdet til venstre.
2. De .col Klasse genererer en kolonne, mens, .tekst-col Klassen gir en standardfarge til teksten.

Merk: For å legge til innhold bygde vi i utgangspunktet et rutenettsystem ovenfor. Et rutenettsystem i Bootstrap 5 bruker forskjellige containere, rader og kolonner for å justere og justere innhold.

Produksjon

Noe innhold er lagt til på websiden.

Legge til bildegalleri

For å gjøre nettstedet vårt ytterligere interessant, legger vi nå til noen bilder ved å bygge et annet nettsystem.

Her har vi forklart klassene som er brukt ovenfor.

1. De .Col-MD-4 Klassen lager fire kolonner med lik bredde og spesifiserer at enhetens bredde er middels eller større enn 768px, i mellomtiden er beholderbredden 720px.
2. De .MT-3 Klassen gir en margindopp til nettoppsettet.
3. De .Col-LG-3 Klassen lager 3 kolonner med lik bredde og sier at enhetens bredde er stor med skjermstørrelse større eller lik 992px.
4. Til slutt blir bildene gjort responsive .IMG-fluiD -klasse.

Produksjon

Et responsivt bildegalleri ble lagt til med suksess.

Legge til en knapp

Til slutt skal vi legge til en knapp på nettstedet vårt.

Kontakt oss

Klasser som brukes til å opprette knappen er diskutert nedenfor.

1. De .MT-2 Angir marginknappen.
2. For å tilpasse knappen vår bruker vi .btn klasse, i mellomtiden, .BTN-sekundær Klassen spesifiserer fargen på knappen, og .Btn-stor Klassen oppgir størrelsen på knappen.

Produksjon
Slik ser hele websiden ut.

En enkel webside ble opprettet med suksess ved hjelp av Bootstrap 5.

Merk: Å evaluere responsen til nettleseskalaen nettleseren opp og ned.

Konklusjon

For å lage din første webside ved hjelp av Bootstrap 5, må du ha en grunnleggende forståelse av forskjellige Bootstrap 5-innebygde klasser. En grunnleggende nødvendighet av dette rammeverket er en beholder som pakker inn elementer inni den. Containerklassene kan brukes sammen med andre klasser for å bygge forskjellige enheter som en webside har, for eksempel en navigasjonslinje, bildnett, knapper osv. I denne oppskrivningen har vi demonstrert ved hjelp av et passende eksempel på hvordan du kan opprette din første webside ved hjelp av Bootstrap 5.