Bootstrap 5 er den nyeste versjonen av Bootstrap-rammeverket som lar brukerne lage nettsteder som er lydhøre og med en mobil-første tilnærming. Denne tilnærmingen spesifiserer 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 raske stilark og forbedret responsivitet. Her vil vi guide deg om hvordan du kommer i gang med Bootstrap 5, men før det la oss lære litt mer om Bootstrap 5.

Kjennetegn på bootstrap 5

Bootstrap 5 har mange funksjoner som gjør at den skiller seg ut blant andre versjoner. Noen få av disse egenskapene er listet opp nedenfor.

1. Denne siste versjonen av Bootstrap er veldig brukervennlig.
2. Det har rask respons.
3. Det er nyttig for å utvikle nettsteder som er designet for mobiltelefoner først og andre enheter senere.
4. Dette rammeverket er kompatibel med alle moderne nettlesere.
5. Det er raskt, og sparer mye tid og energi.

Bootstrap 5 vs. Bootstrap 3 & 4

Sammenlignet med andre bootstrap -versjoner, spesielt versjon 3, og versjon 4, er hovedforskjellen som kan påpekes blant andre forskjeller at Bootstrap 5 bruker Vanilla JavaScript i stedet for jQuery.

Få bootstrap 5

Før du kan begynne.com. Av hensyn til denne opplæringen skal vi inkludere bootstrap 5 fra CDN.

For CSS

For JavaScript

Nå som Bootstrap 5 er inkludert, la oss utvikle vårt første program.

Komme i gang med Bootstrap 5

Nedenfor har vi gitt deg en trinn-for-trinns guide for hvordan du kommer i gang med Bootstrap 5.

1. Lag et HTML -dokument
Hensikten med å lage en HTML -fil ved hjelp av Bootstrap 5 er å inkludere HTML5 Doctype slik at dette rammeverket kan utnytte forskjellige HTML -elementer, og CSS -egenskaper og CSS -egenskaper.

Inkluder også LANG -attributtet, sammen med et tegnsett. En annen som vi har lagt til her er den responsive metakoden. Som vi vet, utvikler Bootstrap 5 et nettsted med en mobil-første tilnærming, inkludert en responsiv metakode sørger for at nettstedet er lydhør på berøring og zooming.

2. Legg til Bootstrap 5
Legg bare til CDN for CSS og JavaScript i HTML -filen din for å begynne å bruke Bootstrap 5 uten problemer.

Begge CDN -ene ble lagt til i taggen. En annen tilnærming til å legge til CDN for JavaScript i filen er før den lukkende kroppskoden.

3. Legg til elementer
Koden over mangler derfor taggen helt for å legge til noe innhold, lage forskjellige HTML -elementer i filen av filen din. Siden formålet med dette innlegget er å vise responsen til Bootstrap 5, presenterer vi deg derfor her med grunnleggende kunnskap om Bootstrap Container Classes.

Et grunnleggende krav til Bootstrap 5 er å inkludere en beholder med det formål å pakke inn innholdet på nettstedet. For å bruke disse containerne bruker du følgende to klasser.

1. .container å bygge en beholder med fast bredde, men likevel responsiv.
2. .Container-fluid for å få en full breddebeholder som spenner over hele visningsbredden.

Her bruker vi container-fluidklassen for å demonstrere vår første responsive side ved hjelp av Bootstrap 5.

Bootstrap 5

Bootstrap 5 er den nyeste versjonen av Bootstrap -rammeverket som lar brukeren lage fantastiske nettsteder med raske CSS
stilark og forbedret responsivitet.

Sammenlignet med andre versjoner spesielt versjon 3, og versjon 4, bruker Bootstrap 5 Vanilla JavaScript i stedet for
jQuery.

Ved hjelp av container-fluidklassen har vi laget et divelement som ytterligere hekker a

element, og to

elementer. Skala nettleservinduet opp og ned for å se effekten.

Produksjon

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

Konklusjon

For å komme i gang med Bootstrap 5 må du først lage en grunnleggende HTML -fil ved å inkludere HTML5 Doctype So Bootstrap 5 kan utnytte forskjellige HTML -elementer, og CSS -egenskaper og CSS -egenskaper. Etterpå må du enten installere Bootstrap 5 eller få CDN og inkludere det i HTML -dokumentet. Da kan du begynne å lage elementene du vil vise på websiden din. Til slutt, lagre filen din, og voila din første bootstrap 5 -side er opprettet. Denne opplæringen guider deg et trinn for trinn om hvordan du kommer i gang med Bootstrap 5.