Lär dig att använda Bootstrap Grid

Bootstrap hanterar en nätbaserad struktur eller även känd som Rutnät, som inte är mer än en layout på skärmen som hjälper oss att organisera våra element, är det som om vi delade upp skärmen i rader och kolumner och hanterade det som ett stort bord.
Denna typ av manipulation leder oss att tänka på mönster på ett "unikt" sätt och det ögonblick som vi har lite mer erfarenhet av att använda Bootstrap Vi kommer att börja se allt på detta sätt och därmed kommer vi att få konsekvens och snabbhet i vårt sätt att arbeta.
Det första du ska veta är att denna design av Rutnät tillåter oss att arbeta på ett sätt som vi kan implementera mobilvyer inbyggt, detta naturligtvis från version 3 av Bootstrap, tack vare att den här versionen byggdes med tanke på mobil design.
I tidigare versioner av ramverket måste klasserna specificeras direkt så att vår design hade förmågan att anpassa sig till upplösningar för mobila enheter, nu de olika klasserna i Rutnät de gör det automatiskt.
För att dra nytta av denna funktion måste vi tänka från små till stora, det vill säga klasserna som vi tillämpar måste alltid ses som de minsta och sedan kommer den att skala till andra upplösningar, det vill säga om vi definierar en sm klass (liten eller liten), automatiskt Bootstrap det förutsätter att detta är det minsta uttrycket och att det sedan kan skalas till md (median) eller till lg (stor).
Innan vi går vidare till mer praktiska exempel måste vi förstå vilka klasser vi kan använda i kolumnerna i a Rutnät Och vi måste också veta i vilket fall var och en gäller, på detta sätt kan vi ta hänsyn till den minsta enhet vi vill nå när vi designar vår webbplats.
Med detta tillvägagångssätt kan vi bygga webbplatser Mobilvänlig, hur viktiga de blir idag för sökmotorer och deras resultat, och därmed hjälper oss förutom att göra bra webbplatser att tjäna några poäng i vårt rykte SEO, med samma jobb förstås.
TelefonskärmarDet är den minsta enheten som i teorin kan navigera i vår design, även om telefonernas upplösningar gradvis har konverterats till Full HD, är detta i allmänhet för den högsta änden, medan mellanklassen och intervallet lågt som i teorin är de flesta håller mycket lägre upplösningar. Den typ av Rutnät som gäller i det fallet är: col-xs- och gäller lösningar som är mindre än bredd 768 pixlar.
Skärmar för surfplattorDe är i teorin den näst minsta enheten, tack vare sin större andel storlek erbjuder surfplattan en större navigeringsyta, så vi kan använda lite mer innehåll än med en telefonskärm, förutom att navigering på surfplattor i allmänhet sker horisontellt. Klassen som gäller för denna enhet är col-sm- och gäller upplösningar med bredder större än 768 pixlar och under 992 pixlar.
Liten skärmutrustningDe är i allmänhet de som tillhör de låga områdena för stationära och bärbara datorer, de kan vara utrustning med skärmar mindre än 15 tum, eller som har mer än 10 års livslängd, de är också de bärbara datorerna som är avsedda för studenter och sektorn med låga köpkraft är detta majoritetssektorn. Klassen som gäller för detta fall är col-md- och gränsupplösningarna för bredden är större än 992 pixlar och mindre än 1200 pixlar.
Stor skärmutrustningHär kan vi duva hål den mest moderna utrustningen, och även skärmarna på mer än 15 tum, i denna kategori går in i den nya utrustningen som ultrabärbar, 4K-upplösning eller QHD också där vi ser ytor större än 1080p. Genom att utesluta de bredder som vi kommer att hantera här är de större än 1200 pixlar, detta medan nästa version av Bootstrap förmodligen.
Eftersom vi känner till teorin bakom systemet Rutnät av Bootstrap, Det är bra att börja göra sin praktiska tillämpning, men innan vi ser koden måste vi förstå ett par begrepp, vi måste alltid enligt konvention och bästa praxis använda ett element med klassen behållare, eftersom detta skapar behållaren som namnet indikerar att den behåller våra olika kolumner. Det andra konceptet som vi måste veta är att det alltid kommer att finnas 12 kolumner, så de olika kombinationerna som vi gör måste ta hänsyn till detta nummer.
I följande exempel ska vi skapa en kod för en layout med 3 stora kolumner, vi ska använda klassen kol-md- och eftersom vi vill ha tre lika stora kolumner när vi delar 12 med 3 får vi siffran 4 så detta blir storleken på var och en av våra resulterande kolumner.
Låt oss titta på koden utan vidare:

 Bootstrap Grid
