Grille Bootstrap 5 : appareils grands

Recommandation de cours :

Exemple de grille pour appareils de grande taille 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 >=768px >=992px >=1200px >=1400px

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

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

Mais sur les appareils de grande taille, un design de division de 33% / 66% pourrait être mieux.

Les appareils de grande taille sont définis par la largeur de l'écrande 992 pixels à 1199 pixels.

Pour les appareils de grande taille, nous utiliserons .col-lg-* Classe :

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

Sur les appareils de petite taille, utilisez les classes contenant -sm- de la classe. Sur les appareils de taille moyenne, utilisez les classes contenant -md- de la classe. Sur les appareils de grande taille, utilisez les classes contenant -lg- de la classe.

L'exemple suivant entraînera 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, xlarge et xxlarge. Sur les appareils extrêmement petits, il se pliera automatiquement (100%) :

Exemple

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-6 col-lg-4">
      <p>Le Fonds mondial pour la nature (WWF), fondé le 29 avril 1961, a pour logo un panda géant ...</p>
    </div>
    <div class="col-sm-9 col-md-6 col-lg-8">
      <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>

Essayer par vous-même

Remarque :assurer que la somme est égale ou inférieure à 12 (il n'est pas nécessaire d'utiliser tous les 12 colonnes disponibles):

seulement Large

dans l'exemple suivant, nous ne spécifions que .col-lg-6 classe (sans .col-md-* et/ou .col-sm-*) Cela signifie que les appareils de grande, xlarge et xxlarge seront divisés 50/50%. Cependant, pour les appareils de taille moyenne, petite et extra petite, ils seront empilés verticalement (largeur de 100%):

Exemple

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-6">
      <p>Le Fonds mondial pour la nature (WWF), fondé le 29 avril 1961, a pour logo un panda géant ...</p>
    </div>
    <div class="col-lg-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>

Essayer par vous-même

colonnes de mise en page 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-lg-* supprimer les chiffres et n'utiliser que sur l'élément col .col-lg classe. Bootstrap reconnaîtra le nombre de colonnes et chaque colonne obtiendra la même largeur.

si la taille de l'écraninférieur à 992px, les colonnes seront empilées horizontalement :

<!-- Deux colonnes : une largeur de 50% sur les appareils de grande taille et plus -->
<div class="row">
  <div class="col-lg">1 sur 2</div>
  <div class="col-lg">2 sur 2</div>
</div>
<!-- Quatre colonnes : une largeur de 25% sur les appareils de grande taille et plus -->
<div class="row">
  <div class="col-lg">1 sur 4</div>
  <div class="col-lg">2 sur 4</div>
  <div class="col-lg">3 sur 4</div>
  <div class="col-lg">4 sur 4</div>
</div>

Essayer par vous-même