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.

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

Les lignes imbriquées doivent inclure un ensemble de colonnes qui totalisent le nombre de colonnes de son parent. .span3Par exemple, deux colonnes imbriquées doivent être placées dans un fichier .span6.

< 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>

Des pourcentages, pas des pixels

Le système de grille fluide utilise des pourcentages pour les largeurs de colonne au lieu de pixels fixes. Il a également les mêmes variations réactives que notre système de grille fixe, garantissant des proportions appropriées pour les résolutions d'écran et les appareils clés.

Lignes fluides

Rendez n'importe quelle ligne fluide en changeant simplement .rowen .row-fluid. Les colonnes restent exactement les mêmes, ce qui permet de basculer très facilement entre les mises en page fixes et fluides.

Balisage

<div class = "row-fluide" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

L'imbrication avec des grilles fluides est un peu différente : le nombre de colonnes imbriquées n'a pas besoin de correspondre au parent. Au lieu de cela, vos colonnes sont réinitialisées à chaque niveau, car chaque ligne occupe 100 % de la colonne parente.

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

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 dans un seul fichier pour vous aider à rendre vos projets plus appropriés sur différents appareils et résolutions d'écran. Voici ce qui est inclus :

Nécessite une balise méta

Pour vous assurer que les appareils affichent correctement les pages réactives, incluez la balise Meta de la fenêtre d'affichage.

<meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  

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

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 :

1. Utilisez la version responsive compilée, bootstrap-responsive.css
2. Ajoutez @import "responsive.less" et recompilez Bootstrap
3. Modifier et recompiler responsive.less dans un fichier séparé

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 : 980px ) { ... }        
 
  // Grand bureau
  @media ( min - largeur : 1200px ) { .. }