Chapitre 1 : Introduction A. Le développement des sites Web 14 B. Les fonctionnalités de Bootstrap 14 C. La compatibilité avec les navigateurs 15 D. Télécharger les exemples 15 Chapitre 2 : Installer Bootstrap A. L objectif 18 B. Télécharger Bootstrap 18 1. Les deux possibilités 18 2. Télécharger la distribution 18 3. Télécharger les sources 19 C. Le dossier de distribution 20 1. Le dossier dist 20 2. Le dossier css 20 3. Le fichier bootstrap.css 20 4. Le fichier bootstrap-theme.css 22 5. Le dossier fonts 22 6. Le dossier js 23 D. La structure d un site simple 24 1. Le dossier du site 24 2. Les pages Web en HTML5 25 3. La structure des fichiers 25 4. L en-tête <head> de la page 26 1/18
5. Le corps de la page et les règles CSS 26 6. L affichage de la page 27 7. Le code complet 28 E. La compatibilité avec Internet Explorer 28 1. L objectif 28 2. Télécharger la librairie html5shiv.js 29 3. Télécharger la librairie respond.min.js 30 4. La structure du site Web 31 5. La liaison aux librairies 31 6. Les liaisons vers les sites de dépôt 32 F. Les librairies JavaScript 33 1. L objectif 33 2. La structure du site Web 34 3. La liaison au JavaScript de Bootstrap 35 4. Télécharger jquery 35 5. Lier la librairie jquery 36 6. Le code complet 36 7. La liaison au site de dépôt 37 G. Les outils de l intégrateur Web 37 1. Les objectifs 37 2. Mozilla Firefox 38 3. Google Chrome 39 4. Apple Safari 40 5. Microsoft Internet Explorer 42 Chapitre 3 : Les CSS pour le texte A. L objectif 44 B. Les liaisons à Bootstrap et aux librairies 44 2/18
C. Le corps de la page 45 D. Les en-têtes 46 E. Les mises en évidence 48 F. L alignement du texte 48 G. Le texte coloré 49 H. Les abréviations 50 I. Les adresses 51 J. Les citations 51 1. Une citation simple 51 2. Une citation en paragraphe 52 3. La source de la citation 53 4. L alignement à droite 53 K. Les listes 54 1. Les listes classiques 54 2. Les listes sans décoration 54 3. Les listes en ligne 55 4. Les listes de définitions classiques 56 5. Les listes de définitions spéciales 57 L. L'affichage du code 58 1. L élément <code> 58 2. L élément <pre> 58 3. L élément <pre> avec un défilement 59 3/18
Chapitre 4 : Les CSS pour les tableaux A. L objectif 64 B. Les liaisons à Bootstrap et aux librairies 64 C. Les tableaux simples 65 1. Les tableaux en pleine largeur 65 2. Les tableaux à largeur fixe 67 D. Les lignes en alternance 68 E. Les tableaux encadrés 69 F. Le survol des lignes 69 G. Les tableaux étroitisés 70 H. Les mises en évidence colorées 71 I. Les tableaux adaptatifs 74 Chapitre 5 : Les CSS pour les formulaires A. L objectif 76 B. Les liaisons à Bootstrap et aux librairies 76 C. La structure de base 77 1. Les classes.form-group et.form-control 77 2. Les propriétés de.form-group et.form-control 78 4/18
3. Les autres sélecteurs CSS 79 D. Les formulaires en ligne 80 E. L alignement vertical dans les formulaires 81 F. Les éléments des formulaires 83 1. Un champ de texte 83 2. Une zone de saisie multiligne 83 3. Les cases à cocher et les boutons radio 84 4. Les cases à cocher et les boutons radio en ligne 85 5. Les listes 86 G. Les mises en forme spéciales 87 1. Les exemples de saisie 87 2. Les champs actifs et inactifs 88 3. Les champs colorés 89 4. L aide textuelle 91 5. La largeur des éléments 92 Chapitre 6 : Les CSS pour les boutons A. L objectif 96 B. Les liaisons à Bootstrap et aux librairies 96 C. Les boutons colorés 97 D. La largeur des boutons 100 E. Les boutons en bloc 101 5/18
F. Les boutons inactifs 102 G. Les boutons de formulaire 103 Chapitre 7 : Les CSS pour les images A. L objectif 106 B. Les liaisons à Bootstrap et aux librairies 106 C. Les images aux coins arrondis 107 D. Les images dans un ovale et un cercle 107 E. Les images avec un cadre 109 F. Les images adaptatives 110 G. Les carrousels d images 111 Chapitre 8 : Les CSS pour la mise en page A. L objectif 114 B. Les liaisons à Bootstrap et aux librairies 114 C. Le flottement des blocs 115 D. Interdire le flottement 116 6/18
1. La problématique 116 2. La solution de Bootstrap 117 E. Masquer des éléments 118 Chapitre 9 : La grille adaptative A. L objectif 120 B. Les grilles de mise en page 120 1. Les grilles des pages imprimées 120 2. Les grilles des pages Web 121 C. Le Responsive Web Design 122 1. Le design adaptatif 122 2. Les requêtes de média 122 3. Les critères 123 D. Les largeurs des écrans et des conteneurs 124 1. La taille des écrans 124 2. La largeur du conteneur 124 3. La largeur des boîtes avec Bootstrap 126 4. Le modèle du conteneur 127 5. L utilisation des lignes et de la classe.row 128 E. La largeur des colonnes 130 1. Les classes dédiées 130 2. Les largeurs des colonnes 131 F. Un exemple simple de mise en page 134 1. L objectif 134 2. Les liaisons à Bootstrap et aux JavaScript 134 3. La structure de la page 135 7/18
4. Les styles CSS personnels de la page 138 5. L affichage sur les grands écrans 139 6. L affichage sur les écrans moyens 142 7. L affichage sur une tablette 144 8. L affichage sur un smartphone 146 G. Un exemple évolué de mise en page 148 1. L objectif 148 2. Les liaisons à Bootstrap et aux JavaScript 148 3. La structure de la page 149 4. Le code de la page 150 5. L'affichage sur les écrans d ordinateur 153 6. L'affichage sur les tablettes 154 7. L'affichage sur les smartphones 155 H. Les blocs décalés 157 1. La syntaxe pour une boîte 157 2. La syntaxe pour plusieurs boîtes 157 I. Afficher et masquer des éléments 159 1. L objectif 159 2. Les classes 159 3. Un exemple 160 4. Le code complet 161 5. L affichage sur un écran large 164 6. L affichage sur un smartphone 165 Chapitre 10 : Les composants des pages Web A. L objectif 168 B. Les liaisons à Bootstrap et aux librairies 168 8/18
C. Les lancements 169 1. L objectif 169 2. La structure 169 3. Les règles CSS Jumbotron 170 D. Les en-têtes de page 170 1. L objectif 170 2. La structure 171 3. Les règles CSS 171 E. Les miniatures 172 1. L objectif 172 2. La structure pour une miniature simple 172 3. La structure pour une miniature plus élaborée 174 F. Les listes d images 176 1. L objectif 176 2. La liste des images 176 3. La liste des images imbriquées 179 G. Les panneaux 180 1. L objectif 180 2. Les panneaux 180 3. Un panneau simple 180 4. Un panneau avec un en-tête et un pied de page 181 5. Des panneaux colorés 183 6. Les panneaux avec un tableau 183 7. Les panneaux avec une liste 185 Chapitre 11 : Les composants pour les boutons A. L objectif 188 9/18
B. Les liaisons et la structure 188 C. Une barre de boutons simple 189 D. Une barre verticale de boutons 190 E. Une barre de groupe de boutons 191 F. La largeur des boutons sur la grille adaptative 192 G. Les boutons justifiés 193 H. Les boutons déroulants 194 I. Un bouton déroulant simple 196 J. La couleur des boutons 198 K. Les boutons avec triangle basculant 198 1. Le déroulé vers le bas 198 2. Le déroulé vers le haut 200 3. La largeur des boutons 201 L. Les champs avec des boutons 201 1. L objectif 201 2. Des informations à gauche et à droite 201 3. La taille des boutons inclus 204 4. Les boutons radio et cases à cocher 205 5. Insérer un bouton actif 206 6. Un bouton déroulant 206 7. Un bouton déroulant avec triangle actif 207 10/18
Chapitre 12 : Les composants de navigation et de pagination A. L objectif 210 B. Les liaisons et la structure 210 C. La navigation par onglets 211 D. La navigation par onglets-boutons 213 E. La navigation par onglets-boutons verticaux 213 F. La navigation par onglets justifiée 214 G. Les liens inactifs dans les onglets 215 H. Un bouton déroulant dans les onglets 216 I. La barre de navigation simple 217 J. La barre de navigation avec un en-tête 218 K. La barre de navigation avec un bouton déroulant 219 L. La barre de navigation avec un champ de recherche 220 M. La barre de navigation avec un lien à droite 221 N. La barre de navigation avec un lien actif 222 O. La barre de navigation avec des liens en bouton 222 11/18
P. La barre de navigation avec un texte fixe 223 Q. La barre de navigation noire 224 R. La barre de navigation fixée en haut de l écran 225 S. La barre de navigation pour smartphone 227 1. L objectif 227 2. La structure 227 3. La barre de navigation classique 228 4. La mise en forme du bouton pour les smartphones 229 5. L affichage 230 T. Le fil d Ariane 231 U. La pagination 232 1. L objectif 232 2. La pagination par défaut 233 3. Les liens actifs et inactifs 234 4. La taille de la pagination 235 V. Les pages précédente et suivante 236 1. L objectif 236 2. Les pages précédente et suivante standard 237 3. Les pages précédente et suivante alignées 238 4. Les pages précédente et suivante inactives 238 Chapitre 13 : Les composants d interface d administration A. L objectif 240 12/18
B. Les liaisons et la structure 240 C. Les icônes en glyphe 241 1. Des icônes en police de caractères 241 2. Utiliser une icône 242 3. Insertion dans un bouton 243 D. Les étiquettes 243 E. Les badges 245 1. L objectif 245 2. Un simple badge 245 3. Une mise en forme évoluée 246 F. Les alertes 247 1. L objectif 247 2. Les alertes simples 247 3. Les alertes avec un lien 250 G. Les barres de progression 250 1. L objectif 250 2. La barre de progression simple 250 3. Les barres de progression colorées 251 4. Les barres de progression hachurées 252 5. Les barres de progression animées 254 6. Les barres de progression empilées 254 H. Les listes ouvertes 255 1. L objectif 255 2. Afficher une liste ouverte 255 3. L alignement à droite 257 4. Les en-têtes de liste 257 5. Les items inactifs 258 13/18
I. Les listes d éléments 259 1. L objectif 259 2. Une liste simple 259 3. Une liste de liens interactifs 261 J. Les encadrés 262 1. L objectif 262 2. Les encadrés simples 262 3. Les tailles des encadrés 264 Chapitre 14 : Les plugins JavaScript A. L objectif 266 B. Les prérequis techniques 266 1. La liaison à Bootstrap 266 2. Les plugins JavaScript 267 C. Les bulles d aide 267 1. L objectif 267 2. Les bulles d aide simples 267 3. L orientation des bulles d aide 268 D. Les popovers 269 1. L objectif 269 2. Le code utilisé 270 3. L affichage 271 E. Les fenêtres modales 271 1. L objectif 271 2. La fenêtre modale 271 3. Le bouton de fermeture 273 14/18
4. Le bouton d affichage 273 5. Le code complet 274 6. L utilisation 274 F. Les accordéons 275 1. L objectif 275 2. L accordéon 276 3. Le code complet 277 4. L utilisation 278 G. Les carrousels d images 280 1. L objectif 280 2. Les conteneurs 280 3. Le carrousel 281 4. Le code complet du carrousel 282 5. L affichage 284 H. Une barre de navigation fixe 284 1. L objectif 284 2. La structure 285 3. La barre de navigation 286 4. Le document 286 5. Les styles CSS personnalisés 286 6. L affichage 287 I. Une barre de navigation fixe avec les liens actifs 288 1. L objectif 288 2. La structure 289 3. Le contenu 290 4. La barre de navigation 290 5. Le corps de la barre 290 6. Les styles personnels 290 7. L affichage 291 15/18
Chapitre 15 : Créer des sites avec Bootstrap A. Les objectifs 294 B. Créer un site avec un template 294 1. Le site Start Bootstrap 294 2. Les fichiers du template 298 3. Le fichier HTML 299 4. La structure générale 300 5. La barre de navigation 301 6. Le message d accueil 302 7. Le titre central 304 8. Les articles 304 9. Le pied de page 306 C. Créer un site avec un thème 307 1. Le site Bootswatch 307 2. Installation du thème 309 3. Des exemples de pages 310 D. Créer un site avec un constructeur 311 1. L objectif 311 2. Le site Layoutit! 312 3. Le projet 313 4. Utiliser l interface de construction 314 5. Un modèle vierge 318 6. La partie supérieure du site 318 7. La partie centrale 321 8. Le pied de page 326 9. Terminer la maquette 328 10. Télécharger les sources 329 Chapitre 16 : Des sites réalisés avec Bootstrap 16/18
A. Les objectifs 332 B. L étude d un site Bootstrap 332 1. Le site differential.io 332 2. Les affichages adaptatifs 333 3. La structure générale 336 4. La barre de navigation 337 5. L image et le slogan d accueil 339 6. La zone d activité 341 7. La zone des entreprises et des produits 342 8. La zone d information 343 9. La zone du formulaire 344 10. Le pied de page 344 C. WordPress et Bootstrap 346 1. Les thèmes 346 2. Les affichages adaptatifs 346 3. La structure générale 349 4. La barre des menus 349 5. La zone centrale 350 6. Le fil d Ariane et la liste des articles 350 7. La sidebar 351 8. Le pied de page 352 D. Joomla! et Bootstrap 353 1. L administration de Joomla! 353 2. Le template Protostar 357 3. La structure générale 359 4. L en-tête 360 5. La barre des menus 360 6. La partie centrale des articles 361 7. Le fil d Ariane 361 8. La colonne latérale 362 17/18
Index 365 18/18