Grille : appareils grands Bootstrap 5

Exemple de grille pour appareils de taille moyenne

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 qui contient des classes pour les appareils de petite taille. Nous avons utilisé deux div (colonnes) et leur avons attribué une séparation de 25% / 75% :

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

Mais sur les appareils de taille moyenne, un design de séparation de 50% / 50% pourrait être meilleur.

Les appareils de taille moyenne sont définis comme la largeur d'écranDe 768 pixels à 991 pixels.

Pour les appareils de taille moyenne, nous utiliserons .col-md-* Classe :

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

Sur les appareils de petite taille, utilisez -sm- de la classe. Sur les appareils de taille moyenne, utilisez -md- de la classe.

L'exemple suivant entraînera une séparation de 25% / 75% sur les appareils de petite taille et une séparation de 50% / 50% sur les appareils de taille moyenne (et grand, très grand et extrêmement grand) :

Exemple

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-6">
      <p>Le Fonds mondial pour la nature (WWF), fondé le 29 avril 1961, a pour symbole un panda géant ...</p>
    </div>
    <div class="col-sm-9 col-md-6">
      <p>En 1980, le WWF est officiellement venu en Chine, invité par le gouvernement chinois pour développer des activités de protection des pandas géants et de leur habitat ...</p>
    </div>
  </div>
</div>

Essayez-le vous-même

Attention :Assurez-vous que la somme est égale ou inférieure à 12 (il n'est pas nécessaire d'utiliser toutes les 12 colonnes disponibles):

Utilisez uniquement Medium

Dans l'exemple suivant, nous ne spécifions que .col-md-6 Classe (sans .col-sm-*) Cela signifie que les appareils de taille moyenne, grande, très grande et XXL seront divisés en 50% / 50% - car ce type s'étendra. Cependant, pour les appareils de petite et très petite taille, ils seront empilés verticalement (largeur de 100%):

Exemple

<div class="row">
  <div class="col-md-6">
    <p>Le Fonds mondial pour la nature (WWF), fondé le 29 avril 1961, a pour symbole un panda géant ...</p>
  </div>
  <div class="col-md-6">
    <p>En 1980, le WWF est officiellement venu en Chine, invité par le gouvernement chinois pour développer des activités de protection des pandas géants et de leur habitat ...</p>
  </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-md-* Supprimez les chiffres et utilisez uniquement sur l'élément col .col-md Bootstrap reconnaîtra le nombre de colonnes et chaque colonne aura la même largeur.

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

<!-- Deux colonnes : en mode grand écran et plus, la largeur est de 50% -->
<div class="row">
  <div class="col-md">1 sur 2</div>
  <div class="col-md">2 sur 2</div>
</div>
<!-- Quatre colonnes : en mode grand écran et plus, la largeur est de 25% -->
<div class="row">
  <div class="col-md">1 sur 4</div>
  <div class="col-md">2 sur 4</div>
  <div class="col-md">3 sur 4</div>
  <div class="col-md">4 sur 4</div>
</div>

Essayez-le vous-même

Le prochain chapitre présentera comment ajouter différentes pourcentages de découpage pour les appareils de grande taille.