Lære å bruke Bootstrap Grid

Støvelhempe administrerer en rutenettbasert struktur eller også kjent som Nett, som ikke er mer enn et oppsett på skjermen som hjelper oss med å organisere elementene våre, er det som om vi delte skjermen i rader og kolonner og håndterte den som et stort bord.
Denne typen manipulasjon får oss til å tenke på design på en "unik" måte og i det øyeblikket vi har litt mer erfaring med bruk Støvelhempe Vi vil begynne å se alt på denne måten, og dermed vil vi oppnå konsistens og hurtighet i måten vi jobber på.
Det første du må vite er at denne designen av Nett lar oss jobbe på en måte som vi kan implementere mobile visninger innfødt, dette selvfølgelig fra versjon 3 av Støvelhempe, takket være det faktum at denne versjonen ble bygget med tanke på mobildesign.
I tidligere versjoner av rammeverket måtte klassene spesifiseres direkte slik at designet vårt hadde muligheten til å tilpasse seg oppløsningene til mobile enheter, nå de forskjellige klassene i Nett de gjør det automatisk.
For å dra nytte av denne funksjonen må vi tenke fra små til store, det vil si at klassene vi bruker må alltid betraktes som de minste, og deretter skaleres det til andre oppløsninger, det vil si hvis vi definerer et sm klasse (liten eller liten), automatisk Støvelhempe den forutsetter at dette er minimumsuttrykket og at det deretter kan skaleres til md (median) eller til lg (stor).
Før vi går videre til mer praktiske eksempler, må vi forstå hva som er klassene vi kan bruke i kolonnene til a Nett Og vi må også vite i hvilket tilfelle hver enkelt gjelder. På denne måten kan vi ta hensyn til den minste enheten vi ønsker å nå når vi designer nettstedet vårt.
Med denne tilnærmingen kan vi bygge nettsteder Mobilvennlig, hvor viktige de blir i dag for søkemotorer og resultatene deres, og dermed hjelper oss i tillegg til å lage gode nettsteder for å tjene noen poeng i omdømmet vårt SEO, med samme jobb selvfølgelig.
Telefon skjermerDet er den minste enheten som i teorien kan navigere i vårt design, selv om oppløsningene på telefonene gradvis har blitt konvertert til Full HD, er dette vanligvis for den høyeste enden, mens mellomstore og lave områder som i teorien er de fleste opprettholder mye lavere oppløsninger. Den typen Nett som gjelder for den saken er: col-xs- og gjelder løsninger mindre enn bredde 768 piksler.
Nettbrett -skjermerDe er i teorien den nest minste enheten, takket være den større andelen av størrelse tilbyr nettbrettet en større navigasjonsflate, slik at vi kan bruke litt mer innhold enn med en telefonskjerm, i tillegg til at navigasjonen på nettbrett generelt gjøres horisontalt. Klassen som gjelder for denne enheten er col-sm- og gjelder oppløsninger med bredder større enn 768 piksler og under 992 piksler.
Liten skjerm utstyrDe er vanligvis de som tilhører de lave områdene av stasjonære og bærbare datamaskiner, de kan være utstyr med skjermer mindre enn 15 tommer, eller som har mer enn 10 års levetid, de er også bærbare datamaskiner som er beregnet for studenter og sektoren med lav kjøpekraft, dette er majoritetssektoren. Klassen som gjelder for denne saken er col-md- og grenseoppløsningene for bredden er større enn 992 piksler og mindre enn 1200 piksler.
Stort skjermutstyrHer kan vi dyrehull det mest moderne utstyret, og også skjermene på mer enn 15 tommer, i denne kategorien går inn i det nye utstyret som ultrabærbar, 4K-oppløsning eller QHD også der vi ser overflater større enn 1080p. Ved å utelukke bredder som vi vil håndtere her er de større enn 1200 piksler, dette mens den neste versjonen av Støvelhempe sannsynligvis.
Siden vi kjenner teorien bak systemet Nett av Støvelhempe, Det er godt å begynne å gjøre sin praktiske anvendelse, men før vi ser koden må vi forstå et par konsepter til, vi må alltid etter konvensjon og beste praksis bruke et element med klassen container, siden dette vil opprette beholderen som navnet indikerer den for å beholde våre forskjellige kolonner. Det andre konseptet vi må vite er at det alltid vil være 12 kolonner, så de forskjellige kombinasjonene vi lager må ta hensyn til dette tallet.
I det følgende eksemplet skal vi lage en kode for et oppsett med 3 store kolonner, vi skal bruke klassen col-md- og siden vi ønsker 3 like kolonner når vi deler 12 med 3, får vi tallet 4, så dette vil være størrelsen på hver av våre resulterende kolonner.
La oss se på koden uten videre:

 Bootstrap Grid
Eksempel på hvordan du bruker kolonner i bootstrap


Kolonne a
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.
Kolonne B
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.
Kolonne C
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.

Strukturen er veldig enkel, vi har laget en div med klassen container, og inne i en div med klassen rad endelig innen sistnevnte har vi opprettet 3 divs med klassen col-md-4 Dette er klassen for små skjermer for ikke-bærbare datamaskiner, og vi ser hvordan vi mynter tallet 4, noe som indikerer at hver div av disse tilsvarer 4 kolonner i Nett. La oss se hvordan det ser ut når vi kjører i nettleseren vår:

FORSTØRRE

Hvis vi legger merke til det, så har vi 3 store kolonner, men hva skjer når vi reduserer størrelsen til en oppløsning som er lavere enn minimum for den anvendte klassen, siden kolonnene ganske enkelt kommer til å bli stablet oppå hverandre som vi ser i følgende bilde:

FORSTØRRE

Selv om dette ikke er en dårlig ting, er det noen ganger ikke atferden vi ønsker at designet vårt skal ta. For dette kan vi inkludere atferdene direkte med klasser for de forskjellige oppløsningene. La oss se i følgende kode hvordan vi endrer klassene i forskjellige kolonner for å oppnå et annet resultat:

 Bootstrap Grid
Eksempel på hvordan du bruker kolonner i bootstrap

Kolonne a
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.
Kolonne B
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.
Kolonne C
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.

Hvis vi merker i koden vår, forblir alt det samme bortsett fra klassene våre, der vi for kolonner A og B har lagt til klassen col-sm-6 og for kolonne C klassen col-sm-12, betyr dette at når oppløsningen reduseres, vil sm -klassene styre, slik vi ser på følgende bilde:

FORSTØRRE

Vi ser at i samme størrelse som det første eksemplet, i stedet for å bli stablet, blir kolonner A og B i samme område, og kolonne C tar en enkelt rad for seg selv. Her ser vi den store nytten av Nett spesielt med design som er fokusert på å være lydhør og mobil.
Med dette fullfører vi denne opplæringen, hvor vi har lært hvordan systemet med Nett av StøvelhempeSelvfølgelig er dette bare toppen av isfjellet, det er mye mer innhold som vi kan utforske i andre opplæringsprogrammer, men med denne grunnleggende kunnskapen kan vi begynne å se hvordan vi skal kombinere designene våre på en mer logisk måte og med mindre innsats takket være rammen.Likte og hjalp du denne opplæringen?Du kan belønne forfatteren ved å trykke på denne knappen for å gi ham et positivt poeng