Exempel på hur man använder kolumner i bootstrap


Kolumn a
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit augue et laoreet aliquam. Aliquam underlättar min in lorem pharetra, ut volutpat magna laoreet. Fusce sed mi ut turpis bibendum dictum.
Kolumn B
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit augue et laoreet aliquam. Aliquam underlättar min in lorem pharetra, ut volutpat magna laoreet. Fusce sed mi ut turpis bibendum dictum.
Kolumn C
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit augue et laoreet aliquam. Aliquam underlättar min in lorem pharetra, ut volutpat magna laoreet. Fusce sed mi ut turpis bibendum dictum.

Strukturen är väldigt enkel, vi har skapat en div med klassen behållare, och inne i en div med klassen rad äntligen inom det senare har vi skapat 3 divs med klassen col-md-4 Detta är klassen för små skärmar för icke-bärbara datorer, och vi ser hur vi myntar talet 4, vilket indikerar att varje div av dessa motsvarar 4 kolumner i Rutnät. Låt oss se hur det ser ut när vi kör i vår webbläsare:

FÖRSTORA

Om vi ​​märker det, har vi tre stora kolumner, men vad händer när vi reducerar storleken till en upplösning som är lägre än minimum för den tillämpade klassen, eftersom kolumnerna helt enkelt kommer att staplas ovanpå varandra som vi ser i följande bild:

FÖRSTORA

Även om detta inte är en dålig sak, är det ibland inte beteendet som vi vill att vår design ska ta, för detta kan vi inkludera beteenden direkt med klasser för de olika upplösningarna, låt oss se i följande kod hur vi ändrar klasserna i olika kolumner för att uppnå ett annat resultat:

 Bootstrap Grid
Exempel på hur man använder kolumner i bootstrap

Kolumn a
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit augue et laoreet aliquam. Aliquam underlättar min in lorem pharetra, ut volutpat magna laoreet. Fusce sed mi ut turpis bibendum dictum.
Kolumn B
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit augue et laoreet aliquam. Aliquam underlättar min in lorem pharetra, ut volutpat magna laoreet. Fusce sed mi ut turpis bibendum dictum.
Kolumn C
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit augue et laoreet aliquam. Aliquam underlättar min in lorem pharetra, ut volutpat magna laoreet. Fusce sed mi ut turpis bibendum dictum.

Om vi ​​nu märker i vår kod förblir allt detsamma förutom våra klasser, där vi för kolumnerna A och B har lagt till klassen col-sm-6 och för kolumn C klassen col-sm-12, detta betyder att när upplösningen reduceras kommer sm -klasserna att styra, som vi ser i följande bild:

FÖRSTORA

Vi ser att i samma storlek som det första exemplet, i stället för att staplas, blir kolumnerna A och B i samma region och kolumn C tar en enda rad för sig själv. Här ser vi den stora nyttan av Rutnät särskilt med mönster som är inriktade på att vara lyhörd och mobil.
Med detta avslutar vi denna handledning, där vi har lärt oss hur systemet med Rutnät av BootstrapNaturligtvis är detta bara toppen av isberget, det finns mycket mer innehåll som vi kan utforska i andra självstudier, men med denna grundläggande kunskap kan vi börja se hur vi anpassar våra mönster på ett mer logiskt sätt och med mindre ansträngning tack vare ramverket.Gillade du och hjälpte denna handledning?Du kan belöna författaren genom att trycka på den här knappen för att ge honom en positiv poäng