Bootstrap 3

30375 CFA

Ce livre sur Bootstrap 3 est destiné aux personnes expérimentées en création de sites Web. Une bonne connaissance des standards HTML5 et CSS3 est nécessaire à la maîtrise des concepts qui sont présentés au fil des chapitres. Des notions de JavaScript et de jQuery seront également utiles au lecteur pour bien appréhender l’usage de l’API de Bootstrap 3. Le livre présente, de façon progressive, les différents concepts proposés par Bootstrap 3 ; chaque composante de cette librairie est définie puis illustrée à l’aide d’exemples simples et concrets pour que le lecteur puisse passer facilement à la pratique et adopter Bootstrap 3.

L’auteur débute par une présentation générale du framework puis des concepts qui rendent Bootstrap 3 si innovant pour les designers et les développeurs Web. Le lecteur apprend ainsi à manipuler les grilles qui lui permettront de créer des pages optimisées pour tous les supports (smartphones, tablettes, …). Dans le même esprit, il découvre comment donner, avec Bootstrap 3, un nouveau souffle aux classiques menus et barres de navigation. Une bibliothèque de contrôles de formulaires et de boutons lui permet également de créer des pages plus rapidement.

L’auteur présente ensuite les concepts tels que les listes, les infobulles ou la typographie, qui changent résolument la façon de travailler des designers et des développeurs Web. Enfin, l’accent est mis sur la puissante API JavaScript de Bootstrap 3 pour animer des pages et accéder à des fonctionnalités, aujourd’hui encore peu connues.

Au final, le lecteur sera à même de créer, avec un minimum de code, des sites et des applications Web à l’aspect professionnel, enrichis de contenus disposés de façon fluide, dynamique et optimisée pour tous les types de supports utilisés par les internautes d’aujourd’hui.

  Poser une question
Comparer

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’)
  • 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
    • 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
    • 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
    • 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()
  • Les tableaux et les panneaux
Catégorie

Avis des clients

0.0
0 avis

Il n'y a pas encore d'avis.

Soyez le premier à donner votre avis sur “Bootstrap 3”

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Plus d'offres pour ce produit!

Questions et demandes générales

Il n'y a pas encore de demandes de renseignements.