Dispositions de grille de base pour vous familiariser avec la construction dans le système de grille Bootstrap.
Dans ces exemples, la .themed-grid-col
classe est ajoutée aux colonnes pour ajouter des thèmes. Ce n'est pas une classe disponible dans Bootstrap par défaut.
Le système de grille Bootstrap comporte cinq niveaux, un pour chaque gamme d'appareils que nous prenons en charge. Chaque niveau commence à une taille de fenêtre minimale et s'applique automatiquement aux appareils plus grands, sauf en cas de remplacement.
Obtenez trois colonnes de largeur égale en commençant par les ordinateurs de bureau et en évoluant vers les grands ordinateurs de bureau . Sur les appareils mobiles, les tablettes et les versions inférieures, les colonnes s'empileront automatiquement.
Obtenez trois colonnes en commençant par les ordinateurs de bureau et en évoluant vers de grands bureaux de différentes largeurs. N'oubliez pas que les colonnes de la grille doivent totaliser jusqu'à douze pour un seul bloc horizontal. Plus que cela, et les colonnes commencent à s'empiler, quelle que soit la fenêtre d'affichage.
Obtenez deux colonnes en commençant par les ordinateurs de bureau et en évoluant vers les grands ordinateurs de bureau .
Aucune classe de grille n'est nécessaire pour les éléments pleine largeur.
Selon la documentation, l'imbrication est facile - il suffit de placer une rangée de colonnes dans une colonne existante. Cela vous donne deux colonnes commençant par les ordinateurs de bureau et évoluant vers les grands ordinateurs de bureau , avec deux autres (largeurs égales) dans la colonne la plus grande.
Aux tailles d'appareils mobiles, tablettes et versions inférieures, ces colonnes et leurs colonnes imbriquées s'empileront.
Le système de grille Bootstrap v4 comporte cinq niveaux de classes : xs (très petit), sm (petit), md (moyen), lg (grand) et xl (très grand). Vous pouvez utiliser presque n'importe quelle combinaison de ces classes pour créer des mises en page plus dynamiques et flexibles.
Chaque niveau de classes évolue, ce qui signifie que si vous prévoyez de définir les mêmes largeurs pour xs et sm, il vous suffit de spécifier xs.