Grille Bootstrap 5 : appareils ultra-grands

Exemple de grille d'appareil extra-grand

XSmall Small Medium Large Extra Large XXL
Préfixe de classe .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
Largeur d'écran <576px >=576px >=768px >=992px >=1200px >=1400px

Dans le chapitre précédent, nous avons montré un exemple de grille contenant des classes applicables aux appareils de petite, moyenne et grande taille. Nous avons utilisé deux div (colonnes) et avons réalisé une division de 25%/75% sur les appareils de petite taille, de 50%/50% sur les appareils de taille moyenne, et de 33%/66% sur les appareils de grande taille :

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

Mais sur les appareils xlarge, un design de division 20% / 80% pourrait être mieux.

Les appareils extra-grands sont définis comme ayant une largeur d'écran de 1200 pixels et plus.

Pour les appareils xlarge, nous utiliserons .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>

L'exemple suivant entraînera la division de 25%/75% sur les appareils de petite taille, de 50%/50% sur les appareils de taille moyenne, de 33%/66% sur les appareils de grande taille, et de 20%/80% sur les appareils xlarge et xxlarge. Sur les appareils extrêmement petits, il s'enchevêtrera automatiquement (100%) :

Exemple

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">
      <p>Le Fonds mondial pour la nature (WWF), fondé le 29 avril 1961, son logo est un panda géant ...</p>
    </div>
    <div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">
      <p>En 1980, le WWF est officiellement venu en Chine, invité par le gouvernement chinois pour mener des travaux de protection des pandas géants et de leur habitat ...</p>
    </div>
  </div>
</div>

Essayez-le vous-même

Remarque :Assurez-vous que la somme soit toujours de 12.

Utilisez uniquement XLarge

Dans les exemples suivants, nous ne spécifions que .col-xl-6 les classes (sans .col-lg-*,.col-md-* et/ou .col-sm-*）。Cela signifie que les appareils xlarge et xxlarge seront divisés 50/50%. Cependant, pour les appareils de grande, moyenne, petite et extrêmement petite taille, ils seront empilés verticalement (largeur de 100%):

Exemple

<div class="container-fluid">
  <div class="row">
    <div class="col-xl-6">
      <p>Le Fonds mondial pour la nature (WWF), fondé le 29 avril 1961, son logo est un panda géant ...</p>
    </div>
    <div class="col-xl-6">
      <p>En 1980, le WWF est officiellement venu en Chine, invité par le gouvernement chinois pour mener des travaux de protection des pandas géants et de leur habitat ...</p>
    </div>
  </div>
</div>

Essayez-le vous-même

Colonnes de layout automatique

Dans Bootstrap 5, il existe une méthode simple pour créer des colonnes égales pour tous les appareils : il suffit de partir de .col-xl-* Supprimez les nombres et utilisez uniquement sur l'élément col .col-xl Les classes. Bootstrap reconnaîtra le nombre de colonnes, et chaque colonne aura la même largeur.

Si la taille de l'écraninférieur à 1200pxLes colonnes seront empilées horizontalement :

<!-- Deux colonnes : en devices de grande taille et au-delà, elles ont une largeur de 50% -->
<div class="row">
  <div class="col-xl">1 de 2</div>
  <div class="col-xl">2 de 2</div>
</div>
<!-- Quatre colonnes : en devices de grande taille et au-delà, elles ont une largeur de 25% -->
<div class="row">
  <div class="col-xl">1 de 4</div>
  <div class="col-xl">2 de 4</div>
  <div class="col-xl">3 de 4</div>
  <div class="col-xl">4 de 4</div>
</div>

Essayez-le vous-même