Échafaudage

Bootstrap est construit sur une grille réactive à 12 colonnes. Nous avons également inclus des mises en page à largeur fixe et fluide basées sur ce système.

Grille 940px par défaut

Le système de grille par défaut fourni dans le cadre de Bootstrap est une grille de 940 pixels de large à 12 colonnes .

Il propose également quatre variantes réactives pour divers appareils et résolutions : téléphone, portrait de tablette, paysage de table et petits ordinateurs de bureau, et grands ordinateurs de bureau à écran large.

< classe div = "ligne" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

Comme illustré ici, une mise en page de base peut être créée avec deux "colonnes", chacune couvrant un certain nombre des 12 colonnes fondamentales que nous avons définies dans le cadre de notre système de grille.

Colonnes de décalage

4 décalage 4

3 décalage 3

8 décalage 4

< classe div = "ligne" > 
  <div class = "span4" > ... </div> 
  <div class = "span4 offset4" > ... </div> 
</div>

Colonnes imbriquées

Avec le système de grille statique (non fluide) de Bootstrap, l'imbrication est facile. Pour imbriquer votre contenu, ajoutez simplement un nouveau .rowet un ensemble de colonnes dans une colonne .span*existante ..span*

Exemple

Niveau 1 de la colonne

Niveau 2

< classe div = "ligne" > 
  < classe div = "span12" > 
    Niveau 1 de la colonne
    < classe div = "ligne" > 
      <div class = "span6" > Niveau 2 </div> 
      <div class = "span6" > Niveau 2 </div> 
    </div>
  </div>
</div>

Personnalisation de la grille

Variable	Valeur par défaut	La description
`@gridColumns`	12	Le nombre de colonnes
`@gridColumnWidth`	60px	Largeur de chaque colonne
`@gridGutterWidth`	20px	Espace négatif entre les colonnes
`@siteWidth`	Somme calculée de toutes les colonnes et gouttières	Compte le nombre de colonnes et de gouttières pour définir la largeur du `.container-fixed()`mixin

Variables en MOINS

Bootstrap contient une poignée de variables permettant de personnaliser le système de grille 940px par défaut, documenté ci-dessus. Toutes les variables de la grille sont stockées dans variables.less.

Comment personnaliser

Modifier la grille signifie changer les trois @grid*variables et recompiler Bootstrap. Modifiez les variables de la grille dans variables.less et utilisez l'une des quatre méthodes documentées pour recompiler . Si vous ajoutez plus de colonnes, assurez-vous d'ajouter le CSS pour ceux de grid.less.

Rester réactif

La personnalisation de la grille ne fonctionne qu'au niveau par défaut, la grille 940px. Pour conserver les aspects réactifs de Bootstrap, vous devrez également personnaliser les grilles dans responsive.less.

Disposition fixe

La mise en page centrée par défaut et simple de 940 pixels de large pour à peu près n'importe quel site Web ou page fourni par un seul fichier <div class="container">.

<corps>
  < classe div = "conteneur" > 
    ...
  </div>
</body>

Aménagement fluide

<div class="container-fluid">donne une structure de page flexible, des largeurs minimales et maximales et une barre latérale gauche. C'est génial pour les applications et les documents.

<div class = "conteneur-fluide" > 
  <div class = "row-fluide" > 
    < classe div = "span2" > 
      <!--Contenu de la barre latérale-->
    </div>
    < classe div = "span10" > 
      <!--Contenu du corps-->
    </div>
  </div>
</div>

Périphériques compatibles

Bootstrap prend en charge une poignée de requêtes multimédias pour vous aider à rendre vos projets plus appropriés sur différents appareils et résolutions d'écran. Voici ce qui est inclus :

Étiquette	Largeur de mise en page	Largeur de colonne	Largeur de gouttière
Smartphones	480px et moins	Colonnes fluides, pas de largeurs fixes
Tablettes portraits	480px à 768px	Colonnes fluides, pas de largeurs fixes
Tablettes paysage	768px à 940px	44px	20px
Défaut	940px et plus	60px	20px
Grand écran	1210px et plus	70px	30px

Ce qu'ils font

Les requêtes multimédias permettent des CSS personnalisés basés sur un certain nombre de conditions (ratios, largeurs, type d'affichage, etc.), mais se concentrent généralement autour de min-widthet max-width.

Modifier la largeur de colonne dans notre grille
Empilez les éléments au lieu de flotter là où c'est nécessaire
Redimensionnez les en-têtes et le texte pour mieux les adapter aux appareils

Utilisation des requêtes média

Bootstrap n'inclut pas automatiquement ces requêtes multimédias, mais les comprendre et les ajouter est très simple et nécessite une configuration minimale. Vous avez quelques options pour inclure les fonctionnalités réactives de Bootstrap :

Utilisez la version responsive compilée, bootstrap-responsive.css
Ajoutez @import "responsive.less" et recompilez Bootstrap
Modifiez et recompilez responsive.less séparément

Pourquoi ne pas simplement l'inclure ? À vrai dire, tout ne doit pas nécessairement être réactif. Au lieu d'encourager les développeurs à supprimer cette fonctionnalité, nous pensons qu'il est préférable de l'activer.

  // Paysage téléphones et vers le bas
  @media ( max - width : 480px ) { ... }     
 
  // Téléphone paysage vers tablette portrait
  @media ( max - width : 768px ) { ... }     
 
  // Tablette portrait vers paysage et bureau
  @media ( min - width : 768px ) et ( max - width : 940px ) { ... }        
 
  // Grand bureau
  @media ( min - largeur : 1200px ) { .. }