En fait, si vous utilisez récipientet rangée(les versions non-fluides existent toujours) alors tout votre contenu se retrouvera automatiquement dans la colonne centrale de 1024 pixels et vous pourrez utiliser toute la largeur de la page si vous ne le faites pas.. 

Migration du système de grille 

Ensuite, le plus grand changement de classe est le système de grille lui-même. 

Dans la version 2, vous avez généralement créé des grilles de la manière suivante: 

 
Contenu ici
 
Contenu ici
 

Ce code vous donnerait deux conteneurs qui remplissent parfaitement les 12 carrés de la grille horizontalement que toutes les mises en page avaient (typiquement une barre latérale). 

Dans la version 3, la grille de “niveau moyen” est maintenant l'équivalent de la v2 envergureclasses, donc pour réécrire le code précédent pour la V3, procédez comme suit: 

 
Contenu ici
 
Contenu ici
 

Cependant, alors que la version 2 ne comportait qu'un seul niveau de taille de grille, la version 3 en comporte maintenant quatre. Chaque niveau est adapté au périphérique cible principal prévu sur lequel votre produit final sera exécuté.. 

Ces unités de grille sont maintenant nommées comme suit: 

• Extra petits appareils: col-xs- *
• Petits appareils: col-sm- *
• Appareils de taille moyenne: col-md- *
• Gros appareils: col-lg- *

Les requêtes de média sont utilisées en interne pour que BS3 décide quelle classe de grille susmentionnée doit être utilisée, et les différentes tailles sont définies comme suit: 

• Extra petit: largeur d'affichage inférieure à 768 pixels 
• Petit: largeur d'affichage supérieure ou égale à 768 pixels ou inférieure à 992 pixels 
• Moyen: largeur d'affichage supérieure ou égale à 992 pixels ou inférieure à 1 200 pixels 
• Large: largeur d'affichage supérieure ou égale à 1 200 pixels 

Vous pouvez coder plusieurs versions de votre grille pour BS3 afin de décider du type à utiliser pour cibler plusieurs écrans. Par exemple si vous avez fait ce qui suit: 

 
Contenu ici
 
Contenu ici
 
Contenu ici
 
Contenu ici
 
Contenu ici
 
Contenu ici
 
Contenu ici
 
Contenu ici
 

BS3 masquera et affichera les conteneurs selon les besoins, en fonction de la largeur de l'écran du périphérique et du fonctionnement des requêtes de support.. 

Comme avec les versions précédentes du système de grille, il y a 12 colonnes horizontales pour toutes les tailles, de sorte que quelle que soit la taille de la grille affichée, vous obtiendrez toujours 12 grilles sur chaque périphérique.. 

Cependant, la largeur de la colonne change elle-même. Vous devrez peut-être planifier le contenu de ces grilles pour tirer parti des différentes tailles. Les tailles pour chacune d’elles sont les suivantes: 

• col-xs- *= Dimensionnement automatique, pas de dimensions fixes 
• col-sm- *= 60 pixels 
• col-md- *= 78 pixels 
• col-lg- *= 95 pixels 

La marge de gouttière restera dans tous les cas à 15 pixels de chaque côté du conteneur de grille, ce qui donnera une gouttière globale de 30 pixels. Cette taille sera cohérente quel que soit le niveau de grille utilisé. 

L'imbrication et les décalages fonctionnent comme auparavant, mais comme pour les grilles elles-mêmes, ils permettent de renommer légèrement les classes réellement utilisées.. 

Pour appliquer un décalage, utilisez simplement col-md-offset- *, rappelant de remplacer le Marylandavec xs, sm, ou lgau besoin, en fonction de la taille de votre grille. 

La nidification se fait simplement en imbriquant des conteneurs sous le contrôle du col-xx- *classes à l'intérieur l'une de l'autre, où elles se redimensionnent et se comportent comme dans les versions précédentes de BS. 

Les exemples suivants montrent la manière correcte d’atteindre ces deux techniques: 

 Niveau 1: .col-md-9 
 
 Niveau 2: .col-md-6 
 
 Niveau 2: .col-md-6 
 

Cet exemple vous donnera une grille qui ressemble à ceci: 

 .col-md-4 
 
 .col-md-4 .col-md-offset-4 
 
 .col-md-3 .col-md-offset-3 
 
 .col-md-3 .col-md-offset-3 
 
 .col-md-6 .col-md-offset-3 

Cet exemple vous donnera une mise en page comme suit: 

BS3 apporte également quelque chose de nouveau à la table en ce qui concerne la compensation et l'imbrication, et c'est ce qu'on appelle l'ordre des colonnes.. 

Si vous souhaitez que vos colonnes soient présentées dans un ordre différent de celui défini dans votre document HTML, vous pouvez utiliser le nouveau col-xx-pull- *et col-xx-push- *classes pour pousser ou tirer vos mises en grille dans l'ordre que vous voulez. Par exemple: 

8 colonnes de contenu
 
4 colonnes de contenu

Si vous les rendez dans votre document, comme prévu, vous obtiendrez les éléments suivants: 

Si, toutefois, vous modifiez le code ci-dessus pour ajouter des modificateurs push et pull comme suit: 

8 colonnes de contenu
 
4 colonnes de contenu

Lors du rendu de votre document, votre mise en page devrait changer comme suit: 

Enfin, si vous utilisez le Moins Dans les versions CSS de Bootstrap, vous avez le contrôle total sur la taille de la grille en modifiant les variables suivantes: 

• @ grille-colonnes: contrôle le nombre de grilles horizontalement (12 par défaut) 
• @ largeur de gouttière: la marge totale autour de chaque grille (30 pixels par défaut) 
• @ grille-float-breakpoint: la taille minimale en dessous de laquelle nous avons des périphériques «extra petits» (768 pixels par défaut) 

Alors maintenant que nous contrôlons le nouveau système de grille, y a-t-il autre chose à savoir?? 

Les plus astucieux d’entre vous peuvent penser: «Mais c’est fou, avec tous ces multiples jeux de

 
Contenu ici
 
Contenu ici