Bootstrap er et CSS -ramme som ble designet for å lage responsive nettsteder, og spesielt de nettsteder som er utviklet for mobiler før de er designet for noen annen enhetstype. Dette rammeverket ble utviklet ved hjelp av HTML, CSS og JavaScript, og består av maler for å lage forskjellige elementer som knapper, skjemaer, rullegardinrøstninger og mange flere. Dessuten er dette rammeverket åpen kildekode og er også gratis å bruke.

Som tittelen på artikkelen antyder, vil her hovedfokuset i diskusjonen vår være Bootstrap 5. Derfor, uten videre, la oss komme i gang.

Hva er bootstrap 5?

Bootstrap 5 er den nyeste versjonen av Bootstrap -rammeverket som lar brukerne lage fantastiske nettsteder med raske CSS -stilark og forbedret responsivitet. Den ble lansert i år 2021 og støttes av nesten alle nettlesere og plattformer. \

Funksjoner ved bootstrap

Noen av de kjennetegnene ved Bootstrap 5 er som følger.

1. Denne nyeste versjonen av Bootstrap er lett og kan tilpasses i henhold til brukernes behov.
2. Den består av forbedret responsivitet.
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 raskere, og sparer mye tid og energi.

Bootstrap 5 vs. andre versjoner

Sammenlignet med andre versjoner, spesielt versjon 3, og versjon 4, bruker Bootstrap 5 Vanilla JavaScript i stedet for jQuery. Imidlertid kan de eldre versjonene fortsatt brukes til feilfiksing eller endre dokumentasjonen.

Nå som vi har en grunnleggende introduksjon av hva Bootstrap 5 er, la oss bygge vår første webside ved hjelp av denne rammen.

Mitt første bootstrap5 -program

For å bruke Bootstrap 5, må du tydeligvis installere den først. Du kan enten inkludere dette rammeverket fra Content Delivery Network, eller laste ned og installere det fra Bootstrap.com. Den første tilnærmingen er å foretrekke hvis du ikke vil være vert for Bootstrap 5. Nedenfor har vi gitt CDN for Bootstrap 5.

For CSS

For JavaScript

Nå som vi har CDN, la oss bygge en webside ved hjelp av Bootstrap 5. Nedenfor har vi gitt en trinn-for-trinns guide.

Trinn 1
Det første trinnet for å bruke Bootstrap 5 er å inkludere HTML5 Doctype slik at Bootstrap 5 kan utnytte forskjellige HTML -elementer, og CSS -egenskaper og CSS -egenskaper.

>

Bortsett fra HTML5 Doctype har vi også inkludert LANG -attributtet, sammen med et tegnsett.

Steg 2
Som vi vet, utvikler Bootstrap 5 et nettsted med en mobil-første tilnærming, derfor er neste trinn å legge til en responsiv metakode for å sikre at nettstedet som er bygget som et resultat er lydhør på berøring og zooming.

Inkluder følgende taggen.

Trinn 3
En grunnleggende nødvendighet av Bootstrap 5 er å inkludere en beholder med det formål å pakke inn innholdet på nettstedet. Disse beholderne pakker i utgangspunktet elementer inni dem. 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 å lage en full breddebeholder som spenner over hele visningsbredden.

Trinn 4
For dette trinnet vil vi legge til noe innhold for å lage vår webside ved hjelp av fast breddebeholder. Vi holder programmet vårt veldig enkelt, slik at det som nybegynner er lett å forstå 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.

I koden ovenfor, ved å bruke containerklassen har vi laget et divelement som ytterligere hekker en overskrift, og to avsnitt. For å se full effekt av Bootstrap 5 Endre størrelse på nettleservinduet. I utdataene nedenfor har vi vist deg hvordan siden ser på tilfeldige skjermstørrelser.

Produksjon
Når skjermbredden er 837px, og over.

Når skjermbredden er 677px, og mindre.

En webside ble opprettet med hell ved hjelp av Bootstrap 5.

Konklusjon

Bootstrap 5 er den nyeste versjonen av CSS Bootstrap-rammeverket som lar brukerne lage nettsteder som er lydhøre og med en mobil-første tilnærming. Denne versjonen har raske stilark og forbedret respons og ble lansert i 2021. Den har mange fantastiske funksjoner som skiller den fra andre versjoner. Sammenlignet med andre versjoner, spesielt versjon 3, og versjon 4, bruker Bootstrap 5 Vanilla JavaScript i stedet for jQuery. Denne opplæringen dekker alle nødvendige detaljer om Bootstrap 5 sammen med et enkelt program.