Bootstrap 5 rutnät

Bootstrap 5 rutnätsystem

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 dem för att skapa bredare kolumner:

span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1
span 4 span 4 span 4
span 4 span 8
span 6 span 6
span 12

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

Se till att summan är 12 eller mindre (om du inte behöver använda alla 12 tillgängliga kolumner).

Grid-klasser

Bootstrap 5-grid-system har sex klasser:

  • .col- (extremt små enheter - skärm bredd är mindre än 576px)
  • .col-sm- (små enheter - skärm bredd är 576px eller större)
  • .col-md- (medelstora enheter - skärm bredd är 768 pixlar eller större)
  • .col-lg- (stora enheter - skärm bredd är 992 pixlar eller större)
  • .col-xl- (xlarge-enheter - skärm bredd är 1200px eller större)
  • .col-xxl- (xxlarge-enheter - skärm bredd är 1400px eller större)

Du kan kombinera de ovanstående klasserna för att skapa en mer dynamisk och flexibel layout.

Tips:Varje klass är skalbar, så om du vill ge sm och md För att sätta samma bredd behöver du bara specificera sm。

Grundstrukturen för Bootstrap 5-grid

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

/* Kontrollera kolumnens bredd 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>
/* Låt Bootstrap hantera layouten automatiskt */
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

Första exemplet: Skapa en rad (<div class="row">). Lägg sedan till det nödvändiga antalet kolumner (med lämpliga .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 det totala antalet i varje rad bör vara 12.

Andra exempel: Ge inte varje col Lägg till ett nummer, låt bootstrap hantera layouten för att skapa lika breda kolumner: två "col" Element = varje col har en bredd på 50%, medan tre cols har en bredd på 33.33%. Fyra kolumner = 25% bredd, och så vidare. Du kan också använda .col-sm|md|lg|xl|xxl Gör kolumnerna responsiva.

Nedan har vi sammanställt några grundläggande exempel på Bootstrap 5 gallerilayout.

Tredjedelskolumner

Nedan visas hur man skapar tre lika breda kolumner på alla enheter och skärmbredder:

Exempel

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

Prova själv

Responsiva kolumner

Nedan visas hur man skapar fyra lika breda kolumner från en surfplatta och utökar till en jättestor datorskärm.På telefoner eller skärmar med en bredd mindre än 576px kommer kolumnerna att staplas automatiskt tillsammans:

Exempel

<div class="row">
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
</div>

Prova själv

Två olika breda responsiva kolumner

Nedan visas hur man får två olika breda kolumner på en surfplatta och utökar till en jättestor datorskärm:

Exempel

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>
</div>

Prova själv

Tips:Du kommer att lära dig mer om detta i den här kursen. Gallerisystem Mer innehåll.