Blog ENI : Toute la veille numérique !
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
  1. Supports de cours
  2. Bootstrap 5 - Un framework pour concevoir vos sites web

Bootstrap 5 Un framework pour concevoir vos sites web

Informations

Livraison possible dès le 16 octobre 2024
  • Personnalisable
Livres rédigés par des auteurs francophones et imprimés à Nantes

Caractéristiques

  • Reliure spirale - 17 x 21 cm (Médian)
  • ISBN : 978-2-409-04124-2
  • EAN : 9782409041242
  • Ref. ENI : EIMBOO

Informations

  • Consultable en ligne immédiatement après validation du paiement et pour une durée de 10 ans.
  • Version HTML
Livres rédigés par des auteurs francophones et imprimés à Nantes

Caractéristiques

  • HTML
  • ISBN : 978-2-409-04125-9
  • EAN : 9782409041259
  • Ref. ENI : LNEIMBOO
Bootstrap est certainement l’environnement de conception de site web (framework en anglais) le plus utilisé actuellement. Il facilite l’uti­lisation 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 maîtrisant le langage HTML et les feuilles de style CSS, désirant acquérir toutes les compétences tech­niques nécessaires pour concevoir et créer des sites web avec rapi­dité et efficacité. Il...
Aperçu du livre papier
  • Niveau Confirmé à Expert
  • Nombre de pages 254 pages
  • Parution octobre 2023
  • Niveau Confirmé à Expert
  • Parution octobre 2023
Bootstrap est certainement l’environnement de conception de site web (framework en anglais) le plus utilisé actuellement. Il facilite l’uti­lisation 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 maîtrisant le langage HTML et les feuilles de style CSS, désirant acquérir toutes les compétences tech­niques nécessaires pour concevoir et créer des sites web avec rapi­dité et efficacité. Il a été rédigé avec la version 5.2.3 de Bootstrap.

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

Ensuite, vous apprenez les techniques de mise en page de Boots­trap, basées sur le module CSS3 Flexbox du W3C, pour concevoir des sites Responsive Web Design dont l’affichage s’adaptera auto­matiquement selon l’écran de diffusion (écran d’ordinateur, tablette ou smartphone). Vous apprenez également d’autres techniques de mise en page de Bootstrap : avec les conteneurs, les lignes et les colonnes, organisés sur une grille.

Dans la suite du livre, l’auteur explore 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), avant de consacrer deux chapitres à la navigation, avec l’utilisation des barres et des menus de navigation. L’application de toute une série de règles CSS de Bootstrap, de type utilitaire, pour mettre en forme les éléments de vos contenus (bordures, jeux de couleurs, ombres portées, transparence…) est également détaillée.

Ce livre se termine par l’utilisation d’aides à la conception de vos sites web, avec l’insertion d’icônes Bootstrap ainsi que des exemples de mise en page et des thèmes pour vous permettre de démarrer sur des bases solides.

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

Téléchargements

Introduction
  1. Le développement des sites web
  2. Les fonctionnalités de Bootstrap
  3. La compatibilité avec les navigateurs
Installer Bootstrap
  1. Les objectifs
  2. Les versions de Bootstrap
  3. Les différentes installations de Bootstrap
    1. 1. Un site web lié à Bootstrap parCDN
      1. a. Les réseaux de diffusion de contenu
      2. b. Les liaisons au fichier CSS
      3. c. La liaison aux fichiers JS
      4. d. Un exemple de page Bootstrap
    2. 2. Un site web lié à Bootstrap localement
      1. a. Télécharger la distribution Bootstrap
      2. b. Les dossiers de la distribution
      3. c. La structure du dossier du site d’exemple
      4. d. Les liaisons aux fichiers CSS et JS
      5. e. Un exemple de page conçue avec Bootstrap
    3. 3. Les installations en ligne de commande
  4. Les types de sites Bootstrap
