Kom i gang med Bootstrap

Å jobbe med nettsider krever mye mer enn bare å kunne språkene vi må bruke. Det er en rekke milepæler vi må møte for å utvikle et produkt med et eksepsjonelt resultat. En av disse milepælene er utformingen og arrangementet av elementene som skal vises på skjermen.

La oss tenke oss at vi må designe en webside, hvis vi starter fra bunnen av må vi ta hensyn til hvordan menyen, tabellene, knappene skal se ut, så enkle ting som ikonene som vi skal plassere på noen handlingsknapper, etc.

Som vi kan se, er det hardt arbeid, spesielt hvis vi vil at det skal se optimalt ut og ha en appell, må vi også være detaljerte for å gi siden et personlig preg, nå, hva om vi ikke er designere? Dette er det store spørsmålet, det er utviklere som har blinde øyne når det kommer til god smak og design, og denne typen profiler er hemmet for å gjøre webopptredener av høy kvalitet. Eller hva om vi har god smak, men lite tid til å designe?

For å løse disse to store kravene vi har Støvelhempe som ikke er mer enn a CSS rammeverk som lar oss få det grunnleggende aspektet av siden vår på en gang uten å måtte lide med designet, men bortsett fra det hjelper det oss også med grunnleggende effekter og en helt spesiell måte å strukturere innholdet vi skal presentere.

Bootstrap fordelerVi vet det allerede Støvelhempe det er en CSS rammeverk og det hjelper oss med å etablere de grunnleggende aspektene for nettstedet vårt, men i tillegg til at det har visse fordeler når det gjelder bruk, skal vi se noen av de positive tingene det gir oss nedenfor. Støvelhempe:

1. GjenbrukMed Støvelhempe Vi har mange komponenter som standard, slik at vi kan bruke dem uten endringer i forskjellige deler av nettstedet vårt, og dermed redusere tiden og mengden kode vi bruker. Dette favoriserer også den modulære utviklingen av applikasjonene våre.

2. KonsistensTakket være det faktum at vi har mange komponenter laget på en generisk måte, er koden konsekvent, det vil si at den håndterer veldig like strukturer, så når vi leser den eller vedlikeholder applikasjonen, vil vi allerede vite hvordan den fungerer mye enklere.

3. Fleksibel designMobildesign er veldig viktig og Støvelhempe tar det i betraktning fra begynnelsen, har vi fleksibiliteten til at nettstedet vårt tilpasser seg forskjellige oppløsninger og skjermoppsett automatisk, noe som sparer oss for mye arbeid fra å måtte designe mobilvisninger fra bunnen av.

4. FellesskapEt annet aspekt å ta hensyn til er dokumentasjonen, når vi bruker et tredjepartsrammeverk er det veldig viktig å ha hvor vi skal henvende oss når vi er i tvil og i denne forstand Støvelhempe Det har ingen sammenligning, siden vi kan få nesten alle svar på tvilen vår uten store anstrengelser.

Ulemper med BootstrapSelv om nesten alt er bra, må vi også snakke om ulempene eller ikke så gode aspektene vi står overfor når vi bruker dette CSS rammeverkLa oss se noen av svakhetene nedenfor.

1. Lite originalHvis vi ikke bruker litt tid på å lage designet vårt, kan vi forbli like lite originale hvis vi bruker det Støvelhempe uten mer, selv om dette rammeverket er designet for det, på grunn av den store adopsjonen det har hatt, må vi jobbe litt mer for ikke å ligne kopien av kopien.

2. LæringskurveSom alt må vi gå gjennom en læringskurve hvis vi vil få mest mulig ut av det, problemet er at hvis vi vil gå fra det grunnleggende til det avanserte, er sjokket litt sterkt.

3. Dårlig kompatibilitet mellom versjonerNår det er en versjonsendring, mister den forrige versjonen mye gyldighet, og hvis vi ønsker å oppdatere, vil det koste oss, spesielt hvis vi har gjort viktige endringer slik at nettstedet vårt ser annerledes ut.

InstallasjonNår vi vet hva det er Støvelhempe, og fordelene og ulempene ved å bruke det i våre prosjekter, må vi komme til den praktiske delen av opplæringen, nå skal vi lære hvor vi kan få dette rammeverket fra og hvordan vi kan inkludere det i prosjektet vårt.

Få BootstrapDet første vi må gjøre er å skaffe de nødvendige filene for å inkludere Støvelhempe i vårt prosjekt, er det derfor vi må besøke nettstedet deres getbootstrap.com og laste ned de nødvendige filene, eller alternativt bruke en CDN for å unngå å lagre filene på serveren vår og redusere bruken av båndbredden.
Uansett alternativ, må vi være på en side som ligner den følgende hvis vi klikker på den første nedlastningsknappen når vi besøker rammesiden:

