Exemples de grille bootstrap

Dispositions de grille de base pour vous familiariser avec la construction dans le système de grille Bootstrap.

Trois colonnes égales

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.

.col-md-4
.col-md-4
.col-md-4

Trois colonnes inégales

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.

.col-md-3
.col-md-6
.col-md-3

Deux colonnes

Obtenez deux colonnes en commençant par les ordinateurs de bureau et en évoluant vers les grands ordinateurs de bureau .

.col-md-8
.col-md-4

Pleine largeur, colonne unique

Aucune classe de grille n'est nécessaire pour les éléments pleine largeur.

Deux colonnes avec deux colonnes imbriquées

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.

.col-md-8
.col-md-6
.col-md-6
.col-md-4

Mixte : mobile et ordinateur de bureau

Le système de grille Bootstrap 3 comporte quatre niveaux de classes : xs (téléphones), sm (tablettes), md (ordinateurs de bureau) et lg (ordinateurs de bureau plus grands). 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.

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6

Mixte : mobile, tablette et ordinateur de bureau

.col-xs-12 .col-sm-6 .col-lg-8
.col-xs-6 .col-lg-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4

Dégagement de colonne

Effacez les flottants à des points d'arrêt spécifiques pour éviter les emballages gênants avec un contenu inégal.

.col-xs-6 .col-sm-3
Redimensionnez votre fenêtre ou consultez-la sur votre téléphone pour un exemple.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

Décaler, pousser et tirer les réinitialisations

Réinitialisez les décalages, poussez et tirez à des points d'arrêt spécifiques.

.col-sm-5 .col-md-6
.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0