✅ Lær at bruge Bootstrap Grid

Indholdsfortegnelse

Kolonne a
Kolonne B
Kolonne C
Kolonne a
Kolonne B
Kolonne C

Bootstrap administrerer en netbaseret struktur eller også kendt som Gitter, som ikke er andet end et layout på skærmen, der hjælper os med at organisere vores elementer, er det som om vi opdelte skærmen i rækker og kolonner og håndterede det som et stort bord.
Denne form for manipulation får os til at tænke på designs på en "unik" måde, og i det øjeblik vi har lidt mere erfaring med at bruge Bootstrap Vi vil begynde at se alt på denne måde, og dermed får vi konsistens og hurtighed i vores måde at arbejde på.
Den første ting at vide er, at dette design af Gitter giver os mulighed for at arbejde på en måde, så vi kan implementere mobilvisninger indfødt, dette naturligvis fra version 3 af Bootstrap, takket være det faktum, at denne version blev bygget med tanke på mobildesign.
I tidligere versioner af rammen skulle klasserne specificeres direkte, så vores design havde evnen til at tilpasse sig opløsninger på mobile enheder, nu de forskellige klasser i Gitter de gør det automatisk.
For at drage fordel af denne funktion skal vi tænke fra små til store, det vil sige, at de klasser, vi anvender, altid skal betragtes som de mindste, og derefter skaleres den til andre opløsninger, det vil sige, hvis vi definerer en sm klasse (lille eller lille), automatisk Bootstrap det forudsætter, at dette er minimumsudtrykket, og at det derefter kan skaleres til md (median) eller til lg (stor).
Inden vi går videre til mere praktiske eksempler, skal vi forstå, hvilke klasser vi kan bruge i kolonnerne i a Gitter Og vi skal også vide, i hvilket tilfælde hver enkelt gælder, på denne måde kan vi, når vi designer vores websted, tage højde for den mindste enhed, vi ønsker at nå.
Med denne tilgang kan vi bygge websteder Mobilvenlig, hvor vigtige de bliver i dag for søgemaskiner og deres resultater, og dermed hjælper os udover at lave gode sider til at tjene nogle point i vores ry SEO, selvfølgelig med samme job.
TelefonskærmeDet er den mindste enhed, der i teorien kan navigere i vores design, selvom telefonernes opløsninger gradvist er blevet konverteret til Full HD, er dette generelt for den højeste ende, mens mellemklassen og det lave område, som i teorien er de fleste opretholder meget lavere opløsninger. Den form for Gitter der gælder for denne sag er: col-xs- og gælder løsninger mindre end bredde 768 pixels.
Tablet skærmeDe er i teorien den næstmindste enhed, takket være dens større andel af størrelsen tilbyder tabletten en større navigationsoverflade, så vi kan bruge lidt mere indhold end med en telefonskærm, udover at generelt foretages navigationen på tablets vandret. Klassen, der gælder for denne enhed, er col-sm- og gælder for opløsninger med bredder større end 768 pixels og under 992 pixels.
Lille skærm udstyrDe er generelt dem, der tilhører de lave områder af stationære og bærbare computere, de kan være udstyr med skærme mindre end 15 tommer, eller som har mere end 10 års levetid, det er også de bærbare computere, der er beregnet til studerende og sektoren med lav købekraft, dette er majoritetssektoren. Klassen, der gælder for denne sag, er col-md- og grænseopløsningerne for bredden er større end 992 pixels og mindre end 1200 pixels.
Stor skærm udstyrHer kan vi dysehul det mest moderne udstyr, og også skærmene på mere end 15 tommer, i denne kategori går ind i det nye udstyr såsom ultrabærbar, 4K-opløsning eller QHD også hvor vi ser overflader større end 1080p. Ved at udelukke bredderne, som vi vil håndtere her, er de større end 1200 pixels, dette mens den næste version af Bootstrap sandsynligvis.
Da vi kender teorien bag systemet Gitter af Bootstrap, Det er godt at begynde at anvende den praktiske anvendelse, men før vi ser koden, skal vi forstå et par begreber mere, vi skal altid efter konvention og bedste praksis bruge et element med klassen beholder, da dette vil oprette beholderen som navnet angiver det for at beholde vores forskellige kolonner. Det andet koncept, som vi skal kende, er, at der altid vil være 12 kolonner, så de forskellige kombinationer, vi laver, skal tage dette tal i betragtning.
I det følgende eksempel skal vi oprette en kode til et layout med 3 store kolonner, vi skal bruge klassen col-md- og da vi ønsker 3 lige store kolonner, når vi deler 12 med 3, får vi tallet 4, så dette vil være størrelsen på hver af vores resulterende kolonner.
Lad os se på koden uden videre:

Bootstrap -gitter

Eksempel på, hvordan man bruger kolonner i bootstrap

Kolonne a

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit augue et laoreet aliquam. Aliquam letter mit in lorem pharetra, ut volutpat magna laoreet. Fusce sed mi ut turpis bibendum dictum.

Kolonne B

Kolonne C

Strukturen er meget enkel, vi har oprettet en div med klassen beholder, og inde i en div med klassen række endelig inden for sidstnævnte har vi oprettet 3 divs med klassen col-md-4 Dette er klassen for små skærme til ikke-bærbare computere, og vi ser, hvordan vi mønter tallet 4, hvilket angiver, at hver div af disse svarer til 4 kolonner i Gitter. Lad os se, hvordan det ser ud, når vi kører i vores browser:

FORSTØRRE

Hvis vi bemærker det, har vi 3 store kolonner, men hvad sker der, når vi reducerer størrelsen til en opløsning, der er lavere end minimumet for den anvendte klasse, da kolonnerne simpelthen vil blive stablet oven på hinanden, som vi ser i følgende billede:

FORSTØRRE

Selvom dette ikke er en dårlig ting, er det nogle gange ikke den adfærd, vi ønsker, at vores design skal tage, for dette kan vi inkludere adfærd direkte med klasser for de forskellige opløsninger, lad os se i følgende kode, hvordan vi ændrer klasserne i forskellige kolonner for at opnå et andet resultat:

Bootstrap -gitter

Eksempel på, hvordan man bruger kolonner i bootstrap

Kolonne a

Kolonne B

Kolonne C

Hvis vi nu bemærker i vores kode, forbliver alt det samme bortset fra vores klasser, hvor vi for kolonner A og B har tilføjet klassen col-sm-6 og for kolonne C klassen col-sm-12, betyder det, at når opløsningen reduceres, vil sm -klasserne styre, som vi ser i følgende billede:

FORSTØRRE

Vi ser, at i samme størrelse som det første eksempel, i stedet for at blive stablet, bliver kolonner A og B i det samme område, og kolonne C tager en enkelt række for sig selv. Her ser vi den store nytteværdi af Gitter især med designs, der er fokuseret på at være lydhøre og mobile.
Med dette afslutter vi denne vejledning, hvor vi har lært, hvordan systemet med Gitter af BootstrapDette er selvfølgelig kun toppen af isbjerget, der er meget mere indhold, som vi kan udforske i andre tutorials, men med denne grundlæggende viden kan vi begynde at se, hvordan vi indretter vores designs på en mere logisk måde og med mindre indsats takket være rammen.Kan du lide og hjælpe denne vejledning?Du kan belønne forfatteren ved at trykke på denne knap for at give ham et positivt punkt