Skab Responsivt Layout med Bootstrap Gitre

Bootstrap er et af de mest populære frontend-frameworks, og en af dets mest kraftfulde funktioner er dets indbyggede gittersystem. Dette system gør det utroligt nemt at oprette responsive websteder, der ser godt ud på alt fra små mobiltelefoner til store desktopskærme. At forstå og mestre Bootstrap Gittersystemet er essentielt for enhver, der arbejder med webdesign og -udvikling.

Gittersystemet er fundamentet for layout i Bootstrap. Det giver dig en struktureret måde at placere indhold på din webside, så det justeres korrekt på tværs af forskellige enheder. Forestil dig din side opdelt i en række usynlige kasser, og gittersystemet hjælper dig med at styre størrelsen og placeringen af disse kasser. Kernen i dette system er brugen af rækker og kolonner.

Hvad er Bootstrap Gittersystemet?

Bootstrap Gittersystemet er baseret på et layout med op til 12 kolonner på tværs af siden. Du kan vælge at bruge alle 12 kolonner individuelt, eller du kan gruppere dem sammen for at skabe bredere kolonner. Dette giver en enorm fleksibilitet i, hvordan du arrangerer dit indhold.

For eksempel kan du have en række med 12 små kolonner (hver fylder 1/12 af bredden), eller du kan have en række med tre kolonner (hver fylder 4/12 – eller 1/3 – af bredden), eller måske en række med to kolonner (en fylder 4/12 og den anden 8/12). Summen af kolonnens bredder i en enkelt række skal altid lægge sammen til 12 for at fylde den fulde bredde.

En af de største fordele ved Bootstrap Gittersystemet er dets responsivitet. Kolonnerne omarrangeres automatisk afhængigt af skærmstørrelsen. Dette betyder, at et layout, der ser perfekt ud på en stor skærm med flere kolonner ved siden af hinanden, automatisk kan stables oven på hinanden på en mindre skærm, så indholdet forbliver læsbart og navigerbart.

Forstå Gitterklasserne

For at gøre dit layout responsivt bruger Bootstrap Gittersystemet fire standardklasser, der målretter forskellige skærmstørrelser. Disse klasser giver dig mulighed for at specificere, hvordan dine kolonner skal opføre sig på forskellige enheder:

• .col-xs-*: Bruges til telefoner (skærme mindre end 768px brede). Disse kolonner er "ekstra små".
• .col-sm-*: Bruges til tablets (skærme lig med eller større end 768px brede). Disse kolonner er "små".
• .col-md-*: Bruges til små laptops (skærme lig med eller større end 992px brede). Disse kolonner er "mellemstore".
• .col-lg-*: Bruges til laptops og desktops (skærme lig med eller større end 1200px brede). Disse kolonner er "store".

Stjernen (*) i klassenavnene erstattes af et tal fra 1 til 12, der angiver, hvor mange af de 12 tilgængelige kolonner den specifikke kolonne skal fylde på den pågældende skærmstørrelse eller derover.

Det virkeligt kraftfulde ved disse klasser er, at de kan kombineres. Ved at kombinere forskellige klasser på den samme <div>-tag kan du skabe utroligt dynamiske og fleksible layouts, der ændrer sig præcist, som du ønsker, på forskellige enhedsstørrelser. For eksempel kan en kolonne være bred på en desktop (.col-lg-6), smallere på en tablet (.col-sm-8) og fylde hele bredden på en mobil (uden en specifik xs-klasse, da sm og op automatisk stakker nedenunder, medmindre xs er angivet).

Oversigt over Gitterklasser og Breakpoints

Forståelsen af disse breakpoints er nøglen til at designe layouts, der fungerer fejlfrit på tværs af alle enheder. Når du bruger en klasse som .col-sm-6, gælder den for skærme, der er 768px brede eller større. På skærme mindre end 768px vil elementet som standard fylde 100% af bredden, medmindre du specifikt definerer en .col-xs-* klasse.

Grundlæggende Struktur af et Bootstrap Gitter

Den grundlæggende struktur for at opbygge et layout med Bootstrap Gittersystemet er meget simpel og følger et klart mønster. Du starter altid med en række og placerer derefter dine kolonner inden i den række.

Strukturen ser typisk således ud:

<div class="row">
 <div class="col-*-*">Indhold i kolonne 1</div>
 <div class="col-*-*">Indhold i kolonne 2</div>
</div>

<div class="row">
 <div class="col-*-*">Indhold i kolonne A</div>
 <div class="col-*-*">Indhold i kolonne B</div>
 <div class="col-*-*">Indhold i kolonne C</div>
</div>

<div class="row">
 ... flere rækker og kolonner
</div>

Først opretter du en række ved at bruge en <div>-tag med klassen .row. Dette element fungerer som en beholder for dine kolonner. Derefter tilføjer du det ønskede antal kolonner inden i denne række ved hjælp af <div>-tags med de passende .col-*-* klasser.

Det er vigtigt at huske, at tallene i .col-*-* klasserne for en given række altid skal lægge sammen til 12. Hvis summen er mindre end 12, vil kolonnerne kun fylde en del af rækken, og der vil være et tomt område. Hvis summen er mere end 12, vil de overskydende kolonner bryde til en ny linje, hvilket typisk ikke er det ønskede layout.

Eksempler på Bootstrap Gittersystemet

