Bootstrap - Démo Grid
Qu'est-ce qu'une grille?
Dans la conception graphique, une grille est une structure (généralement bidimensionnelle) composée d'une série de lignes droites (verticales, horizontales) qui se croisent utilisées pour structurer le contenu. Il est largement utilisé pour concevoir la mise en page et la structure du contenu dans la conception d'impression. Dans la conception Web, c'est une méthode très efficace pour créer rapidement et efficacement une mise en page cohérente en utilisant HTML et CSS.
Fonctionnement du système de grille Bootstrap
Les systèmes de grille sont utilisés pour créer des mises en page via une série de lignes et de colonnes qui hébergent votre contenu. Voici comment fonctionne le système de grille Bootstrap -
Les lignes doivent être placées dans un .container classe pour un alignement et un rembourrage corrects.
Utilisez des lignes pour créer des groupes horizontaux de colonnes.
Le contenu doit être placé dans les colonnes et seules les colonnes peuvent être les enfants immédiats des lignes.
Classes de grille prédéfinies comme .row and .col-xs-4sont disponibles pour créer rapidement des mises en page de grille. LESS mixins peut également être utilisé pour des mises en page plus sémantiques.
Les colonnes créent des gouttières (espaces entre le contenu des colonnes) via le remplissage. Ce remplissage est décalé en lignes pour la première et la dernière colonne via une marge négative sur.rows.
Les colonnes de la grille sont créées en spécifiant le nombre de douze colonnes disponibles que vous souhaitez couvrir. Par exemple, trois colonnes égales utiliseraient trois.col-xs-4.
Exemple | La description | Lien de téléchargement |
---|---|---|
Grilles | Cet exemple indique la structure de la grille dans Bootstrap. | Télécharger |