Grille Bootstrap 5 : appareils petits

Exemple de grille pour appareil de petite taille

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 layout simple avec deux colonnes. Pour les appareils de petite taille, nous souhaitons diviser les colonnes en 25% / 75%.

Les appareils de petite taille sont définis par la largeur de l'écranDe 576 pixels à 767 pixels.

Pour les appareils de petite taille, nous utiliserons .col-sm-* Classe.

Nous ajoutons les classes suivantes aux deux colonnes :

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

L'exemple suivant produira une séparation de 25% / 75% sur les appareils de petite taille (ainsi que de taille moyenne, grande, très grande et extra grande). Sur les appareils de très petite taille, il s'empile automatiquement (100%):

Exemple

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

Essayer par 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) :

Pour une séparation de 33.3% / 66.6%, vous devez utiliser .col-sm-4 et .col-sm-8Pour une séparation de 50% / 50%, vous devez utiliser .col-sm-6 et .col-sm-6) :

Exemple

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

Essayer par 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 commencer par .col-sm-* supprimer les chiffres et ne les utiliser que col élémentest utilisée .col-sm La classe. Bootstrap reconnaîtra le nombre de colonnes et chaque colonne aura la même largeur.

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

<!-- Deux colonnes : 50% de largeur sur tous les écrans, à l'exception des appareils ultra-petits (largeur de 100%) -->
<div class="row">
  <div class="col-sm">1 de 2</div>
  <div class="col-sm">2 de 2</div>
</div>
<!-- Quatre colonnes : 25% de largeur sur tous les écrans, à l'exception des appareils ultra-petits (largeur de 100%) -->
<div class="row">
  <div class="col-sm">1 de 4</div>
  <div class="col-sm">2 de 4</div>
  <div class="col-sm">3 de 4</div>
  <div class="col-sm">4 de 4</div>
</div>

Essayer par vous-même

Le prochain chapitre présentera comment ajouter différentes proportions de découpe pour les appareils de taille moyenne.