Bootstrap 5 Rasterstelsel

Rasterstelsel

Bootstrap rasterstelsel is gebouwd met flexbox en biedt op de pagina maximaal 12 kolommen.

Als je niet alle 12 kolommen apart wilt gebruiken, kun je deze combineren om bredere kolommen te creëren:

Het rasterstelsel reageert snel en de kolommen worden automatisch opnieuw geordend op basis van het schermformaat.

Zorg ervoor dat de som gelijk is aan of kleiner dan 12 (gebruik niet alle 12 beschikbare kolommen).

Rasterklasse

Bootstrap 5 rasterstelsel biedt zes klassen:

  • .col- (Extra kleine apparaten - schermbreedte kleiner dan 576px)
  • .col-sm- (Kleine apparaten - schermbreedte is gelijk aan of groter dan 576px)
  • .col-md- (Middelgrote apparaten - schermbreedte is gelijk aan of groter dan 768px)
  • .col-lg- (Grote apparaten - schermbreedte is gelijk aan of groter dan 992px)
  • .col-xl- (Uitgebreide apparaten - schermbreedte is gelijk aan of groter dan 1200px)
  • .col-xxl- (Extra grote apparaten - schermbreedte is gelijk aan of groter dan 1400px)

Combineer de bovenstaande klassen om een meer dynamische en flexibele lay-out te creëren.

Tip:Elke klasse wordt in verhouding vergroot, dus als je de breedte van sm en md wilt instellen, hoef je alleen sm te specificeren.

De basisstructuur van Bootstrap 5 raster

Hier is de basisstructuur van het Bootstrap 5 raster:

<!-- Beheer kolombreedte, en hoe ze zich op verschillende apparaten tonen -->
<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>
<!-- Of laat Bootstrap de lay-out automatisch verwerken -->
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

Probeer het zelf uit

Eerste voorbeeld: maak een rij (<div class = "row">). Voeg vervolgens het benodigde aantal kolommen toe (met .col-*-* class label). Het eerste ster (*) staat voor responsiviteit: sm, md, lg, xl of xxl, en het tweede ster represents een getal, dat in elke rij opgeteld 12 moet zijn.

Tweede voorbeeld: niet aan elke col Een getal toevoegen, laat bootstrap de lay-out verwerken om gelijke brede kolommen te maken: twee "col" Element = 50% breedte van elke kolom, terwijl drie kolommen = 33.33% breedte van elke kolom. Vier kolommen = 25% breedte enz. U kunt ook .col-sm|md|lg|xl|xxl Maak de kolommen responsief.

Rasteropties

Het onderstaande overzicht summariseert hoe het Bootstrap 5 rasterstelsel werkt op verschillende schermformaten:

Superklein (<576px) Klein (>=576px) Middelgroot (>=768px) Groot (>=992px) Supergroot (>=1200px) Extra groot (>=1400px)
Class voorvoegsel .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
Rastergedrag Altijd horizontaal Vouwen begint, horizontaal boven de brakpunt Vouwen begint, horizontaal boven de brakpunt Vouwen begint, horizontaal boven de brakpunt Vouwen begint, horizontaal boven de brakpunt Vouwen begint, horizontaal boven de brakpunt
Containerbreedte Geen (auto) 540px 720px 960px 1140px 1320px
Geschikt voor Verticale smartphone Horizontale smartphone Tablet Laptop Laptop en desktop Laptop en desktop
Kolom # 12 12 12 12 12 12
Gutter breedte 1.5rem (aan elke zijde van de kolom .75rem) 1.5rem (aan elke zijde van de kolom .75rem) 1.5rem (aan elke zijde van de kolom .75rem) 1.5rem (aan elke zijde van de kolom .75rem) 1.5rem (aan elke zijde van de kolom .75rem) 1.5rem (aan elke zijde van de kolom .75rem)
Nestbaar Ja Ja Ja Ja Ja Ja
Verplaatsing Ja Ja Ja Ja Ja Ja
Kolom sorteren Ja Ja Ja Ja Ja Ja