La mise en page avec Bootstrap
  1. L'objectif
  2. Le viewport
  3. Les requêtes de média
  4. Spécifier la largeur des boîtes
  5. Les conteneurs
    1. 1. Exploiter les conteneurs
    2. 2. La largeur fixe des conteneurs
    3. 3. La largeur fluide des conteneurs
    4. 4. La largeur maximale des conteneurs
  6. La grille de mise en page
    1. 1. Les concepts de construction
    2. 2. Définir les classes pour les colonnes
  7. Des exemples de grille
    1. 1. Une grille sans taille d’écran ni alignementde colonnes
    2. 2. Une grille sans taille d’écran, mais avecdes alignements de colonnes
    3. 3. Une grille avec une taille d’écran et deslargeurs de colonnes
    4. 4. Une grille avec plusieurs largeurs pour une colonne
  8. Des grilles spéciales
    1. 1. Plusieurs lignes dans une ligne
    2. 2. Les lignes incomplètes
    3. 3. Les lignes débordantes
    4. 4. Les colonnes sans gouttière
    5. 5. Les colonnes décalées
    6. 6. Les lignes imbriquées
  9. Les marges et les remplissages des grilles
    1. 1. Les classes usuelles
    2. 2. Les marges automatiques
    3. 3. Centrer horizontalement une boîte
  10. Les gouttières des grilles
  11. Les fonctionnalités Flexbox
    1. 1. Flexbox et Bootstrap
    2. 2. Les conteneurs
    3. 3. Les directions d’affichage
    4. 4. L’alignement horizontal
    5. 5. L’alignement vertical
    6. 6. Les alignements individuels
    7. 7. Ordonner les colonnes
    8. 8. Ajuster la largeur du contenu
    9. 9. Des espaces verticaux dans une grille
Le texte
  1. L’objectif
  2. L'uniformisation des affichages
    1. 1. Le rendu des navigateurs
    2. 2. Le corps de la page
    3. 3. Les marges des en-têtes, des paragraphes,des listes et du texte préformaté
    4. 4. D’autres éléments
  3. Les règles CSS pour les en-têtes
    1. 1. Les sélecteurs d’élémentsdes en-têtes
    2. 2. Les sélecteurs de classes des en-têtes
    3. 3. L’affichage de grands en-têtes
  4. Les paragraphes
  5. Les mises en évidence
  6. Les abréviations
  7. Les citations
  8. Les listes
    1. 1. Les listes classiques
    2. 2. Les listes sans style
    3. 3. Les listes en ligne
    4. 4. Les listes de définitions
  9. Le code et les entrées claviers
    1. 1. L’élément <code></code>
    2. 2. L’élément <pre></pre>
    3. 3. L’élément <variable></variable>
    4. 4. L’élément <kbd></kbd>
    5. 5. L’élément <samp></samp>
Les images, les figures et les carrousels
  1. L'objectif
  2. Les images
    1. 1. Les images responsives
    2. 2. Les bordures de l’image
    3. 3. L’alignement des images
    4. 4. Les images en haute définition et en définitionstandard
  3. Les figures
  4. Les carrousels
    1. 1. Un carrousel simple
    2. 2. Un carrousel avec des boutons de contrôle
    3. 3. Un carrousel avec des légendes
    4. 4. Un carrousel avec un fondu enchaîné
    5. 5. Un carrousel avec un temps défini de passage
Les tableaux
  1. L’objectif
  2. Les tableaux simples
    1. 1. Les tableaux en pleine largeur
    2. 2. Les tableaux à fond sombre
    3. 3. L’en-tête des tableaux
  3. Les tableaux en alternance
    1. 1. Les lignes en alternance
    2. 2. Les colonnes en alternance
  4. Les tableaux encadrés
    1. 1. Appliquer des bordures
    2. 2. Des tableaux sans bordures
    3. 3. Lignes séparatrices
  5. Le survol des lignes
  6. Les tableaux étroitisés
  7. La légende des tableaux
  8. Les mises en évidence
    1. 1. Des cellules actives
    2. 2. Des fonds colorés
  9. Les alignements verticaux
  10. Les tableaux responsive
