1. Livres et vidéos
  2. Bootstrap 4 pour l'intégrateur web (2e édition) - Concevez des sites au design moderne

Bootstrap 4 pour l'intégrateur web (2e édition) Concevez des sites au design moderne

  • Accès illimité 24h/24, 7J/7
  • Tous les livres en ligne, les vidéos et les cours enregistrés ENI
  • Plus de 10 nouveautés livres et vidéos chaque mois
  • Les nouveautés disponibles le jour de leur sortie
  • Accès 100% en ligne
  • En stock
  • Expédié en 24h00
  • Livraison à partir de 0,01 €
  • Version en ligne offerte
  • 1 h d'accès gratuit à tous nos livres et vidéos pour chaque commande
  • Accessible immédiatement
  • Version HTML
  • Accès illimité 24h/24, 7J/7

Présentation

Bootstrap est un environnement de conception de site web, un framework en anglais. Il facilite l'utilisation des règles CSS pour concevoir des sites web modernes, attractifs et adaptatifs (Responsive Web Design). Ce livre s'adresse à tous les concepteurs de site web connaissant déjà l'HTML et les CSS, désirant travailler efficacement et démarrer sur des bases solides. Il a été rédigé avec la version 4.3 de Bootstrap.

Vous commencerez par apprendre à installer Bootstrap selon plusieurs méthodes en fonction de l'objectif de vos projets de développement web.

Ensuite, vous apprendrez les techniques de mise en page de Bootstrap qui sont basées sur le module CSS3 Flexbox, pour concevoir des sites Responsive Web Design dont l'affichage s'adaptera automatiquement selon l'écran de diffusion (écran d'ordinateur, tablette ou smartphone).

Vous exploiterez les différents composants CSS Bootstrap afin d'optimiser vos pages web : pour le texte, les images, les tableaux, les formulaires, les composants d'interface et les boutons.

Deux chapitres sont consacrés à la navigation, avec l'utilisation des barres et des menus de navigation.

Vous étudierez des exemples d'utilisation de règles CSS qui vont vous permettre de mettre en forme des éléments d'interface comme des bordures, des jeux de couleurs, des flottements, des marges et remplissages...

Ce livre se termine par l'analyse de deux templates Bootstrap qui vous donneront des bases solides pour démarrer la conception de vos pages web.

Les exemples de code utilisés dans le livre sont disponibles en téléchargement sur le site des Editions ENI www.editions-eni.fr.

