Bootstrap 3 Le framework CSS du Web 2.0

Transcription

1 Prise en main de Bootstrap 1. Présentation de Bootstrap Les pré-requis La compatibilité Mettre en place Bootstrap Personnaliser Bootstrap Créer une première page HTML avec Bootstrap La documentation relative à Bootstrap Les outils de développement et de débogage 18 Le système de grilles 1. Introduction Le concept de grille Créer une page multigrille Décaler les éléments d'une grille Imbriquer plusieurs grilles entre elles 33 1/9

2 6. Changer l'ordre des éléments Gérer l'affichage multiligne Afficher et cacher du contenu en fonction du support 40 La typographie 1. Introduction Les titres et les paragraphes De h1 à h Aligner des paragraphes Mettre en avant une portion de texte La classe lead Les citations Les wells Les messages d'information Les "classes d'emphase" Les bandeaux d'alerte contextuels Les bandeaux d'alerte simples Les bandeaux d'alerte complexes Les badges Les badges standard Les badges personnalisés Les labels Les icônes 59 2/9

3 6.1 Utiliser la bibliothèque Glyphicon Ajouter plus d'icônes avec Font Awesome Installer Font Awesome Créer une première page utilisant Font Awesome Manipuler les tailles d'icônes Utiliser Font Awesome dans les listes Faire pivoter une icône Imbriquer des icônes 70 Manipuler les listes 1. Introduction Les listes basiques Les listes en ligne Les listes de définition Les listes de définition verticales Les listes de définition horizontales Les list-group Principe Insérer une list-group dans une grille Utiliser une list-group avec des badges Afficher une list-group avec en-tête Créer un menu vertical complet en utilisant les list-group Afficher une list-group avec un contenu HTML complexe Les media objects Principe Intégrer les media objects dans une liste 92 Les boutons 3/9

4 1. Introduction Principe : "One class, multiple tags" Les boutons inactifs Les tailles de boutons Les boutons groupés Les boutons groupés horizontaux Les boutons groupés verticaux Les boutons avec menus déroulants Les boutons contextuels Créer des boutons personnalisés Analyse du code CSS source générant un bouton Modifier le code source CSS Intégrer un bouton personnalisé Paramétrer les boutons Les attributs d'un bouton L attribut "data-toggle" sur un bouton seul L attribut "data-toggle" sur un groupe de boutons La fonction button() de l'api JavaScript button('loading') button('complete') button('reset') 121 Les formulaires 4/9

5 1. Introduction Mettre en forme des formulaires Deux types de formulaires Les formulaires en ligne Les formulaires verticaux Gérer la taille des éléments d'un formulaire Modifier la largeur des éléments Modifier la hauteur des éléments Désactiver des éléments d un formulaire Désactiver un élément Désactiver un groupe d'éléments Ajouter les éléments supportés Les zones de saisie (input) Les zones de texte (textarea) Les cases à cocher et zones d'options Affichage par défaut Affichage sur une ligne Les listes déroulantes (select) Les contrôles groupés Le contrôle groupé avec une chaîne de caractères Le contrôle groupé avec un bouton Le contrôle groupé avec une case à cocher Le contrôle groupé avec un menu déroulant Communiquer avec l'utilisateur Les messages d'aide Les messages contextuels de validation Présentation Cas pratique : valider en temps réel le format d'un mot de passe 156 La navigation 5/9

6 1. Introduction Les barres et menus de navigation La barre de navigation standard Présentation de la structure Modifier la position de la barre de navigation Aligner le contenu de la barre de navigation Aligner le contenu sur le container Aligner la liste d'éléments vers la droite Dissocier la liste d'éléments en deux parties Les différents types d'éléments d'une barre de navigation Insérer de la "marque" Insérer une liste simple de liens Insérer un texte Insérer un bouton Insérer un formulaire Insérer un menu déroulant Une barre de navigation optimisée pour les supports mobiles Créer une barre de navigation dynamique en utilisant le scroll-spy Les sous-menus Les sous-menus avec onglets Les sous-menus sans onglet Aligner des sous-menus Aligner à droite Justifier Disposer verticalement des sous-menus Les éléments de pagination La numérotation des pages Principe Activer une page Désactiver une page Modifier la taille des numéros de page 196 6/9

7 4.2 Les boutons de navigation Principe Aligner des boutons de navigation Désactiver un bouton de navigation Le fil d'ariane 199 Les images 1. Introduction Donner un rendu original aux images Des bords d'image arrondis Une image circonscrite dans un cercle L effet Polaroïd Modifier la taille des images Les étiquettes Créer une image cliquable Créer des étiquettes complexes Le carrousel de Bootstrap Créer le carrousel Paramétrer le carrousel Les attributs du carrousel La fonction carousel() de l'api Bootstrap Les infobulles 1. Les tooltips Principe Manipuler les tooltips avec l'api Bootstrap /9

8 1.2.1 Les attributs La fonction tooltip() Les popovers Principe Manipuler les popovers avec l'api Bootstrap Les attributs La fonction popover() Les fenêtres modales Principe Manipuler les fenêtres modales avec l'api Bootstrap Les attributs La fonction modal() 251 Les tableaux et les panneaux 1. Les tableaux Quatre modèles de tableaux Les tableaux basiques Les tableaux condensés Les tableaux avec bordures Les tableaux zébrés Améliorer la lisibilité des tableaux Les tableaux dynamiques Les tableaux et classes contextuelles Les tableaux adaptés aux supports mobiles Les panneaux Les panneaux basiques Les panneaux et grilles Les panneaux et classes contextuelles Principe Application 277 8/9

9 2.4 Insérer un tableau dans un panneau Avec.panel-heading Sans.panel-heading 280 Index 283 9/9