CSS -rammeverket kalt Bootstrap er et av de mye brukte rammene for å lage og designe webapplikasjoner. Den har HTML, CSS -stiler og noen JavaScript -designkomponenter for skjemaer, knapper, navigasjon og andre grensesnittmoduler. Før du bruker Bootstrap, må man legge til de nødvendige CSS-, JavaScript- og jQuery -koblingene.

Denne oppskrivningen vil beskrive metodene for hvordan du legger til Bootstrap til et prosjekt.

Hvordan legge til bootstrap til et prosjekt?

Det er to måter å legge til Bootstrap til et prosjekt:

• • Last ned bootstrap
  • Legge til bootstrap fra en CDN

Metode 1: Last ned bootstrap

Hvis du vil være vert for Bootstrap på nettstedet ditt, kan du laste ned Bootstrap fra det offisielle nettstedet og følge instruksjonene.

Metode 2: Legge til bootstrap fra en CDN

Et globalt nettverk som heter CDN eller Content Delivery Network Caches den statiske ressursen for et nettsted rundt om i verden. Ressursene inkluderer bilder, videoer, CSS og mer. Det gjør nettstedets lastetid raskere ved å laste inn de statiske filene fra den relativt lukke CDN -serveren. MaxCDN tilbyr CDN -støtte for Bootstraps JavaScript og CSS. JQuery må også være inkludert.

La oss implementere et eksempel for å opprette en webside ved hjelp av Bootstrap.

Eksempel: Opprett en webside ved hjelp av Bootstrap

For å opprette en webside med Bootstrap, prøv følgende trinn:

Trinn 1: Opprett en HTML -fil

Først må du lage en HTML -fil og navngi den med utvidelsen ".html”. I vårt tilfelle kalte vi HTML -filen “indeks.html”. Etter å ha opprettet den, legg til de nødvendige elementene som vist nedenfor:

Trinn 2: Legg til den nødvendige bootstrap CSS -koblingen

Legg nå den nødvendige Bootstrap CSS -koblingen inne i "" -elementet:

La oss anta at vi bruker Bootstrap 4, så besøk Bootstrap 4 offisielle nettsted og kopier CSS -lenken til HTML Head -delen.

Bootstrap CSS

Trinn 3: Legg til nødvendige skriptetoder

Det er flere komponenter av Bootstrap som trenger JavaScript for å fungere ordentlig. Mer spesifikt trenger de jQuery, Popper og JavaScript -plugins. For å legge dem til i prosjektet ditt, bruk "”Tagger, rett før“”Lukkemerke:

Viktig notat: Sekvensen av “" -merket må ikke endres, for eksempel jQuery må plasseres først, JS og tredje popper.JS.

Bonus tips

Det er en enkel og enklest måte å inkludere bootstrap i prosjektet ditt. Startmalen kan kopieres fra Bootstrap offisielle nettsted og limt inn i prosjektet ditt.

Trinn 4: Legg til HTML -elementer

Vi har lagt til de nødvendige bootstrap -koblingene. Legg nå HTML -elementene for å opprette en webside. For eksempel, i det pågående eksempelet til HTML -elementene i "”Element som nevnt nedenfor:

• • Først, legg til en "”Element for å skape et område for elementene. Tilordne det “Tekstsenter”Og“BG-Info”Klasser.
  • Inne i "", legg til "

    ”Tag med klassen”tekstvarsling”For å spesifisere en overskrift i gul farge.

  • Inkluder deretter litt tekstinnhold ved å bruke "

    ”Element.

Html

Linuxhint

Linuxhint gir de beste artiklene og videoene for utdanningsformål!

Bootstrap-klassene som brukes i det ovennevnte eksemplet er forklart nedenfor:

• • “Tekstsenter”Klassesenter justerer teksten.
  • “BG-Info”Legger til en blå farge.
  • “BG-advarsel”Bruker gul farge på teksten.

Lagre koden og start den i nettleseren. Nettsiden vil se slik ut:

Slik kan du legge til bootstrap til prosjektet ditt.

Konklusjon

For å legge til bootstrap til prosjektet ditt, “Last ned bootstrap”Eller“Bruk Bootstrap CDN”Er de to alternativene. For å laste ned Bootstrap, besøk det offisielle nettstedet og følg guiden, og hvis du ikke vil laste ned den, kan du bruke den via CDN. For å gjøre det, legg til CSS -koblingen i “”Seksjon av HTML og legg til taggene til jQuery, JavaScript og Popper.JS nær avslutningen "" stikkord. Inkluder deretter HTML -elementene etter startkoden til "”Element. Denne oppskrivningen har forklart hvordan du kan legge til Bootstrap til et prosjekt med et eksempel.