Lær Bootstrap 4 Grid System på 10 minutter

Bootstrap 4 Grid System bruges til lydhør layout.

Et responsivt layout repræsenterer den måde, hvorpå elementer justeres på siden i forskellige opløsninger. Det er vigtigt, at du forstår, hvordan du bruger nettet, før du lærer om andre Bootstrap 4-komponenter, for uanset hvilket element du bruger, skal du placere det et eller andet sted på skærmen.

Lad os komme igang!

Indholdsfortegnelse

  • Bootstrap 4 containere
  • Bootstrap 4 rækker
  • Bootstrap 4 kolonner
  • Yderligere læsning

Bootstrap 4-gitteret består af containere, rækker og kolonner. Vi tager dem en efter en og forklarer dem.

Bootstrap 4 containere

En Bootstrap 4 container er et element med klassen .container. Containeren er roden til Bootstrap 4-gittersystemet, og den bruges til at kontrollere layoutets bredde.

Bootstrap 4-containeren indeholder alle elementerne på en side. Det betyder, at din side skal have følgende struktur: Først skal HTML-sideens brødtekst, indeni den skal du tilføje containeren og alle de andre elementer inde i containeren.

 ... 

Den enkle .containerklasse indstiller bredden på layoutet afhængigt af skærmens bredde. Det placerer indholdet midt på siden og justerer det vandret. Der er lige mellemrum mellem Bootstrap 4-containeren og venstre og højre kant af siden.

De .containerskalaer ned i bredde som skærmens bredde indsnævres og bliver fuld bredde på mobilen. Containerens bredde er defineret inde i Bootstrap 4-biblioteket for hver skærmstørrelse. Du kan se de nøjagtige størrelser her.

En container i fuld bredde tager 100% af skærmstørrelsen uanset skærmbredden. For at bruge det skal du tilføje klassen. container-fluid.

 Hello! I am in a simple container. Hello! I am in a full-width container. 

Du kan se CodePen her.

For at se forskellene mellem de to typer containere kan du åbne pennen i din konsol og skifte mellem skærmstørrelser.

Bootstrap 4 rækker

Bootstrap 4 rækker er vandrette udsnit af skærmen. De bruges kun som indpakning til kolonner. For at bruge dem har du brug for .rowklassen.

 ... 

Her er de vigtigste ting, du skal huske på Bootstrap 4-rækker:

  • De bruges kun til at indeholde kolonner. Hvis du placerer andre elementer inde i rækken sammen med kolonner, får du ikke det forventede resultat.
  • De skal placeres i containere. Hvis du ikke gør dette, får du en vandret rulle på din side. Dette sker, fordi rækker har negative venstre og højre margener på 15. Containeren har 15 px udfyldninger, så det modvirker margenerne.
  • Kolonnerne skal være børn i rækken. Ellers justeres de ikke. Rækkerne og kolonnerne er oprettet for at arbejde sammen i dette strenge hierarki.

Bootstrap 4 kolonner

Vi kan nu komme til den pæne del af denne tutorial, Bootstrap 4-kolonnerne. Kolonner er gode! De hjælper dig med at opdele skærmen vandret.

Hvis du placerer en enkelt kolonne i din række, tager den hele bredden. Hvis du tilføjer to kolonner, tager de hver 1/2 fra bredden. Og så gælder det for et hvilket som helst antal kolonner.

 ... ... ... ... ... ... ... ... 

Du kan se koden live på CodePen.

Sidebemærkning: Kolonner er ikke farvede. Jeg har lige tilføjet farver for en mere visuelt overbevisende beskrivelse / så de ser smukke ud.

Indstilling af størrelser for kolonner

Brug af .colklassen indstiller bredden for søjlen dynamisk. Det betyder, at bredden af ​​en kolonne vil være bredden på containeren afhængigt af antallet af kolonner i en række divideret med antallet af kolonner.

Men der er en anden måde at definere kolonner på. Du kan bruge klasser til kolonner og definere deres størrelse.

Som standard består Bootstrap 4-gitteret af 12 kolonner. Du kan vælge en hvilken som helst størrelse fra 1 til 12 til din kolonne. Hvis du vil have 3 lige søjler, kan du bruge .col-4til hver (fordi 3 * 4 søjler hver = 12). Eller du kan indstille forskellige størrelser til dem. Her er nogle eksempler:

 ... ... ... ... ... ... ... ... 

Du kan se koden live på CodePen.

Hvis summen af ​​cols i din række ikke når op på 12, udfylder de ikke hele rækken. Hvis summen af ​​kolonnerne går ud over 12, flyttes den til næste linje. Den første linje viser kun de første elementer, der tilføjer op til 12 eller lavere.

Indstilling af breakpoints for kolonner

Hvis du tager eksemplet ovenfor og vil vise det på mobilenheder, kan du støde på nogle problemer. Visning af fem kolonner på mobilen gør indholdet ulæseligt.

Det er her, en af ​​de mest kraftfulde Bootstrap 4-komponenter kommer i spil. For at have forskellige layouts på forskellige skærme behøver du ikke skrive medieforespørgsler, i stedet kan du bruge kolonnens breakpoints.