Les formulaires
  1. L'objectif
  2. La structure des formulaires
    1. 1. La structure de base
    2. 2. La hauteur des champs
    3. 3. Les champs en lecture seule et les champs désactivés
  3. Les sélecteurs de choix
    1. 1. Les cases à cocher et les boutons radio standards
    2. 2. Les cases à cocher et les boutons radio enligne
    3. 3. Les cases à cocher à bascule
    4. 4. Les cases à cocher en boutons
    5. 5. Les sélecteurs colorés
    6. 6. Les listes d’options
  4. Les champs de longue saisie
  5. La sélection de fichiers
  6. Des éléments de mise en forme
    1. 1. Les étiquettes flottantes
    2. 2. L’aide contextuelle
    3. 3. La validation des formulaires
  7. Les éléments d'information ajoutés aux champs
    1. 1. Les informations supplémentaires simples
    2. 2. Un titre informatif pour deux champs
    3. 3. Les informations supplémentaires multiples
    4. 4. Ajouter un bouton d’information
Les composants d'interface
  1. L'objectif
  2. Les badges
    1. 1. L’objectif
    2. 2. Les badges colorés
    3. 3. Les badges arrondis
    4. 4. Les badges avec des liens
    5. 5. Insérer un badge dans un titre
    6. 6. Insérer un badge dans un bouton
  3. Les alertes
    1. 1. L’objectif
    2. 2. Les alertes simples
    3. 3. Les alertes avec des liens
    4. 4. Les alertes riches en texte
    5. 5. Fermer une fenêtre d’alerte
  4. Les barres de progression
    1. 1. L’objectif
    2. 2. Les barres de progression simples
    3. 3. Les barres de progression avec un pourcentage
    4. 4. La hauteur de la barre
    5. 5. Les barres de progression colorées
    6. 6. Les barres de progression hachurées
    7. 7. Les barres de progression animées
    8. 8. Les barres de progression successives
  5. Les listes
    1. 1. L’objectif
    2. 2. Les listes simples
    3. 3. L’item actif
    4. 4. Un item désactivé
    5. 5. Les listes horizontales
    6. 6. Les listes de liens
    7. 7. Les listes sans bordures
    8. 8. Les listes colorées
    9. 9. Les listes avec des badges
    10. 10. Les listes riches en texte
    11. 11. Les listes numérotées
    12. 12. Les listes avec des boutons radio et des cases à cocher
  6. Les cartes
    1. 1. L’objectif
    2. 2. Les cartes simples
    3. 3. Les cartes plus élaborées
    4. 4. Les cartes avec un en-tête et un pied depage
    5. 5. Les cartes horizontales
  7. Les bulles d'aide
    1. 1. L’objectif
    2. 2. Les prérequis techniques
    3. 3. La structure des bulles d’aide
    4. 4. Un exemple de bulles d’aide
    5. 5. Les bulles d’aide au survol
    6. 6. Les bulles d’aide élaborées
  8. Le fil d'Ariane
  9. La pagination
    1. 1. L’objectif
    2. 2. Un fil d’Ariane simple
    3. 3. Utiliser des icônes
    4. 4. Les pages actives et inactives
    5. 5. La taille de la barre de pagination
    6. 6. Aligner la barre de pagination
  10. Les accordéons
  11. Les fenêtres modales
    1. 1. L’objectif
    2. 2. Les fenêtres modales simples
    3. 3. Les options des fenêtres modales
  12. Les roues de chargement
    1. 1. L’objectif
    2. 2. Les roues simples
    3. 3. Les roues grossissantes
    4. 4. La taille des roues
    5. 5. Insérer une roue dans un bouton
  13. Les notifications
    1. 1. L’objectif
    2. 2. Les notifications simples
    3. 3. Les notifications personnalisées
    4. 4. Les notifications colorées
  14. Synchroniser le défilement et la navigation
    1. 1. L’objectif
    2. 2. Les barres de navigation horizontales
    3. 3. Les barres de navigation verticales
Les boutons
  1. L'objectif
  2. Les boutons classiques
    1. 1. Les boutons simples
    2. 2. Les boutons colorés
    3. 3. Les boutons avec un contour
    4. 4. La taille des boutons
    5. 5. Les états des boutons
  3. Les blocs de boutons
    1. 1. Les boutons en pleine largeur
    2. 2. Les boutons de largeur imposée
    3. 3. Les boutons centrés
  4. Les groupes de boutons
    1. 1. Les groupes de boutons et de liens
    2. 2. Les groupes de cases à cocher et de boutonsradio
    3. 3. Les barres de navigation avec des boutons
