12-kolonne layout

Bootstraps gitter-system opdeler siden i 12 kolonner, hvilket giver en fleksibel og responsiv layoutstruktur. Dette gør det muligt for udviklere at skabe visuelt tiltalende og velstrukturerede designs, der tilpasser sig problemfrit til forskellige skærmstørrelser og enheder.

Gitterklasser

• container: Klassen container omslutter og centrerer indholdet i en container med fast bredde. Den tilføjer polstring, margin og sikrer korrekt justering af indholdet;
• row: Klassen row opretter en horisontal gruppe af kolonner. Den fungerer som en beholder for kolonner og sikrer korrekt justering og afstand mellem dem;
• col: Kolonner inden for en række defineres ved hjælp af klassen col. Udviklere angiver kolonnebredden ved at bruge col-klasser som col-6, col-md-4 eller col-lg-3.

Responsivt design

Bootstraps gitter-system er designet til at være responsivt, så indholdet kan tilpasse sig dynamisk baseret på visningsportens størrelse og enhedstype. Udviklere kan bruge responsive gitterklasser som col-md-6 eller col-lg-4 for at angive kolonnebredder til forskellige skærmstørrelser, såsom mellemstore eller store enheder.

Bemærk

I Bootstrap repræsenterer klasserne sm, md, lg og xl forskellige skærmstørrelser

Eksempler

Eksempel 1: Grundlæggende gitterlayout

I dette eksempel har vi en container med en enkelt række, der indeholder tre kolonner med samme bredde. Hver kolonne optager en lige stor del af rækkens bredde, hvilket resulterer i et horisontalt layout med tre kolonner.

Eksempel 2: Responsivt gitterlayout

I dette eksempel har en container én række med tre kolonner. De første to kolonner (col-md-6) er indstillet til at optage halvdelen af rækkens bredde på mellemstore skærme og derover. Den tredje kolonne (col-md-12) er indstillet til at optage hele rækkens bredde på mellemstore skærme og derover. Dette sikrer, at den tredje kolonne optager hele rækkens bredde.

Resultatet af det responsive gitter's opførsel