17. Utilisation de grilles et de conteneurs dans Bootstrap

Bootstrap est l'un des outils les plus populaires en matière de développement Web front-end. Il est connu pour sa facilité d’utilisation et son efficacité dans la création de sites Web réactifs. L'une des fonctionnalités les plus notables de Bootstrap est l'utilisation de grilles et de conteneurs. Dans ce chapitre, nous aborderons l'utilisation des grilles et des conteneurs dans Bootstrap.

Comprendre le conteneur

Les conteneurs dans Bootstrap sont des éléments fondamentaux pour créer des mises en page réactives. Ce sont les éléments de base de toute page Web Bootstrap. Un conteneur est simplement un div avec la classe .container ou .container-fluid. La différence entre les deux est que .container a une largeur maximale fixe en pixels sur différentes tailles d'écran, tandis que .container-fluid s'étend pour remplir la largeur de l'écran.

<div class="conteneur">
  <!-- Contenu --->
</div>

<div class="conteneur-fluide">
  <!-- Contenu --->
</div>

Comprendre la grille

Bootstrap utilise un système de grille pour créer des mises en page. La grille est divisée en 12 colonnes, vous permettant de créer facilement des mises en page complexes et réactives. Les classes de grille sont appliquées aux divs pour contrôler la mise en page. Les classes vont de .col- (pour les très petits appareils comme les téléphones) à .col-xl- (pour les très grands appareils comme les téléviseurs à grande échelle).

<div class="ligne">
  <div class="col-">
    <!-- Contenu --->
  </div>
  <div class="col-">
    <!-- Contenu --->
  </div>
</div>

Utiliser ensemble des grilles et des conteneurs

Pour créer une mise en page réactive dans Bootstrap, vous commencez généralement par un conteneur. À l'intérieur de ce conteneur, vous créez une « ligne », qui est une ligne horizontale contenant des colonnes. Devant les lignes, vous placez vos colonnes, où va réellement votre contenu. La somme totale des colonnes d'une ligne doit être égale à 12.

<div class="conteneur">
  <div class="ligne">
    <div class="col-6">
      <!-- Contenu --->
    </div>
    <div class="col-6">
      <!-- Contenu --->
    </div>
  </div>
</div>

Dans cet exemple, nous avons deux colonnes occupant chacune la moitié de la largeur de l'écran (6/12) sur toutes les tailles d'écran. Vous pouvez ajuster le nombre après « col- » pour contrôler la largeur de la colonne sur différentes tailles d'écran.

Conclusion

Les grilles et conteneurs Bootstrap sont des outils puissants qui vous permettent de créer facilement des mises en page complexes et réactives. Ils constituent la base de toute page Web Bootstrap et sont essentiels à comprendre si vous souhaitez devenir un développeur front-end efficace. Avec de la pratique, vous serez en mesure de créer facilement des mises en page pleine page, en utilisant uniquement des grilles et des conteneurs.

J'espère que ce chapitre vous a permis de bien comprendre comment utiliser les grilles et les conteneurs dans Bootstrap. Dans le chapitre suivant, nous explorerons d'autres composants Bootstrap et comment ils peuvent être utilisés pour améliorer davantage vos sites Web.

Page suivante de lebook gratuit :

64Composants Bootstrap : boutons, formulaires, carrousel

0 minutes