La navigation
  1. L'objectif
  2. Une barre de navigation simple
    1. 1. Une navigation avec une liste
    2. 2. Une navigation avec des liens
  3. Les alignements
  4. Les options de mise en forme
    1. 1. Une barre de navigation avec des onglets
    2. 2. Utiliser des boutons
    3. 3. Une barre de navigation justifiée
  5. Une barre de navigation flexible
  6. Une barre de navigation avec un bouton déroulant
Les menus de navigation
  1. L'objectif
  2. Un menu de navigation complet
    1. 1. La structure générale
    2. 2. Le conteneur général
    3. 3. Le logo ou le nom du site
    4. 4. Le menu hamburger
    5. 5. Le conteneur du menu
    6. 6. Les items du menu de navigation
    7. 7. Le champ de recherche
  3. Les options des menus de navigation
    1. 1. Insérer un texte
    2. 2. Les jeux de couleurs
    3. 3. Le positionnement du menu de navigation
  4. Les menus hors contenu
Les utilitaires
  1. Les objectifs
  2. Les bordures
    1. 1. Les bordures simples
    2. 2. Les bordures colorées
    3. 3. Les bordures arrondies
    4. 4. La taille de l’arrondi des bordures
    5. 5. L’opacité des bordures
    6. 6. L’épaisseur des bordures
  3. Le flottement
    1. 1. Les flottements à gauche et à droite
    2. 2. Le flottement responsive
  4. Les jeux de couleurs
  5. L’affichage des éléments
    1. 1. Les différents types d’affichage
    2. 2. Changer le type d’affichage
    3. 3. Créer une barre de navigation
  6. La transparence
  7. Les ombres portées
  8. La taille des colonnes
    1. 1. Les largeurs des colonnes
    2. 2. Les hauteurs des colonnes
  9. La position des éléments
    1. 1. Les positions absolues
    2. 2. Les positions dans l’écran du navigateur
    3. 3. L’empilement d’éléments
  10. Des classes pour le texte
    1. 1. Les alignements du texte
    2. 2. La hauteur de ligne
    3. 3. Les classes pour les caractères
    4. 4. Les couleurs de fond et de texte
    5. 5. La couleurs des liens
    6. 6. Des liens sur des blocs de mise en page
    7. 7. Le débordement du texte
    8. 8. L’alignement vertical du texte
Les aides à la conception
  1. Les objectifs
  2. Les icônes de Bootstrap
    1. 1. Installer les icônes
    2. 2. Insérer une icône sous la formed’une image
    3. 3. Insérer une icône avec une classeCSS
  3. Les exemples de mises en page
    1. 1. Télécharger les exemples de miseen page
    2. 2. Exploiter un exemple de mise en page
    3. 3. Exploiter les objets de mise en page
  4. Les thèmes pour les sites web
Auteur : Christophe AUBRY

Christophe AUBRY

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. Il est également le créateur de la chaîne YouTube LaTeX et la plume.

En savoir plus

Découvrir tous ses livres

  • HTML5 et CSS 3 Maîtrisez les standards de la création de sites web (3e édition)
  • InDesign 2023 Les fondamentaux de la mise en page
  • Photoshop, Illustrator et InDesign 2023 Les fondamentaux
  • InDesign 2023 Pour PC et Mac
  • WordPress Un CMS pour créer et gérer blogs et sites web (2e édition)
  • Bootstrap 5 pour l'intégrateur web Concevez des sites au design moderne
  • Drupal 9 Créer des sites structurés - Version en ligne
  • LaTeX Concevez des documents élaborés et structurés - Version en ligne
  • Affinity Photo Maîtrisez la retouche et le montage photos - Version en ligne
  • WordPress et WooCommerce (2e édition) Créer votre boutique en ligne - Version en ligne
  • Flexbox et Grid Créer des sites modernes et responsives - Version en ligne
  • InDesign CC pour PC/Mac (édition 2019) Les fonctions essentielles
  • HTML5 et CSS3 Faites évoluer le design de vos sites web (4e édition)
  • Créez votre premier site web De la conception à la réalisation (3e édition) - Version en ligne
  • HTML5 et CSS 3 Exploiter les standards du Web (5e édition)

Nos nouveautés

voir plus