Bootstrap 5 Raster: Middelgrote apparaten

Voorbeeld van raster voor middelgrote apparaten

XSmall Small Medium Large Extra Large XXL
Voorvoegsel van klasse .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
Schermbreedte <576px >=576px >=768px >=992px >=1200px >=1400px

In het vorige hoofdstuk hebben we een rastervoorbeeld getoond, dat classes voor kleine apparaten bevat. We hebben twee div's (kolommen) gebruikt en hebben hen een 25% / 75% splitsing gegeven:

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

Maar op middelgrote apparaten kan een 50% / 50% splitsingsontwerp beter zijn.

Middelgrote apparaten worden gedefinieerd als schermbreedteVan 768 pixels tot 991 pixels.

Voor middelgrote apparaten zullen we gebruiken .col-md-* Klasse:

<div class="col-sm-3 col-md-6">....</div>
<div class="col-sm-9 col-md-6">....</div>

Op kleine apparaten, gebruik dan een klasse die bevat -sm- klasse. Op middelgrote apparaten, gebruik dan een klasse die bevat -md- klasse.

Het volgende voorbeeld zal resulteren in een 25% / 75% splitsing op kleine apparaten en een 50% / 50% splitsing op middelgrote (en grote, zeer grote en extra grote) apparaten. Op ultra-kleine apparaten zal het automatisch stapelen (100%):

Voorbeeld

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-6">
      <p>De World Wide Fund for Nature (WWF), opgericht op 29 april 1961, heeft als symbool een panda ...</p>
    </div>
    <div class="col-sm-9 col-md-6">
      <p>In 1980 kwam de WWF officieel naar China, uitgenodigd door de Chinese overheid om in China te werken aan de bescherming van de panda en zijn leefomgeving ...</p>
    </div>
  </div>
</div>

Probeer het zelf

Opmerking:Zorg ervoor dat de som gelijk is aan of kleiner is dan 12 (je hoeft niet alle 12 beschikbare kolommen te gebruiken):

enkel Medium

In het volgende voorbeeld hebben we alleen .col-md-6 klasse (zonder .col-sm-*）。 Dit betekent dat middelgrote, grote, extra grote en XXL-apparaten 50% / 50% zullen splitsen, omdat deze klasse zal uitbreiden. Maar voor kleine en ultra-kleine apparaten zullen ze verticaal gestapeld worden (100% breedte):

Voorbeeld

<div class="row">
  <div class="col-md-6">
    <p>De World Wide Fund for Nature (WWF), opgericht op 29 april 1961, heeft als symbool een panda ...</p>
  </div>
  <div class="col-md-6">
    <p>In 1980 kwam de WWF officieel naar China, uitgenodigd door de Chinese overheid om in China te werken aan de bescherming van de panda en zijn leefomgeving ...</p>
  </div>
</div>

Probeer het zelf

Automatische layout kolommen

In Bootstrap 5 is er een eenvoudige manier om voor alle apparaten gelijke breedte kolommen te maken: je hoeft alleen van .col-md-* cijfers te verwijderen en alleen de col-elementen te gebruiken .col-md klasse. Bootstrap herkent hoeveel kolommen er zijn en elke kolom krijgt dezelfde breedte.

Als het schermformaatMinder dan 768px，kolommen zullen horizontaal gestapeld worden:

<!-- Twee kolommen: op apparaten van middelgrote afmetingen en groter zijn dit 50% breedte -->
<div class="row">
  <div class="col-md">1 van 2</div>
  <div class="col-md">2 van 2</div>
</div>
<!-- Vier kolommen: op apparaten van middelgrote afmetingen en groter zijn dit 25% breedte -->
<div class="row">
  <div class="col-md">1 van 4</div>
  <div class="col-md">2 van 4</div>
  <div class="col-md">3 van 4</div>
  <div class="col-md">4 van 4</div>
</div>

Probeer het zelf

Het volgende hoofdstuk zal laten zien hoe je verschillende splitsingspercentages kunt toevoegen aan grote apparaten.