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. Livres et vidéos
  2. Bootstrap 5 pour l'intégrateur web - Concevez des sites au design moderne

Bootstrap 5 pour l'intégrateur web Concevez des sites au design moderne

1 avis

Informations

Livraison possible dès le 17 juin 2024
  • Livraison à partir de 0,01 €
  • Version en ligne offerte pendant 1 an
Livres rédigés par des auteurs francophones et imprimés à Nantes

Caractéristiques

  • Livre (broché) - 17 x 21 cm
  • ISBN : 978-2-409-03667-5
  • EAN : 9782409036675
  • Ref. ENI : OW5BOO

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-03668-2
  • EAN : 9782409036682
  • Ref. ENI : LNOW5BOO
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 5.1 de Bootstrap. Vous...
Consulter des extraits du livre en ligne Aperçu du livre papier
  • Niveau Initié à Confirmé
  • Nombre de pages 264 pages
  • Parution août 2022
  • Niveau Initié à Confirmé
  • Parution août 2022
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 5.1 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.

Téléchargements

Introduction
  1. Le développement des sites web
  2. Les fonctionnalités de Bootstrap
  3. La compatibilité avec les navigateurs
  4. Télécharger les exemples
Installer Bootstrap
  1. Les objectifs
  2. Installer Bootstrap
    1. 1. Télécharger la distribution Bootstrap
    2. 2. Lier Bootstrap aux fichiers HTML
  3. Le dossier de distribution
    1. 1. Les fichiers du dossier de distribution
    2. 2. Le dossier css
    3. 3. Le dossier js
  4. Un site Bootstrap lié aux fichiers locaux
    1. 1. Le dossier du site
    2. 2. Les liaisons aux fichiers CSS et JS
    3. 3. Un exemple de page Bootstrap
  5. Un site Bootstrap lié aux fichiers par CDN
    1. 1. Les réseaux de diffusion de contenu
    2. 2. Les liaisons au fichier CSS
    3. 3. La liaison aux fichiers JS
    4. 4. Un exemple de page Bootstrap
  6. Les types de sites Bootstrap
La mise en page avec Bootstrap
  1. L'objectif
  2. Définir le viewport
  3. La largeur des boîtes
  4. Les conteneurs
  5. La largeur fixe des conteneurs
    1. 1. Les requêtes de média
    2. 2. La largeur maximale des conteneurs
  6. La largeur fluide des conteneurs
  7. La grille de mise en page
    1. 1. Les concepts de construction
    2. 2. Définir les classes pour les colonnes
  8. Des exemples de grille
    1. 1. Une grille sans taille d’écran ni nombrede colonnes
    2. 2. Une grille sans taille d’écran mais avecun nombre de colonnes
    3. 3. Une grille avec taille d’écran et nombrede colonnes
    4. 4. Une grille avec plusieurs largeurs de colonnes
  9. 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. Décaler des colonnes
    6. 6. Imbriquer des lignes
  10. Les alignements des colonnes
    1. 1. L’alignement horizontal
    2. 2. L’alignement vertical dans les lignes
    3. 3. L’alignement vertical dans les colonnes
  11. Ordonner les colonnes
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 classe 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. Afficher du code
    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 carousels
  1. L'objectif
  2. Les images responsives
  3. Les bordures de l'image
  4. Aligner les images
  5. Les sources des images
  6. Les figures
  7. Les carousels
    1. 1. Un carousel simple
    2. 2. Un carousel avec des boutons de contrôle
    3. 3. Un carousel avec des légendes
Les tableaux
  1. L’objectif
  2. Les tableaux simples
    1. 1. Les tableaux en pleine largeur
    2. 2. Les tableaux à fond sombre
    3. 3. Les en-têtes de tableaux
  3. Les lignes en alternance
  4. Les tableaux encadrés
  5. Le survol des lignes
  6. Les tableaux étroitisés
  7. Les mises en évidence colorée
  8. La légende des tableaux
  9. Les tableaux responsives