Et brudpunkt er en Bootstrap 4-variabel, der står for en skærmopløsning. Når du angiver et brudpunkt for en klasse, fortæller du klassen, at den kun skal være aktiv for opløsninger, der er mindst lige så store som antallet, som brudpunktet indeholder.

Den enkleste klasse, som vi vil lære om, er .col-[breakpoint]klassen. Når du bruger denne klasse, definerer du kun kolonnernes opførsel, når de vises på enheder, der har en opløsning på mindst det definerede brudpunkt. Op til det givne brudpunkt justeres dine søjler som standard lodret. Og efter dit brudpunkt vil de justere vandret på grund af klassen.

Bootstrap har 4 breakpoints, som du kan bruge:

  • .col-sm til større mobiltelefoner (enheder med opløsninger ≥ 576 px);
  • .col-md til tabletter (≥768px);
  • .col-lg til bærbare computere (≥992 px)
  • .col-xl til desktops (≥1200 px)

Lad os sige, at du vil vise to kolonner efter hinanden lodret på små skærme og på samme linje på større skærme. Du bliver nødt til at angive det brudpunkt, hvor kolonnerne går på den samme linje.

I vores eksempel bruger vi .col-lgbrudpunktet og ser, hvordan kolonnerne ser ud på forskellige skærme. For opløsninger, der er lavere end det givne brudpunkt (<992px), vises kolonnerne lodret. Det betyder, at på mobile enheder og tablets vil kolonnerne se sådan ud:

Og for enheder, der har en opløsning, der er højere eller lig med brudpunktet (≥992px), går kolonnerne i samme række. Dette betyder, at på bærbare computere og desktops får du dette resultat:

 ... ... 

Du kan se koden live på CodePen.Hvis du åbner Codepen i et andet vindue og ser siden i forskellige opløsninger, vil du se kolonnerne ændre deres placering.

Hvis du ville have, at de 2 kolonner skulle gå på samme linje startende med større mobiltelefoner, ville du bruge .col-smtil tablets .col-mdog til ekstra store skærme .col-xl.

Indstilling af størrelser og brudpunkter for kolonner

Du kan kombinere størrelser og breakpoints og bruge en enkelt klasse med formatet .col-[breakpoint]-[size].

Hvis du f.eks. Vil have, at tre kolonner i forskellige størrelser skal justeres på en række, der starter med den bærbare computers opløsning, skal du gøre dette:

 ... ... ... 

Du får dette resultat på opløsninger <992px:

Og for skærme, der er ≥992 px:

Igen kan du se koden live på CodePen.

Men hvad hvis du vil vise en kolonne pr. Række på små mobilopløsninger, to kolonner pr. Række på tablets og fire på bærbare computere eller enheder med højere opløsninger?

Derefter tilføjer du flere klasser til en enkelt kolonne for at beskrive adfærd for hver opløsning. Ved hjælp af flere klasser angiver du, at indholdet vil tage seks slots på tablets og tre på bærbare computere.

 ... ... ... ... 

Resultatet vises således på tabletter:

Og sådan her på bærbare computere og højere opløsninger:

Dette eksempel er også live på CodePen.

Som en øvelse kan du prøve at oprette rækker med forskelligt antal kolonner afhængigt af skærmstørrelsen og kontrollere opførslen i din browserkonsol.

Modregning af kolonner

Hvis du ikke vil have, at dine kolonner skal være ved siden af ​​hinanden, kan du bruge klassen .offset-[breakpoint]-[size]sammen med .col-[breakpoint]-[size].

Brug af denne klasse er det samme som at tilføje en tom kolonne før din kolonne. Her er et simpelt eksempel:

 ... ... 

Du kan se koden live på CodePen.

Du kan bruge klassen i en hvilken som helst kolonne i rækken. Her er nogle flere eksempler:

 ... ... ... ... ... 

Indlejrende søjler

Dette kan komme som en overraskelse, men du kan tilføje en række inde i en kolonne!

Den pågældende række (som har bredden på den overordnede kolonne) vil derefter blive opdelt i 12 (mindre) kolonner, som du kan henvise til gennem .col-* klasserne.

Lad os se på, hvad der sker, når vi indsætter en ny række inde i en kolonne:

 ... ... ... ... 

Du kan se koden live på CodePen.

Når du ved dette, kan du gå mange niveauer dybt for at organisere dine oplysninger. Kolonnerne giver dig en enkel måde at administrere dit rum på.

Dette indpakker den grundlæggende viden om Bootstrap 4-responsivt gittersystem. Hvis du har spørgsmål, så lad mig det vide i kommentarerne, jeg svarer gerne.

Yderligere læsning

Hvis du har mere tid, er her nogle nyttige ressourcer:

  • Officiel netdokumentation fra GetBootstrap
  • Video tutorial fra Scrimba

Denne artikel blev oprindeligt udgivet på BootstrapBay Blog. Det er en del af en større række Bootstrap 4-tutorials kaldet 14 Days of Bootstrap 4. Hvis du vil fortsætte med at lære om Bootstrap 4-komponenterne, er disse artikler et godt sted at starte.

Og hvis du vil starte din udvikling med en Bootstrap-skabelon, kan du tjekke vores markedsplads.

Men inden du dyber dybere, skal du tage et øjeblik på at fejre dine nytilegnede færdigheder !?