Bootstrap 5 rutnätsystem

Grid-system

Bootstrap-grid-systemet är byggt med flexbox och tillåter max 12 kolumner på sidan.

Om du inte vill använda alla 12 kolumner enskilt, kan du kombinera dessa kolumner för att skapa bredare kolumner:

Grid-systemet är snabbt responsivt och kolumnerna kommer att omorganisera sig automatiskt baserat på skärmstorlek.

Se till att summan är 12 eller mindre (det är inte nödvändigt att använda alla 12 tillgängliga kolumner).

Grid-klasser

Bootstrap 5-grid-systemet erbjuder sex klasser:

  • .col- (Upp till storleken liten - skärmens bredd är mindre än 576px)
  • .col-sm- (Lilla enheter - skärmens bredd är 576px eller större)
  • .col-md- (Medelstora enheter - skärmens bredd är 768px eller större)
  • .col-lg- (Stora enheter - skärmens bredd är 992px eller större)
  • .col-xl- (Upp till storleken extra stor - skärmens bredd är 1200px eller större)
  • .col-xxl- (Extra stora enheter - skärmens bredd är 1400px eller större)

Kombinera ovanstående klasser för att skapa mer dynamiska och flexibla layouter.

Tips:Varje klass är skalbar i förhållande, så om du vill sätta samma bredd för sm och md, behöver du bara specificera sm.

Grundstrukturen för Bootstrap 5-grid

Här är grundstrukturen för Bootstrap 5-grid:

/* Kontrollera kolumnbredd och hur de visas på olika enheter */
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
/* Eller låt Bootstrap automatiskt hantera layouten */
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

Prova det själv

Det första exemplet: Skapa en rad (<div class = "row">). Lägg sedan till det nödvändiga antalet kolumner (med .col-*-* klassens etikett). Det första stjärntecknet (*) representerar responsivitet: sm, md, lg, xl eller xxl, medan det andra stjärntecknet representerar ett nummer, och summan av varje rad bör vara 12.

Det andra exemplet: Ge inte varje col Lägg till ett nummer, låt bootstrap hantera layouten för att skapa lika breda kolumner: två "col" Element = 50% bredd för varje kolumn, medan tre kolumner = 33.33% bredd för varje kolumn. Fyra kolumner = 25% bredd osv. Du kan också använda .col-sm|md|lg|xl|xxl Gör kolumnerna responsiva.

Gallerioptioner

Nedanstående tabell sammanfattar hur Bootstrap 5 gallerisystemet fungerar på olika skärmdimensioner:

Supersmalt (<576px) Litet (>=576px) Medelstort (>=768px) Stort (>=992px) Supersktalt (>=1200px) Ekstra stort (>=1400px)
Klassprefiks .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
Galleribeteende Alltid horisontell Vik upp, horisontell ovanför brytpunkten Vik upp, horisontell ovanför brytpunkten Vik upp, horisontell ovanför brytpunkten Vik upp, horisontell ovanför brytpunkten Vik upp, horisontell ovanför brytpunkten
Containerbredd Ingen (auto) 540px 720px 960px 1140px 1320px
Lämplig för Telefon vertikal Telefon horisontell Tablet Bärbar dator Bärbar dator och stationär dator Bärbar dator och stationär dator
Kolumnens # 12 12 12 12 12 12
Gatorbredd 1.5rem (på varje sida av kolumnen .75rem ) 1.5rem (på varje sida av kolumnen .75rem ) 1.5rem (på varje sida av kolumnen .75rem ) 1.5rem (på varje sida av kolumnen .75rem ) 1.5rem (på varje sida av kolumnen .75rem ) 1.5rem (på varje sida av kolumnen .75rem )
Nestbar Ja Ja Ja Ja Ja Ja
Offset Ja Ja Ja Ja Ja Ja
Kolumnsortering Ja Ja Ja Ja Ja Ja