Amorcer

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

Styles globaux pour la réinitialisation CSS, la typographie et les liens

Nécessite un type de document HTML5

Bootstrap utilise des éléments HTML et des propriétés CSS qui nécessitent l'utilisation du doctype HTML5. Assurez-vous de l'inclure au début de chaque page Bootstrap de votre projet.

  1. <!DOCTYPE html>
  2. <html lang = "fr" > 
  3.   ...
  4. </html>

Typographie et liens

Dans le fichier scaffolding.less , nous définissons les styles d'affichage, de typographie et de lien globaux de base. Plus précisément, nous :

  • Supprimer la marge sur le corps
  • Fixé background-color: white;sur lebody
  • Utilisez les attributs @baseFontFamily, @baseFontSizeet @baseLineHeightcomme base typographique
  • Définissez la couleur globale du lien via @linkColoret appliquez le soulignement du lien uniquement sur:hover

Réinitialiser via Normaliser

Depuis Bootstrap 2, la réinitialisation CSS traditionnelle a évolué pour utiliser des éléments de Normalize.css , un projet de Nicolas Gallagher qui alimente également HTML5 Boilerplate .

La nouvelle réinitialisation peut toujours être trouvée dans reset.less , mais avec de nombreux éléments supprimés pour plus de brièveté et de précision.

Système de grille par défaut 12 colonnes avec une torsion réactive

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

Le système de grille par défaut fourni dans Bootstrap utilise 12 colonnes qui s'affichent à des largeurs de 724px, 940px (par défaut sans CSS réactif inclus) et 1170px. Sous les fenêtres de 767 pixels, les colonnes deviennent fluides et s'empilent verticalement.

  1. < classe div = "ligne" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </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
4 décalage 4
3 décalage 3
3 décalage 3
8 décalage 4 
  1. < classe div = "ligne" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset4" > ... </div> 
  4. </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

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.

Niveau 1 de la colonne
Niveau 2
Niveau 2 
  1. < classe div = "ligne" > 
  2.   < classe div = "span6" > 
  3.     Colonne de niveau 1
  4.     < classe div = "ligne" > 
  5.       <div class = "span3" > Niveau 2 </div> 
  6.       <div class = "span3" > Niveau 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Système de grille fluide 12 colonnes réactives basées sur un pourcentage

Colonnes fluides

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

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

  1. <div class = "row-fluide" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

Imbrication fluide

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.

Fluide 12
Fluide 6
Fluide 6 
  1. <div class = "row-fluide" > 
  2.   < classe div = "span12" > 
  3.     Niveau 1 de la colonne
  4.     <div class = "row-fluide" > 
  5.       <div class = "span6" > Niveau 2 </div> 
  6.       <div class = "span6" > Niveau 2 </div> 
  7.     </div>
  8.   </div>
  9. </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

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.

Modèles de base pour créer des pages Web

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

  1. <corps>
  2.   < classe div = "conteneur" > 
  3.     ...
  4.   </div>
  5. </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.

  1. <div class = "conteneur-fluide" > 
  2.   <div class = "row-fluide" > 
  3.     < classe div = "span2" > 
  4.       <!--Contenu de la barre latérale-->
  5.     </div>
  6.     < classe div = "span10" > 
  7.       <!--Contenu du corps-->
  8.     </div>
  9.   </div>
  10. </div>

Conception réactive Requêtes multimédias pour divers appareils et résolutions

Appareils réactifs

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

Utilisez les requêtes médias de manière responsable et uniquement comme point de départ pour vos audiences mobiles. Pour les projets plus importants, envisagez des bases de code dédiées et non des couches de requêtes multimédias.

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 :

Étiquette Largeur de mise en page Largeur de colonne Largeur de gouttière
Smartphones 480px et moins Colonnes fluides, pas de largeurs fixes
Des smartphones aux tablettes 767px et moins Colonnes fluides, pas de largeurs fixes
Tablettes portraits 768px et plus 42px 20px
Défaut 980px et plus 60px 20px
Grand écran 1200px et plus 70px 30px

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.

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

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 :

  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.

  1.   /* Téléphones paysage et vers le bas */
  2.   @media ( max - width : 480px ) { ... }     
  3.  
  4.   /* Téléphone paysage vers tablette portrait */
  5.   @media ( max - width : 767px ) { ... }     
  6.  
  7.   /* Tablette portrait vers paysage et bureau */
  8.   @media ( min - width : 768px ) et ( max - width : 979px ) { ... }        
  9.  
  10.   /* Grand bureau */
  11.   @media ( min - largeur : 1200px ) { ... }

Classes utilitaires réactives

Que sont-ils

Pour un développement plus rapide et adapté aux mobiles, utilisez ces classes utilitaires de base pour afficher et masquer le contenu par appareil.

Quand utiliser

Utilisez-les de manière limitée et évitez de créer des versions entièrement différentes du même site. Utilisez-les plutôt pour compléter la présentation de chaque appareil.

Par exemple, vous pouvez afficher un <select>élément pour la navigation sur les mises en page mobiles, mais pas sur les tablettes ou les ordinateurs de bureau.

Cours de soutien

Voici un tableau des classes que nous prenons en charge et de leur effet sur une disposition de requête multimédia donnée (étiquetée par appareil). Ils peuvent être trouvés dans responsive.less.

Classer Téléphone (s480px et moins Comprimés767px et moins Ordinateurs de bureau768px et plus
.visible-phone Visible
.visible-tablet Visible
.visible-desktop Visible
.hidden-phone Visible Visible
.hidden-tablet Visible Visible
.hidden-desktop Visible Visible

Cas de test

Redimensionnez votre navigateur ou chargez-le sur différents appareils pour tester les classes ci-dessus.

Visible sur...

Les coches vertes indiquent que la classe est visible dans votre fenêtre actuelle.

  • Téléphoner✔ Téléphone
  • Tablette✔ Tablette
  • Bureau✔ Bureau

Caché sur...

Ici, les coches vertes indiquent que la classe est masquée dans votre fenêtre actuelle.

  • Téléphoner✔ Téléphone
  • Tablette✔ Tablette
  • Bureau✔ Bureau