Les formulaires
  1. L'objectif
  2. La structure de base
    1. 1. Le formulaire Bootstrap
    2. 2. La hauteur des champs
    3. 3. Les champs en lecture seule
  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 sélecteurs à bascule
    4. 4. Les boutons à bascule
    5. 5. Les listes d’options
  4. La sélection de fichiers
  5. Des éléments de mise en forme
    1. 1. Utiliser des étiquettes flottantes
    2. 2. L’aide contextuelle
    3. 3. La validation des formulaires
  6. Ajouter des informations aux champs
    1. 1. L’objectif
    2. 2. Ajouter des informations supplémentaires
    3. 3. Les champs de saisie multiples
    4. 4. Les informations supplémentaires multiples
    5. 5. Insérer des boutons
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 pour les liens
    5. 5. Insérer des badges dans du texte
    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. Des alertes riches en texte
    5. 5. Fermer une fenêtre d’alerte
  4. Les barres de progression
    1. 1. L’objectif
    2. 2. La barre de progression simple
    3. 3. L’étiquette de la valeur
    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 empilées
  5. Les listes d'éléments
    1. 1. L’objectif
    2. 2. Une liste simple
    3. 3. L’élément actif
    4. 4. Un élément désactivé
    5. 5. Une liste horizontale
    6. 6. Les listes de boutons
    7. 7. Liste sans bordure
    8. 8. Les listes colorées
    9. 9. Les listes avec des badges
    10. 10. Les listes riches en texte
    11. 11. Les listes d’items et de textes
    12. 12. Les listes numérotées
  6. Les cartes
    1. 1. L’objectif
    2. 2. Une carte simple
    3. 3. Des cartes plus élaborées
  7. Les bulles d'aide
    1. 1. L’objectif
    2. 2. Les paramètres techniques
    3. 3. Un exemple de bulles d’aide
  8. Les bulles d'aide élaborées
  9. Le fil d'Ariane
  10. La pagination
    1. 1. L’objectif
    2. 2. Un fil d’Ariane simple
    3. 3. Utiliser des icônes
    4. 4. Des éléments de mise en forme
  11. L'accordéon
  12. Les fenêtres modales
    1. 1. L’objectif
    2. 2. Une fenêtre modale simple
    3. 3. Les options des fenêtres modales
  13. Les roues de chargement
    1. 1. L’objectif
    2. 2. La roue simple
    3. 3. La roue grossissante
    4. 4. La taille des roues
    5. 5. Utiliser des boutons
  14. Les notifications
    1. 1. L’objectif
    2. 2. Une notification simple
    3. 3. Une notification personnalisée
  15. Synchroniser le défilement
    1. 1. Les objectifs
    2. 2. Utiliser une barre de navigation
    3. 3. Utiliser une liste groupée de liens
Les boutons
  1. L'objectif
  2. Les boutons classiques
    1. 1. Les boutons simples
    2. 2. Les boutons colorés
    3. 3. Les boutons en contour
    4. 4. La taille des boutons
    5. 5. Les états des boutons
  3. Les blocs de boutons
    1. 1. Des boutons en pleine largeur
    2. 2. Des boutons de largeur imposée
    3. 3. Des boutons centrés
  4. Les groupes de boutons
  5. Les boutons déroulants
    1. 1. L’objectif
    2. 2. Un bouton déroulant simple
    3. 3. Des boutons colorés
    4. 4. Des boutons divisés
    5. 5. Les dimensions des boutons déroulants
    6. 6. L’orientation du symbole
    7. 7. L’état des items
La navigation
  1. L'objectif
  2. Une barre de navigation simple
    1. 1. Une navigation avec une liste
    2. 2. Une navigation des liens
  3. Les alignements
  4. Les options de mise en forme
    1. 1. Utiliser 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 bouton déroulant
Les menus de navigation
  1. L'objectif
  2. Insérer un menu de navigation complet
    1. 1. La structure générale
    2. 2. Le conteneur général
    3. 3. La dénomination du site
    4. 4. Le menu hamburger
    5. 5. Le menu de navigation
    6. 6. Les items du menu
    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
