Description
Table des matières
- Prise en main de Bootstrap
- 1. Présentation de Bootstrap 3
- 2. Les pré-requis
- 3. La compatibilité
- 4. Mettre en place Bootstrap
- 5. Personnaliser Bootstrap 3
- 6. Créer une première page HTML avec Bootstrap 3
- 7. La documentation relative à Bootstrap 3
- 8. Les outils de développement et de débogage
- Le système de grilles
- 1. Introduction
- 2. Le concept de grille
- 3. Créer une page multigrille
- 4. Décaler les éléments d’une grille
- 5. Imbriquer plusieurs grilles entre elles
- 6. Changer l’ordre des éléments
- 7. Gérer l’affichage multiligne
- 8. Afficher et cacher du contenu en fonction du support
- La typographie
- 1. Introduction
- 2. Les titres et les paragraphes
- 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
- 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
- 4.1 Les badges standard
- 4.2 Les badges personnalisés
- 5. Les labels
- 6. Les icônes
- 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
- Manipuler les listes
- 1. Introduction
- 2. Les listes basiques
- 3. Les listes en ligne
- 4. Les listes de définition
- 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
- Les boutons
- 1. Introduction
- 2. Principe : “One class, multiple tags”
- 3. Les boutons inactifs
- 4. Les tailles de boutons
- 5. Les boutons groupés
- 5.1 Les boutons groupés horizontaux
- 5.2 Les boutons groupés verticaux
- 6. Les boutons avec menus déroulants
- 7. Les boutons contextuels
- 8. Créer des boutons personnalisés
- 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
- 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’)
- 9.1 Les attributs d’un bouton
- Les formulaires
- 1. Introduction
- 2. Mettre en forme des formulaires
- 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
- 2.1 Deux types de formulaires
- 3. Ajouter les éléments supportés
- 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
- 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
- La navigation
- 1. Introduction
- 2. Les barres et menus de navigation
- 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
- 2.1 La barre de navigation standard
- 3. Les sous-menus
- 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
- 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
- 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
- 4.1 La numérotation des pages
- 5. Le fil d’Ariane
- Les images
- 1. Introduction
- 2. Donner un rendu original aux images
- 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
- 3.1 Créer une image cliquable
- 3.2 Créer des étiquettes complexes
- 4. Le carrousel de Bootstrap 3
- 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
- Les infobulles
- 1. Les tooltips
- 1.1 Principe
- 1.2 Manipuler les tooltips avec l’API Bootstrap 3
- 1.2.1 Les attributs
- 1.2.2 La fonction tooltip()
- 2. Les popovers
- 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
- 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()
- 1. Les tooltips
- Les tableaux et les panneaux
Reviews
There are no reviews yet.