Hvis du aldri har hørt om Bootstrap, et rammeverk som er utviklet av Twitter for å lage flotte nettsteder, går du glipp av! Bootstrap gjør det ganske raskt og enkelt å designe et nettsted uten mye kunnskap i CSS (Cascading Style Sheets). Hvis du er ny på å programmere for nettet, trenger du ikke å vite noe om CSS for å begynne å lære hvordan Bootstrap fungerer; alt du trenger er et enkelt HTML-dokument. Vi skal ta en titt på Bootstrap, vise deg hva det handler om, hvordan det fungerer og om det er et godt alternativ for alle nettsteder du bygger.
Sette inn Bootstrap API i HTML-filen
Du har noen få alternativer for å sette inn Bootstrap i hovedprosjektfilen. Det første alternativet er å sette inn alle nødvendige Bootstrap-filer i prosjektet. Du kan gjøre dette ved å laste ned pakken og laste den opp til prosjektmappen. Du må selvfølgelig koble den primære Bootstrap CSS-filen til dokumentet. Bootstraps offisielle nettsted har en trinn-for-trinn-guide for hvordan du gjør dette.
Det andre alternativet er å hoppe over nedlasting av pakken og bruke et innholdsleveringsnettverk (CDN). En CDN lar deg koble de primære Bootstrap-filene til HTML-dokumentet uten å laste ned det noen gang. Dette er selvfølgelig ikke alltid bra for profesjonelle nettsteder, siden jeg ikke ville være for rask til å overlate virksomheten eller porteføljesiden min til skjebne hvis serveren noen gang skulle gå ned. Det er best å ha filene i prosjektet ditt, men for å lære det, vil CDN gjøre det bra.
For å sette inn Bootstrap i HTML-dokumentet, trenger du bare å sette følgende kode inne i
tag i HTML-dokumentet:Når disse koblingene er satt inn i den hodetiketten, bør du være klar til å begynne å bruke Bootstrap-klasser. Dokumentet ditt skal se slik ut:
Bootstrap And Classes
Bootstrap-elementer er delt opp i klasser, som bare er en haug med forhåndsskrevne CSS som du kan sette inn i markeringen din. Det er enkelt å sette inn klasser i markeringen din, du trenger bare å vite navnet på klassen du vil bruke og deretter bruke det på et av HTML-elementene dine ved å bruke verdien class = "classname", som diskutert i en forrige artikkel.
Den vanskelige delen er å finne ut hvordan alt dette fungerer sammen for å skape noe vakkert. Du kan sjekke ut alle de forskjellige klassene som er tilgjengelige i Bootstrap, direkte fra den offisielle dokumentasjonen. Nå er det en annen historie å mestre Bootstrap. Det er ikke noe vi eller noen andre kan lære deg. Du kan se veiledning etter opplæring, men for å bli flink til å bruke rammen, kommer det med mye prøving og feiling. Og det krever at du blir praktisk opptatt av det i dine egne prosjekter.
Med det i bakhodet ber jeg deg om å starte ditt eget HTML-prosjekt på datamaskinen din ved hjelp av Atom eller en annen tekstredigerer, gå gjennom hva HTML- og CSS-klasser handler om, og deretter begynne å leke med Bootstrap. Og hvis du vet nok markering, kan du til og med lage din egen porteføljeside som en testøvelse.
Er Bootstrap et levedyktig alternativ for hvert nettsted?
Bootstrap er en flott ramme, men er det et levedyktig alternativ for alle nettsteder du oppretter? Det avhenger virkelig av utvikleren så vel som kravene til prosjektet. I mange fagmiljøer vil du ikke virkelig ha et valg av hvilke teknologier du bruker, da det stort sett vil være opp til prosjektlederen. Hvis nevnte prosjektleder velger å bruke Bootstrap, kommer du til å kombinere den med massevis av tilpasset CSS også. Dette er det som generelt gjør nettstedet ditt unikt og forskjellig fra andre nettsteder som bruker Bootstrap.
Jeg personlig ser ikke Bootstrap som et flott alternativ for alle nettsteder. Jada, det kan hjelpe og gi noen snarveier, men jeg har til slutt funnet ut at å designe fra grunnen med CSS er den beste ruten, i stor grad på grunn av kontrollen du har over den. Men nok en gang, hvis du bare kommer i gang med nettprogrammering, er det ikke en dårlig ting å bruke Bootstrap i det hele tatt, men ikke stol på det i løpet av din karriere.
Det er verdt å merke seg at hvis du er nybegynnerutvikler, bør du ikke bruke Bootstrap til alle prosjektene i porteføljen din. Det kan komme over at du kanskje er dyktig med API, men du vet ikke helt hvordan du går rundt CSS. Når det er sagt, er det godt å ha en anstendig blanding av begge på porteføljen din (eller til og med utelukkende CSS, da det er enkelt å hente Bootstrap).
Lukking
Det er alt Bootstrap er i et nøtteskall. Som jeg nevnte tidligere, oppfordrer jeg deg til å starte ditt eget HTML-prosjekt og legge til noen av de forskjellige klassene til elementer for å begynne å leke med rammen. Du kan finne alle de forskjellige komponentene Bootstrap tilbyr med forklaringer og kodeeksempler her.
Bootstrap er virkelig et pent verktøy, men husk å ikke stole på det alene! Det er godt å være kjent med det og kjenne seg rundt rammen, men også sørge for å dykke inn i CSS for å virkelig forstå hva som skjer bak kulissene. Ikke bare det, men en solid kunnskap i CSS komplimenterer Bootstrap mye, slik at du virkelig kan lage noen unike og vakre nettsteder med din egen tilpasning.