Table des matières

  • Chapitre 1 : Introduction
    • A. Le développement des sites web
    • B. Les fonctionnalités de Bootstrap
    • C. La compatibilité avec les navigateurs
    • D. Télécharger les exemples
  • Chapitre 2 : Installer Bootstrap
    • A. Les objectifs
    • B. Installer Bootstrap
      • 1. Télécharger la distribution Bootstrap
      • 2. Télécharger les sources
      • 3. Lier Bootstrap
      • 4. Les gestionnaires de paquets
    • C. Le dossier de distribution
      • 1. Les fichiers du dossier de distribution
      • 2. Le dossier css
      • 3. Le dossier js
    • D. Le dossier source
    • E. Un site Bootstrap lié aux fichiers locaux
      • 1. Le dossier du site
      • 2. Les liaisons aux fichiers CSS et JS
      • 3. La liaison à jQuery
      • 4. Un exemple de page Bootstrap
    • F. Un site Bootstrap lié aux fichiers par CDN
      • 1. Les réseaux de diffusion de contenu
      • 2. Les liaisons au fichier CSS
      • 3. La liaison aux fichiers JS
      • 4. Un exemple de page Bootstrap
    • G. Les types de sites Bootstrap
    • H. Les outils de l'intégrateur web
      • 1. Les objectifs
      • 2. Mozilla Firefox
      • 3. Google Chrome
      • 4. Apple Safari
      • 5. Microsoft Edge
  • Chapitre 3 : La mise en page avec Bootstrap
    • A. L'objectif
    • B. Définir le viewport
    • C. La largeur des boîtes
    • D. Les conteneurs
    • E. La largeur fixe des conteneurs
      • 1. Les requêtes de média
      • 2. La largeur maximale des conteneurs
    • F. La largeur fluide des conteneurs
    • G. La grille de mise en page
      • 1. Les concepts de construction
      • 2. Définir les classes pour les colonnes
    • H. Des exemples de grille
      • 1. Une grille sans taille d'écran ni nombre de colonnes
      • 2. Une grille sans taille d'écran mais avec un nombre de colonnes
      • 3. Une grille avec taille d'écran et nombre de colonnes
      • 4. Une grille avec plusieurs largeurs de colonnes
    • I. Des grilles spéciales
      • 1. Plusieurs lignes dans une ligne
      • 2. Les lignes incomplètes
      • 3. Les lignes débordantes
      • 4. Les colonnes sans gouttière
      • 5. Décaler des colonnes
      • 6. Gérer les marges automatiquement
      • 7. Gérer les marges manuellement
      • 8. Imbriquer des lignes
    • J. Les alignements des colonnes
      • 1. L'alignement horizontal
      • 2. L'alignement vertical dans les lignes
      • 3. L'alignement vertical dans les colonnes
    • K. Ordonner les colonnes
  • Chapitre 4 : Le texte
    • A. L’objectif
    • B. L'uniformisation des affichages
      • 1. Le rendu des navigateurs
      • 2. Le corps de la page
      • 3. Les marges des en-têtes, des paragraphes, des listes et du texte préformaté
      • 4. D'autres éléments
    • C. Les règles CSS pour les en-têtes
      • 1. Les sélecteurs d’éléments des en-têtes
      • 2. Les sélecteurs de classe des en-têtes
      • 3. L'affichage de grands en-têtes
    • D. Les paragraphes
    • E. Les mises en évidence
    • F. Les abréviations
    • G. Les citations
    • H. Les listes
      • 1. Les listes classiques
      • 2. Les listes sans style
      • 3. Les listes en ligne
      • 4. Les listes de définitions
    • I. Afficher du code
      • 1. L’élément <code>
      • 2. L’élément <pre>
      • 3. L'élément <variable>
      • 4. L'élément <kbd>
      • 5. L'élément <samp>
  • Chapitre 5 : Les images, les figures et les carousels
    • A. L'objectif
    • B. Les images responsives
    • C. Les bordures de l'image
    • D. Aligner les images
    • E. Les sources des images
    • F. Les figures
    • G. Les carousels
      • 1. Un carousel simple
      • 2. Un carousel avec des boutons de contrôle
      • 3. Un carousel avec des légendes
  • Chapitre 6 : Les tableaux
    • A. L’objectif
    • B. Les tableaux simples
      • 1. Les tableaux en pleine largeur
      • 2. Les tableaux à fond sombre
      • 3. Les en-têtes de tableaux
    • C. Les lignes en alternance
    • D. Les tableaux encadrés
    • E. Le survol des lignes
    • F. Les tableaux étroitisés
    • G. Les mises en évidence colorée
    • H. La légende des tableaux
    • I. Les tableaux responsive
  • Chapitre 7 : Les formulaires
    • A. L'objectif
    • B. La structure de base
      • 1. Le formulaire Bootstrap
      • 2. La hauteur des champs
      • 3. Les champs en lecture seule
    • C. Les cases à cocher et les boutons radio
      • 1. Les éléments standards
      • 2. Les éléments en ligne
    • D. Les mises en page des formulaires
      • 1. La mise en page standard
      • 2. Utiliser une grille standard
      • 3. Utiliser une grille de formulaire
      • 4. Utiliser une grille complexe
      • 5. Les formulaires en colonnes
      • 6. Les éléments en ligne
    • E. Des éléments de mise en forme
      • 1. Masquer les étiquettes
      • 2. L'aide contextuelle
      • 3. La validation des formulaires
      • 4. Les cases à cocher et les boutons radio personnalisés
      • 5. Les listes d'options
      • 6. La sélection de fichiers
    • F. Ajouter des informations aux champs
      • 1. L'objectif
      • 2. Ajouter des informations supplémentaires
      • 3. Les champs de saisie multiples
      • 4. Les informations supplémentaires multiples
      • 5. Insérer des boutons
  • Chapitre 8 : Les composants d'interface
    • A. L'objectif
    • B. Les badges
      • 1. L'objectif
      • 2. Les badges colorés
      • 3. Les badges arrondis
      • 4. Les badges pour les liens
    • C. Les alertes
      • 1. L'objectif
      • 2. Les alertes simples
      • 3. Les alertes avec des liens
      • 4. Des alertes riches en texte
      • 5. Fermer une fenêtre d'alerte
    • D. Les barres de progression
      • 1. L’objectif
      • 2. La barre de progression simple
      • 3. L'étiquette de la valeur
      • 4. La hauteur de la barre
      • 5. Les barres de progression colorées
      • 6. Les barres de progression hachurées
      • 7. Les barres de progression animées
      • 8. Les barres de progression empilées
    • E. Les listes d'éléments
      • 1. L’objectif
      • 2. Une liste simple
      • 3. L'élément actif
      • 4. Un élément désactivé
      • 5. Une liste horizontale
      • 6. Les listes de boutons
      • 7. Liste sans bordure
      • 8. Les listes colorées
      • 9. Les listes avec des badges
      • 10. Les listes riches en texte
      • 11. Les listes d’items et de textes
    • F. Les cartes
      • 1. L'objectifs
      • 2. Une carte simple
      • 3. Des cartes plus élaborées
    • G. Les bulles d'aide
      • 1. L'objectif
      • 2. Les paramètres techniques
      • 3. Un exemple de bulles d'aide
    • H. Les bulles d'aide élaborées
      • 1. L'objectif et les paramètres techniques
      • 2. Une bulle d'aide élaborée
    • I. Le fil d'Ariane
    • J. La pagination
      • 1. L'objectif
      • 2. Un fil d'Ariane simple
      • 3. Utiliser des icônes
      • 4. Des éléments de mise en forme
    • K. L'accordéon
    • L. Les fenêtres modales
      • 1. L'objectif
      • 2. Une fenêtre modale simple
      • 3. Les options des fenêtres modales
    • M. Les roues de chargement
      • 1. L'objectif
      • 2. La roue simple
      • 3. La roue grossissante
      • 4. La taille des roues
      • 5. Utiliser des boutons
    • N. Les notifications
      • 1. L'objectif
      • 2. Une notification simple
      • 3. Une notification personnalisée
    • O. L'annonce d'accueil
    • P. Synchroniser le défilement
      • 1. Les objectifs
      • 2. Utiliser une barre de navigation
      • 3. Utiliser une liste groupée de liens
  • Chapitre 9 : Les boutons
    • A. L'objectif
    • B. Les boutons classiques
      • 1. Les boutons simples
      • 2. Les boutons colorés
      • 3. Les boutons en contour
      • 4. La taille des boutons
      • 5. Les états des boutons
    • C. Les boutons radio
    • D. Les groupes de boutons
    • E. Les boutons déroulants
      • 1. L'objectif
      • 2. Un bouton déroulant simple
      • 3. Des boutons colorés
      • 4. Des boutons divisés
      • 5. Les dimensions des boutons déroulants
      • 6. L'orientation du symbole
      • 7. L'état des items
  • Chapitre 10 : La navigation
    • A. L'objectif
    • B. Une barre de navigation simple
      • 1. Une navigation avec une liste
      • 2. Une navigation des liens
    • C. Les alignements
    • D. Les options de mise en forme
      • 1. Utiliser des onglets
      • 2. Utiliser des boutons
      • 3. Une barre de navigation justifiée
    • E. Une barre de navigation flexible
    • F. Une barre de navigation avec bouton déroulant
  • Chapitre 11 : Les menus de navigation
    • A. L'objectif
    • B. Insérer un menu de navigation complet
      • 1. La structure générale
      • 2. Le conteneur général
      • 3. La dénomination du site
      • 4. Le menu hamburger
      • 5. Le menu de navigation
      • 6. Les items du menu
      • 7. Le champ de recherche
    • C. Les options des menus de navigation
      • 1. Insérer un texte
      • 2. Les jeux de couleurs
      • 3. Le positionnement du menu de navigation
  • Chapitre 12 : Les utilitaires
    • A. Les objectifs
    • B. Les bordures
      • 1. Ajouter une bordure
      • 2. Supprimer une bordure d'un côté
      • 3. Les jeux de couleurs
      • 4. Les coins arrondis
    • C. Le flottement
      • 1. Appliquer un flottement
      • 2. Le flottement responsive
    • D. Les jeux de couleurs
    • E. Changer l’affichage des éléments
      • 1. Les types d'affichage
      • 2. Changer l'affichage
      • 3. Créer une barre de navigation
    • F. L'insertion des vidéos
    • G. Les images de remplacement
    • H. Les espaces pour les colonnes
      • 1. Les marges des colonnes
      • 2. Les remplissages des colonnes
    • I. Des classes pour le texte
      • 1. Les alignements
      • 2. Des styles de mise en forme
      • 3. L'alignement vertical
      • 4. D'autres classes pour le texte
  • Chapitre 13 : Les templates, les thèmes et les sites
    • A. Les objectifs
    • B. Les templates
      • 1. Utiliser les templates
      • 2. Télécharger les templates
    • C. Le template Carousel
      • 1. Les fichiers du template
      • 2. Personnaliser l'en-tête
      • 3. Personnaliser le menu de navigation
      • 4. Personnaliser la recherche
      • 5. Le carousel
      • 6. Les images d'en-tête
      • 7. Les textes de présentation
      • 8. Le pied de page
    • D. Le template Album
      • 1. Les fichiers du template
      • 2. La structure de l'en-tête
      • 3. Personnaliser les sections de l'en-tête
      • 4. Personnaliser le menu de navigation
      • 5. Le bandeau supérieur
      • 6. L'album photo
      • 7. Personnaliser le pied de page
    • E. Les thèmes Bootstrap
    • F. Des sites construits avec Bootstrap
    • Index