FORSTØRRE

For å lette arbeidet, la oss anta at vi har lastet ned prosjektet. Det kommer i en komprimert fil som vi må pakke ut på et sted som vi kan bruke, og som burde være noe som ligner på følgende:

Som vi kan se, må det være tre mapper i prosjektet vårt, en for CSS, en annen for kildene som brukes og til slutt en for JS nødvendig. Med dette har vi allerede tilgjengelig Støvelhempe, som ikke er annet enn å kopiere prosjektet til ressursmappen vår.

Kom i gang med BootstrapSiden vi har alle ressursene i besittelse, må vi inkludere det i vårt design, for dette kan vi lage en fil HTML og der gjør de nødvendige inkluderingene, kan vi se dette mer detaljert i følgende kode:

 Installere Bootstrap 

Som vi kan se, var det eneste vi gjorde å inkludere tre filer, spesielt to .css og a .js, dette er det vi trenger for å begynne å bruke hele strukturen. Hvis vi nå åpner filen med en nettleser, vil vi se hvordan skriften på bokstavene er forskjellig fra det vi normalt ville sett med en etikett H1:

Bootstrap -rutenettetFor å oppnå organisering av våre design, Støvelhempe bruk et rutenett eller Nett, dette er sammensatt av 12 kolonner, så alt vi ser på skjermen må organiseres på denne måten, med dette oppnås det at siden kan struktureres på en slik måte at vi kan bruke verktøyene som tilbys oss på en veldig gjennomsiktig måte.

Selvfølgelig er det en tilpasningsprosess, men det viktige er at vi kan lage kolonner som grupperer flere, så vel som når vi jobber med tabellene over HTML at vi kan lage kolonner med flere sammenføyninger med egenskapen span. For å lage et nettsted som bruker denne strukturen, trenger vi bare å ha følgende:

En div med klassen container, inne i dette en div med klassen rad, og til slutt inne i en eller flere div med klassen kål, la oss se i den følgende koden et eksempel på en side med 3 kolonner, for denne må hver kolonne gruppere 4 for å legge til totalt 12 som er det vi har forklart er standardverdien til Støvelhempe.

 Kolonner i Bootstrap
Eksempel på hvordan du bruker kolonner i bootstrap
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit augue et laoreet aliquam. Aliquam letter my in lorem pharetra, ut volutpat magna laoreet. Fusce sed mi ut turpis bibendum dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sapien sit amet mauris aliquet elementum. Heltall aliquet metus eget orci egestas varius. Fusce suscipit id ex iaculis vulputate. Nullam rhoncus eu nibh vel dignissim. Ut euismod purus vitae elit feugiat imperdiet. Vivamus sed pharetra massa. Nam just ex, request for efficitur vel, placerat sit amet purus. Cras id semper felis. Vær ac hendrerit purus. Vestibulum congue dui vel maximus convallis. Heltall eu eleifend mauris.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit augue et laoreet aliquam. Aliquam letter my in lorem pharetra, ut volutpat magna laoreet. Fusce sed mi ut turpis bibendum dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sapien sit amet mauris aliquet elementum. Heltall aliquet metus eget orci egestas varius. Fusce suscipit id ex iaculis vulputate. Nullam rhoncus eu nibh vel dignissim. Ut euismod purus vitae elit feugiat imperdiet. Vivamus sed pharetra massa. Nam just ex, request for efficitur vel, placerat sit amet purus. Cras id semper felis. Vær ac hendrerit purus. Vestibulum congue dui vel maximus convallis. Heltall eu eleifend mauris.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit augue et laoreet aliquam. Aliquam letter my in lorem pharetra, ut volutpat magna laoreet. Fusce sed mi ut turpis bibendum dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sapien sit amet mauris aliquet elementum. Heltall aliquet metus eget orci egestas varius. Fusce suscipit id ex iaculis vulputate. Nullam rhoncus eu nibh vel dignissim. Ut euismod purus vitae elit feugiat imperdiet. Vivamus sed pharetra massa. Nam just ex, request for efficitur vel, placerat sit amet purus. Cras id semper felis. Vær ac hendrerit purus. Vestibulum congue dui vel maximus convallis. Heltall eu eleifend mauris.

Dette resulterer i en side der de tre interne divene er i en enkelt rad delt inn i tre like kolonner, som vi kan se på følgende bilde:

FORSTØRRE

Denne strukturen, til tross for at den ser litt firkantet ut, er veldig fleksibel, siden vi bare trenger å lage et slags spill med beholderne og kolonnene deres, for å oppnå de resultatene vi ønsker. Med dette fullfører vi denne opplæringen, vi har effektivt tatt våre første skritt med Støvelhempe og nå kan vi begynne å dra fordeler av fordelene mer direkte på våre prosjekter eller webapplikasjoner.