Les utilitaires
  1. Les objectifs
  2. Les bordures
    1. 1. Ajouter une bordure
    2. 2. Gérer les bordures sur les côtés
    3. 3. Les jeux de couleurs
    4. 4. Les coins arrondis
  3. Le flottement
    1. 1. Appliquer un flottement
    2. 2. Le flottement responsive
  4. Les jeux de couleurs
  5. Changer l’affichage des éléments
    1. 1. Les types d’affichage
    2. 2. Changer l’affichage
    3. 3. Créer une barre de navigation
  6. Ajouter de la transparence
  7. Ajouter des ombres portées
  8. Les espaces pour les colonnes
    1. 1. La gestion des espaces
    2. 2. La syntaxe utilisée
    3. 3. Des marges supplémentaires
    4. 4. Des remplissages supplémentaires
    5. 5. Centrer horizontalement
    6. 6. Des espaces verticaux dans une grille
  9. La taille des colonnes
    1. 1. Appliquer une largeur aux colonnes
    2. 2. Appliquer une hauteur aux colonnes
  10. Positionner les éléments
    1. 1. Le positionnement dans les pages web
    2. 2. Exemples de positionnement
  11. Des classes pour le texte
    1. 1. Les alignements
    2. 2. La hauteur de ligne
    3. 3. Les classes pour les caractères
Les templates, les thèmes et les sites
  1. Les objectifs
  2. Les templates
    1. 1. Utiliser les templates
    2. 2. Télécharger les templates
  3. Le template Carousel
    1. 1. Les fichiers du template
    2. 2. Personnaliser l’en-tête
    3. 3. Personnaliser le menu de navigation
    4. 4. Personnaliser la recherche
    5. 5. Le carousel
    6. 6. Les images d’en-tête
    7. 7. Les textes de présentation
    8. 8. Le pied de page
  4. Le template Album
    1. 1. Les fichiers du template
    2. 2. La structure de l’en-tête
    3. 3. Personnaliser les sections de l’en-tête
    4. 4. Personnaliser le menu de navigation
    5. 5. Le bandeau supérieur
    6. 6. L’album photo
    7. 7. Personnaliser le pied de page
  5. Les thèmes Bootstrap
5/5 1 avis

Très bien, conforme à mes attentes, je recommande !

Anonyme
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

  • InDesign 2023 Les fondamentaux de la mise en page
  • HTML5 et CSS 3 Maîtrisez les standards de la création de sites web (3e édition)
  • Photoshop, Illustrator et InDesign 2023 Coffret de 3 livres : Maîtrisez la suite graphique Adobe
  • 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 Un framework pour concevoir vos sites web
  • LaTeX Concevez vos premiers documents élaborés et structurés
  • WordPress Créer et gérer blogs et sites web
  • Drupal 9 Créer des sites structurés
  • LaTeX Concevez des documents élaborés et structurés
  • Développement Fullstack Coffret de 3 livres : HTML5, CSS3, C#8 et ASP.Net Core - Version en ligne
  • Affinity Photo Maîtrisez la retouche et le montage photos
  • WordPress et WooCommerce (2e édition) Créer votre boutique en ligne
  • WordPress 5 Complément vidéo : Création et mise en valeur des contenus - Version en ligne
  • Flexbox et Grid Créer des sites modernes et responsives
  • 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)
  • jQuery Le framework JavaScript pour des sites dynamiques et interactifs (4e édition)
  • Créez votre premier site web De la conception à la réalisation
  • Responsive Web Design Les techniques modernes de mise en page
  • Illustrator CS6
  • InDesign CS6 Les fonctions PAO essentielles
  • Photoshop CS6 Les fonctions essentielles de retouche et montage photo
  • HTML5 et CSS 3 Exploiter les standards du Web (5e édition)

Nos nouveautés

voir plus