Grille Bootstrap 5 : appareils extrêmement petits

Exemple de grille d'appareil extrêmement petit

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

Supposons que nous ayons un agencement simple avec deux colonnes. Nous souhaitons que les colonnes soientTousRépartition des appareils 25% / 75%.

Nous ajoutons les classes suivantes aux deux colonnes :

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

L'exemple suivant entraînera un partage de 25% / 75% pour tous les appareils (très petit, petit, moyen, grand, très grand et extrêmement grand).

Exemple

<div class="container-fluid">
  <div class="row">
    <div class="col-3 bg-primary">
      <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-9 bg-dark">
      <p>En 1980, le WWF est officiellement venu en Chine, invité par le gouvernement chinois pour mener des travaux de protection du panda géant et de son habitat...</p>
    </div>
  </div>
</div>

Essayez-le vous-même

Attention :Assurez-vous que le total est égal ou inférieur à 12 (aucune colonne de 12 disponibles n'est nécessaire) :

Pour un split de 33.3% / 66.6%, vous devez utiliser .col-4 et .col-8（Pour un split de 50% / 50%, vous devez utiliser .col-6 et .col-6）：

Exemple

<!-- Split 33.3/66.6% -->
<div class="container-fluid">
  <div class="row">
    <div class="col-4 bg-primary">
      <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-8 bg-dark">
      <p>En 1980, le WWF est officiellement venu en Chine, invité par le gouvernement chinois pour mener des travaux de protection du panda géant et de son habitat...</p>
    </div>
  </div>
</div>
<!-- Split 50/50% -->
<div class="container-fluid">
  <div class="row">
    <div class="col-6 bg-primary">
      <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-6 bg-dark">
      <p>En 1980, le WWF est officiellement venu en Chine, invité par le gouvernement chinois pour mener des travaux de protection du panda géant et de son habitat...</p>
    </div>
  </div>
</div>

Essayez-le vous-même

colonnes de mise en page automatique

Dans Bootstrap 5, il existe une méthode simple pour créercolonnes d'égal largeur：Ne prenez que .col-* Supprimez les nombres et utilisez uniquement sur l'élément col .col Classe. Bootstrap reconnaîtra le nombre de colonnes et chaque colonne aura la même largeur :

<!-- Deux colonnes : largeur de 50% -->
<div class="row">
  <div class="col">1 de 2</div>
  <div class="col">2 de 2</div>
</div>
<!-- Quatre colonnes : largeur de 25% -->
<div class="row">
  <div class="col">1 de 4</div>
  <div class="col">2 de 4</div>
  <div class="col">3 de 4</div>
  <div class="col">4 de 4</div>
</div>

Essayez-le vous-même

Le prochain chapitre montrera comment ajouter différentes proportions de fragmentation pour les appareils de petite taille.