Lad os se på et par konkrete eksempler, der illustrerer, hvordan du kan bruge gittersystemet til at oprette almindelige layoutmønstre.

Tre Lige Store Kolonner

Et meget almindeligt layout er at have tre kolonner af samme bredde. For at opnå dette på skærme, der er tablet-størrelse eller større, kan du bruge .col-sm-4. Da 12 divideret med 3 er 4, vil hver kolonne fylde præcis en tredjedel af rækkens bredde.

<div class="row">
 <div class="col-sm-4">Kolonne 1 (sm-4)</div>
 <div class="col-sm-4">Kolonne 2 (sm-4)</div>
 <div class="col-sm-4">Kolonne 3 (sm-4)</div>
</div>

Dette eksempel viser, hvordan du får tre lige store kolonner, der starter ved tablet-størrelse (768px) og skalerer op til store desktops. På mobiltelefoner eller skærme, der er mindre end 768px brede, vil kolonnerne automatisk stables oven på hinanden, da der ikke er angivet en .col-xs-* klasse. Dette sikrer, at indholdet forbliver let at læse på små skærme.

To Ulige Store Kolonner

Et andet typisk scenarie er at have to kolonner med forskellig bredde. Lad os sige, du vil have en kolonne, der fylder en tredjedel af bredden, og en anden, der fylder to tredjedele. Du kan opnå dette ved at bruge .col-sm-4 og .col-sm-8.

<div class="row">
 <div class="col-sm-4">Kolonne A (sm-4)</div>
 <div class="col-sm-8">Kolonne B (sm-8)</div>
</div>

Dette eksempel viser, hvordan du får to kolonner med forskellig bredde, der starter ved tablet-størrelse og skalerer op. Ligesom i det foregående eksempel vil disse kolonner automatisk stable på skærme, der er smallere end 768px, medmindre du specificerer .col-xs-* klasser.

Ved at kombinere klasser kan du finjustere adfærden yderligere. For eksempel, hvis du ville have de ulige kolonner på tablet og desktop, men to lige store kolonner på mobil, kunne du skrive:

<div class="row">
 <div class="col-xs-6 col-sm-4">Kolonne A</div>
 <div class="col-xs-6 col-sm-8">Kolonne B</div>
</div>

Her vil på skærme < 768px (xs) begge kolonner fylde 6/12 (halvdelen) af bredden. På skærme ≥ 768px (sm og op) vil den første kolonne fylde 4/12, og den anden 8/12.

Ofte Stillede Spørgsmål om Bootstrap Gitre

At arbejde med gittersystemet kan rejse et par spørgsmål, især når man er ny. Her er svar på nogle almindelige spørgsmål:

Hvorfor 12 kolonner?

Tallet 12 er valgt, fordi det er et meget fleksibelt tal, der kan divideres med mange andre tal (1, 2, 3, 4, 6 og 12). Dette gør det nemt at oprette et bredt udvalg af layoutdivisioner (halvdele, tredjedele, fjerdedele osv.) ved at bruge heltal som kolonnebredder.

Hvordan fungerer responsiviteten præcist?

Responsiviteten opnås gennem medieforespørgsler (media queries) i Bootstrap's CSS. Hver gitterklasse (sm, md, lg) er defineret til at gælde for skærme, der er større end eller lig med et bestemt breakpoint. Når skærmen falder under et breakpoint, gælder den tilhørende klasse ikke længere, og browseren bruger derefter reglerne for det næste mindre breakpoint eller standardadfærd (typisk 100% bredde), medmindre en specifik klasse for den mindre størrelse er defineret.

Kan jeg have mere end 12 kolonner i alt på min side?

Ja, du kan have utallige kolonner på din side, men summen af kolonnebredderne (tallet efter .col-*-) inden for en enkelt .row skal altid lægge sammen til 12 for at fylde rækken korrekt. Hvis du har brug for mere indhold, opretter du blot en ny <div class="row"> nedenunder den første og tilføjer nye kolonner der.

Hvad sker der, hvis mine kolonner i en række ikke lægger sammen til 12?

Hvis summen er mindre end 12, vil der være et tomt rum i slutningen af rækken. Hvis summen er mere end 12, vil de overskydende kolonner "bryde" til næste linje inden for den samme række. Selvom dette er standard Bootstrap-adfærd, bruges det sjældent til tilsigtet layout og bør normalt undgås ved at sikre, at dine kolonnebredder summer til 12 i hver række.

Skal jeg altid bruge alle fire breakpoint-klasser?

Nej, du behøver kun at bruge de klasser, der er nødvendige for dit design. Hvis du kun bruger .col-md-6, vil kolonnen fylde halvdelen af bredden på skærme ≥ 992px og stable på skærme < 992px. Hvis du kun bruger .col-xs-12, vil kolonnen altid fylde hele bredden, uanset skærmstørrelse.

Bootstrap Gittersystemet er et utroligt effektivt værktøj til at opbygge moderne, responsive websteder. Ved at mestre brugen af rækker, kolonner og de forskellige breakpoint-klasser kan du skabe komplekse og fleksible layouts, der ser professionelle ud på enhver enhed. Øvelse og eksperimentering med de forskellige klasse-kombinationer er den bedste måde at blive fortrolig med systemet på.

Hvis du vil læse andre artikler, der ligner Skab Responsivt Layout med Bootstrap Gitre, kan du besøge kategorien Fotografi.