Transcript Bootstrap 3 - Editions ENI

Bootstrap 3
Le framework CSS du Web 2.0
Prise en main de Bootstrap
1. Présentation de Bootstrap 3
9
2. Les pré-requis
10
3. La compatibilité
11
4. Mettre en place Bootstrap
12
5. Personnaliser Bootstrap 3
14
6. Créer une première page HTML avec Bootstrap 3
15
7. La documentation relative à Bootstrap 3
17
8. Les outils de développement et de débogage
18
Le système de grilles
1. Introduction
21
2. Le concept de grille
22
3. Créer une page multigrille
26
4. Décaler les éléments d'une grille
31
5. Imbriquer plusieurs grilles entre elles
33
www.editions-eni.fr
© Editions ENI
1/9
Bootstrap 3
Le framework CSS du Web 2.0
6. Changer l'ordre des éléments
35
7. Gérer l'affichage multiligne
37
8. Afficher et cacher du contenu en fonction du support
40
La typographie
1. Introduction
43
2. Les titres et les paragraphes
43
2.1 De h1 à h6
2.2 Aligner des paragraphes
2.3 Mettre en avant une portion de texte
2.3.1 La classe lead
2.3.2 Les citations
2.3.3 Les wells
3. Les messages d'information
44
45
46
46
47
48
49
3.1 Les "classes d'emphase"
3.2 Les bandeaux d'alerte contextuels
3.2.1 Les bandeaux d'alerte simples
3.2.2 Les bandeaux d'alerte complexes
4. Les badges
49
50
50
51
54
4.1 Les badges standard
4.2 Les badges personnalisés
54
55
5. Les labels
58
6. Les icônes
59
www.editions-eni.fr
© Editions ENI
2/9
Bootstrap 3
Le framework CSS du Web 2.0
6.1 Utiliser la bibliothèque Glyphicon
6.2 Ajouter plus d'icônes avec Font Awesome
6.2.1 Installer Font Awesome
6.2.2 Créer une première page utilisant Font Awesome
6.2.3 Manipuler les tailles d'icônes
6.2.4 Utiliser Font Awesome dans les listes
6.2.5 Faire pivoter une icône
6.2.6 Imbriquer des icônes
59
62
62
63
65
67
68
70
Manipuler les listes
1. Introduction
73
2. Les listes basiques
74
3. Les listes en ligne
75
4. Les listes de définition
76
4.1 Les listes de définition verticales
4.2 Les listes de définition horizontales
4.3 Les list-group
4.3.1 Principe
4.3.2 Insérer une list-group dans une grille
4.3.3 Utiliser une list-group avec des badges
4.3.4 Afficher une list-group avec en-tête
4.3.5 Créer un menu vertical complet en utilisant les list-group
4.3.6 Afficher une list-group avec un contenu HTML complexe
4.4 Les media objects
4.4.1 Principe
4.4.2 Intégrer les media objects dans une liste
76
77
79
79
80
81
82
84
86
89
89
92
Les boutons
www.editions-eni.fr
© Editions ENI
3/9
Bootstrap 3
Le framework CSS du Web 2.0
1. Introduction
95
2. Principe : "One class, multiple tags"
95
3. Les boutons inactifs
97
4. Les tailles de boutons
98
5. Les boutons groupés
99
5.1 Les boutons groupés horizontaux
5.2 Les boutons groupés verticaux
99
100
6. Les boutons avec menus déroulants
101
7. Les boutons contextuels
103
8. Créer des boutons personnalisés
105
8.1 Analyse du code CSS source générant un bouton
8.2 Modifier le code source CSS
8.3 Intégrer un bouton personnalisé
9. Paramétrer les boutons
105
106
108
111
9.1 Les attributs d'un bouton
9.1.1 L’attribut "data-toggle" sur un bouton seul
9.1.2 L’attribut "data-toggle" sur un groupe de boutons
9.2 La fonction button() de l'API JavaScript
9.2.1 button('loading')
9.2.2 button('complete')
9.2.3 button('reset')
111
112
113
117
118
120
121
Les formulaires
www.editions-eni.fr
© Editions ENI
4/9
Bootstrap 3
Le framework CSS du Web 2.0
1. Introduction
123
2. Mettre en forme des formulaires
124
2.1 Deux types de formulaires
2.1.1 Les formulaires en ligne
2.1.2 Les formulaires verticaux
2.2 Gérer la taille des éléments d'un formulaire
2.2.1 Modifier la largeur des éléments
2.2.2 Modifier la hauteur des éléments
2.3 Désactiver des éléments d’un formulaire
2.3.1 Désactiver un élément
2.3.2 Désactiver un groupe d'éléments
3. Ajouter les éléments supportés
124
124
127
129
129
132
133
133
133
134
3.1 Les zones de saisie (input)
3.2 Les zones de texte (textarea)
3.3 Les cases à cocher et zones d'options
3.3.1 Affichage par défaut
3.3.2 Affichage sur une ligne
3.4 Les listes déroulantes (select)
3.5 Les contrôles groupés
3.5.1 Le contrôle groupé avec une chaîne de caractères
3.5.2 Le contrôle groupé avec un bouton
3.5.3 Le contrôle groupé avec une case à cocher
3.5.4 Le contrôle groupé avec un menu déroulant
4. Communiquer avec l'utilisateur
134
135
139
139
141
142
144
145
147
148
149
151
4.1 Les messages d'aide
4.2 Les messages contextuels de validation
4.2.1 Présentation
4.2.2 Cas pratique : valider en temps réel le format d'un mot de passe
151
152
153
156
La navigation
www.editions-eni.fr
© Editions ENI
5/9
Bootstrap 3
Le framework CSS du Web 2.0
1. Introduction
161
2. Les barres et menus de navigation
161
2.1 La barre de navigation standard
2.1.1 Présentation de la structure
2.1.2 Modifier la position de la barre de navigation
2.2 Aligner le contenu de la barre de navigation
2.2.1 Aligner le contenu sur le container
2.2.2 Aligner la liste d'éléments vers la droite
2.2.3 Dissocier la liste d'éléments en deux parties
2.3 Les différents types d'éléments d'une barre de navigation
2.3.1 Insérer de la "marque"
2.3.2 Insérer une liste simple de liens
2.3.3 Insérer un texte
2.3.4 Insérer un bouton
2.3.5 Insérer un formulaire
2.3.6 Insérer un menu déroulant
2.4 Une barre de navigation optimisée pour les supports mobiles
2.5 Créer une barre de navigation dynamique en utilisant le scroll-spy
3. Les sous-menus
185
3.1 Les sous-menus avec onglets
3.2 Les sous-menus sans onglet
3.3 Aligner des sous-menus
3.3.1 Aligner à droite
3.3.2 Justifier
3.4 Disposer verticalement des sous-menus
4. Les éléments de pagination
186
187
188
188
190
191
193
4.1 La numérotation des pages
4.1.1 Principe
4.1.2 Activer une page
4.1.3 Désactiver une page
4.1.4 Modifier la taille des numéros de page
www.editions-eni.fr
161
162
165
167
167
168
170
171
171
171
173
173
174
175
177
181
© Editions ENI
193
193
194
195
196
6/9
Bootstrap 3
Le framework CSS du Web 2.0
4.2 Les boutons de navigation
4.2.1 Principe
4.2.2 Aligner des boutons de navigation
4.2.3 Désactiver un bouton de navigation
5. Le fil d'Ariane
197
197
198
199
199
Les images
1. Introduction
201
2. Donner un rendu original aux images
201
2.1 Des bords d'image arrondis
2.2 Une image circonscrite dans un cercle
2.3 L’effet Polaroïd
2.4 Modifier la taille des images
3. Les étiquettes
202
203
203
204
206
3.1 Créer une image cliquable
3.2 Créer des étiquettes complexes
206
207
4. Le carrousel de Bootstrap 3
211
4.1 Créer le carrousel
4.2 Paramétrer le carrousel
4.2.1 Les attributs du carrousel
4.2.2 La fonction carousel() de l'API Bootstrap 3
211
216
216
217
Les infobulles
1. Les tooltips
221
1.1 Principe
1.2 Manipuler les tooltips avec l'API Bootstrap 3
www.editions-eni.fr
© Editions ENI
221
224
7/9
Bootstrap 3
Le framework CSS du Web 2.0
1.2.1 Les attributs
1.2.2 La fonction tooltip()
224
227
2. Les popovers
230
2.1 Principe
2.2 Manipuler les popovers avec l'API Bootstrap 3
2.2.1 Les attributs
2.2.2 La fonction popover()
3. Les fenêtres modales
230
232
232
235
241
3.1 Principe
3.2 Manipuler les fenêtres modales avec l'API Bootstrap 3
3.2.1 Les attributs
3.2.2 La fonction modal()
241
244
244
251
Les tableaux et les panneaux
1. Les tableaux
253
1.1 Quatre modèles de tableaux
1.1.1 Les tableaux basiques
1.1.2 Les tableaux condensés
1.1.3 Les tableaux avec bordures
1.1.4 Les tableaux zébrés
1.2 Améliorer la lisibilité des tableaux
1.2.1 Les tableaux dynamiques
1.2.2 Les tableaux et classes contextuelles
1.2.3 Les tableaux adaptés aux supports mobiles
2. Les panneaux
271
2.1 Les panneaux basiques
2.2 Les panneaux et grilles
2.3 Les panneaux et classes contextuelles
2.3.1 Principe
2.3.2 Application
www.editions-eni.fr
253
253
256
257
257
258
259
261
266
© Editions ENI
271
273
276
276
277
8/9
Bootstrap 3
Le framework CSS du Web 2.0
2.4 Insérer un tableau dans un panneau
2.4.1 Avec .panel-heading
2.4.2 Sans .panel-heading
278
278
280
Index
283
www.editions-eni.fr
© Editions ENI
9/9