Auteur

Christophe AUBRYEn savoir plus

Responsable pédagogique dans un centre de formation et formateur sur les technologies Web et les Arts graphiques pendant plus de quinze ans, Christophe AUBRY est aujourd'hui dirigeant de la société netPlume spécialisée dans la rédaction pédagogique et la création de sites internet. Auteur de nombreux livres et vidéos aux Editions ENI (HTML/CSS, RWD, WordPress, Drupal, Joomla…), il reste au fait des nouveautés concernant la conception des sites web en effectuant une veille technologique régulière.

Caractéristiques

  • Niveau Initié à Confirmé
  • Nombre de pages 296 pages
  • Parution janvier 2020
    • Livre (broché) - 17 x 21 cm
    • ISBN : 978-2-409-02247-0
    • EAN : 9782409022470
    • Ref. ENI : OW24BOO
  • Niveau Initié à Confirmé
  • Parution janvier 2020
    • HTML
    • ISBN : 978-2-409-02248-7
    • EAN : 9782409022487
    • Ref. ENI : LNOW24BOO

Téléchargements

En complétant ce formulaire, vous acceptez d'être contacté afin de recevoir des informations sur nos produits et services ainsi que nos communications marketing. Vous aurez la possibilité de vous désabonner de nos communications à tout moment. Pour plus d'informations sur notre politique de protection des données, cliquez ici.
  • Des fichiers complémentaires (8,74 Mo)