Bootstrap 5 Raster

Bootstrap 5 Rastersysteem

Bootstrap rasterstelsel is gebouwd met flexbox, het maximum aantal kolommen op de pagina is 12.

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

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

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

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

Rasterklassen

Bootstrap 5 rasterstelsel heeft zes klassen:

  • .col- (ultrakleine apparaten - schermbreedte kleiner dan 576px)
  • .col-sm- (kleine apparaten - schermbreedte is gelijk aan of groter dan 576px)
  • .col-md- (medium apparaten - schermbreedte is gelijk aan of groter dan 768 pixels)
  • .col-lg- (grote apparaten - schermbreedte is gelijk aan of groter dan 992 pixels)
  • .col-xl- (xlarge apparaten - schermbreedte is gelijk aan of groter dan 1200px)
  • .col-xxl- (xxlarge apparaten - schermbreedte is gelijk aan of groter dan 1400px)

U kunt de bovenstaande klassen combineren om een meer dynamisch en flexibel lay-out te creëren.

Tip:Elke klasse wordt in verhouding vergroot, dus als u wilt dat sm en md Om dezelfde breedte in te stellen, hoeft u alleen maar een specifieke waarde op te geven sm.

De basisstructuur van Bootstrap 5 raster

Hier is de basisstructuur van het Bootstrap 5 raster:

<!-- Beheer kolombreedte en de weergave van deze kolommen op verschillende apparaten -->
<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>

Eerste voorbeeld: maak een rij (<div class="row">). Voeg vervolgens het benodigde aantal kolommen toe (met de juiste .col-*-* klasse-etiket). Het eerste ster (*) staat voor responsiviteit: sm, md, lg, xl of xxl, en het tweede ster staat voor het getal, en de som van de getallen per rij moet 12 zijn.

Tweede voorbeeld: niet voor elke col Een getal toevoegen, in plaats van Bootstrap de lay-out te laten verwerken om gelijke kolommen te maken: twee "col" Element = elke col heeft een breedte van 50%, terwijl drie cols een breedte van 33.33% hebben. Vier kolommen = 25% breedte, enz. Je kunt ook .col-sm|md|lg|xl|xxl Maak de kolommen responsief.

Hieronder hebben we enkele basisvoorbeelden van Bootstrap 5 rasterindelingen verzameld.

Drievoudige kolommen

Het volgende voorbeeld toont hoe je drie gelijke brede kolommen kunt maken op alle apparaten en schermbreedtes:

Voorbeeld

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

Probeer het zelf

Responsieve kolommen

Het volgende voorbeeld toont hoe je van een tablet uit vier gelijke brede kolommen kunt maken en deze kunt uitbreiden tot een ultra-grote desktop.Bij een breedte kleiner dan 576px, worden de kolommen automatisch opgestapeld op mobiele telefoons of schermen:

Voorbeeld

<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>

Probeer het zelf

Twee ongelijke responsieve kolommen

Het volgende voorbeeld toont hoe je op een tablet twee kolommen van verschillende breedte kunt krijgen en deze kunt uitbreiden tot een ultra-grote desktop:

Voorbeeld

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

Probeer het zelf

Tip:Je zult later in deze handleiding leren over Rastersysteem Meer inhoud.