Bootstrap 5 Grid: Large Devices

Aanbevolen cursus:

Grote apparaat rastervoorbeeld XSmall Small Medium Large Extra Large
XXL Class voorvoegsel .col- .col-sm- .col-md- .col-lg- .col-xl-
.col-xxl- Schermbreedte <576px >=768px >=992px >=1200px >=1400px

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

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

Maar op grote apparaten kan een ontwerp met een splitsing van 33% / 66% beter zijn.

Grote apparaten worden gedefinieerd als schermbreedtevan 992 pixels tot 1199 pixels.

Voor grote apparaten zullen we .col-lg-* klasse:

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

Gebruik op kleine apparaten, klasse die bevat -sm- klasse. Gebruik op middelgrote apparaten, klasse die bevat -md- klasse. Gebruik op grote apparaten, klasse die bevat -lg- klasse.

Het volgende voorbeeld zal leiden tot een splitsing van 25%/75% op kleine apparaten, 50%/50% op middelgrote apparaten en 33%/66% op grote, xlarge en xxlarge apparaten. Op superkleine apparaten zal het automatisch stapelen (100%):

Voorbeeld

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-6 col-lg-4">
      <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 col-lg-8">
      <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 leefgebied ...</p>
    </div>
  </div>
</div>

Probeer het zelf

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

Alleen Large

In het volgende voorbeeld specificeren we alleen .col-lg-6 klasse (zonder .col-md-* en/or .col-sm-*Dit betekent dat grote, xlarge en xxlarge apparaten 50/50 worden gesplitst. Maar voor middelgrote, kleine en ultrakleine apparaten wordt het verticaal gestapeld (100% breedte):

Voorbeeld

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-6">
      <p>De World Wide Fund for Nature (WWF), opgericht op 29 april 1961, heeft als symbool een panda ...</p>
    </div>
    <div class="col-lg-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 leefgebied ...</p>
    </div>
  </div>
</div>

Probeer het zelf

Automatische lay-outkolommen

In Bootstrap 5 is er een eenvoudige manier om voor alle apparaten gelijke breedtekolommen te maken: je hoeft alleen van .col-lg-* Het cijfer verwijderen in de klasse en alleen op het col-element gebruiken .col-lg Bootstrap herkent hoeveel kolommen er zijn en elke kolom krijgt dezelfde breedte.

Als de schermgrootteMinder dan 992pxKolommen zullen horizontaal worden gestapeld:

<!-- Twee kolommen: op apparaten van groot formaat of groter is de breedte 50% -->
<div class="row">
  <div class="col-lg">1 van 2</div>
  <div class="col-lg">2 van 2</div>
</div>
<!-- Vier kolommen: op apparaten van groot formaat of groter is de breedte 25% -->
<div class="row">
  <div class="col-lg">1 van 4</div>
  <div class="col-lg">2 van 4</div>
  <div class="col-lg">3 van 4</div>
  <div class="col-lg">4 van 4</div>
</div>

Probeer het zelf