Bootstrap 5 griglia: dispositivi ultragrandi

Esempio di griglia per dispositivi extra grandi

XSmall Small Medium Large Extra Large XXL
Prefisso della classe .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
Larghezza dello schermo <576px >=576px >=768px >=992px >=1200px >=1400px

Nel capitolo precedente, abbiamo mostrato un esempio di griglia che include classi per dispositivi di piccola, media e grande dimensione. Abbiamo utilizzato due div (colonne) e abbiamo effettuato una divisione del 25%/75% sui dispositivi di piccola dimensione, una divisione del 50%/50% sui dispositivi di media dimensione e una divisione del 33%/66% sui dispositivi di grande dimensione:

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

Ma su dispositivi xlarge, un disegno di divisione 20%/80% potrebbe essere migliore.

Dispositivi extra grandi sono definiti come schermi con larghezza di 1200 pixel o più grandi.

Per dispositivi xlarge, utilizzeremo .col-xl-* Classe:

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

Esempio che porta a una divisione del 25%/75% su dispositivi di piccola dimensione, 50%/50% su dispositivi di media dimensione, 33%/66% su dispositivi di grande dimensione e una divisione del 20%/80% su dispositivi xlarge e xxlarge. Sui dispositivi extra piccoli, si posiziona automaticamente in griglia (100%):

Esempio

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">
      <p>La Fondazione Mondiale per la Natura (WWF), fondata il 29 aprile 1961, ha come simbolo un panda gigante...</p>
    </div>
    <div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">
      <p>Nel 1980, la WWF è venuta ufficialmente in Cina, è stata invitata dal governo cinese a condurre il lavoro di protezione del panda gigante e del suo habitat...</p>
    </div>
  </div>
</div>

Prova personalmente

Attenzione:Assicurati che la somma sia sempre 12.

Usa solo XLarge

Nell'esempio seguente, specifichiamo solo .col-xl-6 classi (nessuna .col-lg-*,.col-md-* e/o .col-sm-*）。Questo significa che i dispositivi xlarge e xxlarge saranno divisi al 50/50%. Tuttavia, per i dispositivi grandi, medi, piccoli e ultrapiù piccoli, saranno posizionate verticalmente (larghezza del 100%):

Esempio

<div class="container-fluid">
  <div class="row">
    <div class="col-xl-6">
      <p>La Fondazione Mondiale per la Natura (WWF), fondata il 29 aprile 1961, ha come simbolo un panda gigante...</p>
    </div>
    <div class="col-xl-6">
      <p>Nel 1980, la WWF è venuta ufficialmente in Cina, è stata invitata dal governo cinese a condurre il lavoro di protezione del panda gigante e del suo habitat...</p>
    </div>
  </div>
</div>

Prova personalmente

Layout automatico delle colonne

In Bootstrap 5, c'è un modo semplice per creare colonne uniformi per tutti i dispositivi: devi solo partire da .col-xl-* Elimina i numeri e usa solo sulla classe col .col-xl La classe. Bootstrap riconoscerà il numero di colonne e ogni colonna avrà la stessa larghezza.

Se la dimensione dello schermoMeno di 1200px, le colonne si dispongono orizzontalmente:

<!-- Due colonne: in dispositivi sopra grandi sono larghezza del 50% -->
<div class="row">
  <div class="col-xl">1 di 2</div>
  <div class="col-xl">2 di 2</div>
</div>
<!-- Quattro colonne: in dispositivi sopra grandi sono larghezza del 25% -->
<div class="row">
  <div class="col-xl">1 di 4</div>
  <div class="col-xl">2 di 4</div>
  <div class="col-xl">3 di 4</div>
  <div class="col-xl">4 di 4</div>
</div>

Prova personalmente