12-kolumners layout

Bootstraps rutnätsystem delar upp sidan i 12 kolumner, vilket ger en flexibel och responsiv layoutstruktur. Detta möjliggör för utvecklare att skapa visuellt tilltalande och välstrukturerade designer som anpassar sig sömlöst till olika skärmstorlekar och enheter.

Rutnätsklasser

• container: Klassen container omsluter och centrerar innehållet inom en behållare med fast bredd. Den tillför utfyllnad, marginal och säkerställer korrekt justering av innehållet;
• row: Klassen row skapar en horisontell grupp av kolumner. Den fungerar som en behållare för kolumner och säkerställer korrekt justering och avstånd mellan dem;
• col: Kolumner inom en rad definieras med klassen col. Utvecklare anger kolumnbredd med hjälp av col-klasser såsom col-6, col-md-4 eller col-lg-3.

Responsiv design

Bootstraps rutnätsystem är utformat för att vara responsivt, vilket gör att innehållet kan anpassas dynamiskt beroende på visningsfönstrets storlek och enhetstyp. Utvecklare kan använda responsiva rutnätsklasser som col-md-6 eller col-lg-4 för att ange kolumnbredder för olika skärmstorlekar, såsom medelstora eller stora enheter.

Observera

I Bootstrap representerar klasserna sm, md, lg och xl olika skärmstorlekar

Exempel

Exempel 1: Grundläggande rutnätslayout

I detta exempel har vi en container med en enda rad som innehåller tre kolumner med lika bredd. Varje kolumn upptar en lika stor del av radens bredd, vilket resulterar i en horisontell layout med tre kolumner.

Exempel 2: Responsiv rutnätslayout

I detta exempel har en container en rad med tre kolumner. De två första kolumnerna (col-md-6) är inställda på att uppta halva radens bredd på medelstora skärmar och större. Den tredje kolumnen (col-md-12) är inställd på att uppta hela radens bredd på medelstora skärmar och större. Detta säkerställer att den tredje kolumnen upptar hela radens bredd.

Resultatet av det responsiva rutnätsbeteendet