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

Auteur(s) :

Aubry, Christophe (1963-....) Découvrir l'auteur

Résumé

Destiné aux concepteurs de sites web avertis, cet ouvrage permet d'apprendre à installer Bootstrap et à utiliser les règles CSS3. Les exemples de code sont téléchargeables, ainsi que la version numérique. ©Electre 2022

Éditeur(s)
- Éditions ENI
Date
- C 2022
Notes
- La couv. porte e plus : "En téléchargement : code des exemples"
- La 4e de couv. indique : "Sur www.editions-eni.fr : code des exemples"
- Contient un "flashcode" permettant d'accéde à des conteus via Internet
Langues
- Français
Description matérielle
- 1 vol. (264 p.) : ill. ; 22 cm
Collections
- Objectif web
Sujet(s)
ISBN
- 978-2-409-03667-5
Indice
- 681.51 Internet
Quatrième de couverture
- Bootstrap 5 pour l'intégrateur web
  Concevez des sites au design moderne
  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
Tables des matières
- - Bootstrap 5 pour l'intégrateur web
  - Concevez des sites au design moderne
  - Éditions ENI
  - Chapitre 1 : Introduction
  - A. Le développement des sites web11
  - B. Les fonctionnalités de Bootstrap12
  - C. La compatibilité avec les navigateurs12
  - D. Télécharger les exemples12
  - Chapitre 2 : Installer Bootstrap
  - A. Les objectifs15
  - B. Installer Bootstrap15
  - 1. Télécharger la distribution Bootstrap15
  - 2. Lier Bootstrap aux fichiers HTML16
  - C. Le dossier de distribution18
  - 1. Les fichiers du dossier de distribution18
  - 2. Le dossier CSS18
  - 3. Le dossier JS20
  - D. Un site Bootstrap lié aux fichiers locaux20
  - 1. Le dossier du site20
  - 2. Les liaisons aux fichiers CSS et JS21
  - 3. Un exemple de page Bootstrap22
  - E. Un site Bootstrap lié aux fichiers par CDN23
  - 1. Les réseaux de diffusion de contenu23
  - 2. Les liaisons au fichier CSS24
  - 3. La liaison aux fichiers JS24
  - 4. Un exemple de page Bootstrap25
  - F. Les types de sites Bootstrap26
  - Chapitre 3 : La mise en page avec Bootstrap
  - A. L'objectif29
  - B. Définir le viewport29
  - C. La largeur des boîtes29
  - D. Les conteneurs30
  - E. La largeur fixe des conteneurs31
  - 1. Les requêtes de média31
  - 2. La largeur maximale des conteneurs32
  - F. La largeur fluide des conteneurs34
  - G. La grille de mise en page34
  - 1. Les concepts de construction34
  - 2. Définir les classes pour les colonnes35
  - H. Des exemples de grille36
  - 1. Une grille sans taille d'écran ni nombre de colonnes36
  - 2. Une grille sans taille d'écran mais avec un nombre de colonnes39
  - 3. Une grille avec taille d'écran et nombre de colonnes42
  - 4. Une grille avec plusieurs largeurs de colonnes46
  - I. Des grilles spéciales49
  - 1. Plusieurs lignes dans une ligne49
  - 2. Les lignes incomplètes50
  - 3. Les lignes débordantes52
  - 4. Les colonnes sans gouttière52
  - 5. Décaler des colonnes53
  - 6. Imbriquer des lignes 156
  - J. Les alignements des colonnes58
  - 1. L'alignement horizontal58
  - 2. L'alignement vertical dans les lignes60
  - 3. L'alignement vertical dans les colonnes62
  - K. Ordonner les colonnes63
  - Chapitre 4 : Le texte
  - A. L'objectif69
  - B. L'uniformisation des affichages69
  - 1. Le rendu des navigateurs69
  - 2. Le corps de la page69
  - 3. Les marges des en-têtes, des paragraphes, des listes et du texte préformaté69
  - 4. D'autres éléments70
  - C. Les règles CSS pour les en-têtes70
  - 1. Les sélecteurs d'éléments des en-têtes70
  - 2. Les sélecteurs de classe des en-têtes71
  - 3. L'affichage de grands en-têtes72
  - D. Les paragraphes72
  - E. Les mises en évidence73
  - F. Les abréviations74
  - G. Les citations75
  - H. Les listes76
  - 1. Les listes classiques76
  - 2. Les listes sans style77
  - 3. Les listes en ligne77
  - 4. Les listes de définitions78
  - I. Afficher du code79
  - 1. L'élément <code>79
  - 2. L'élément <pre>80
  - 3. L'élément <variable>81
  - 4. L'élément <kbd>81
  - 5. L'élément <samp>81
  - Chapitre 5 : Les images, les figures et les carousels
  - A. L'objectif85
  - B. Les images responsives85
  - C. Les bordures de l'image86
  - D. Aligner les images87
  - E. Les sources des images89
  - F. Les figures89
  - G. Les carousels91
  - 1. Un carousel simple91
  - 2. Un carousel avec des boutons de contrôle93
  - 3. Un carousel avec des légendes94
  - Chapitre 6 : Les tableaux
  - A. L'objectif99
  - B. Les tableaux simples99
  - 1. Les tableaux en pleine largeur99
  - 2. Les tableaux à fond sombre101
  - 3. Les en-têtes de tableaux101
  - C. Les lignes en alternance101
  - D. Les tableaux encadrés102
  - E. Le survol des lignes103
  - F. Les tableaux étroitisés103
  - G. Les mises en évidence colorée104
  - H. La légende des tableaux104
  - I. Les tableaux responsives105
  - Chapitre 7 : Les formulaires
  - A. L'objectif109
  - B. La structure de base109
  - 1. Le formulaire Bootstrap109
  - 2. La hauteur des champs111
  - 3. Les champs en lecture seule112
  - C. Les sélecteurs de choix114
  - 1. Les cases à cocher et les boutons radio standards114
  - 2. Les cases à cocher et les boutons radio en ligne115
  - 3. Les sélecteurs à bascule116
  - 4. Les boutons à bascule117
  - 5. Les listes d'options117
  - D. La sélection de fichiers118
  - E. Des éléments de mise en forme119
  - 1. Utiliser des étiquettes flottantes119
  - 2. L'aide contextuelle120
  - 3. La validation des formulaires121
  - F. Ajouter des informations aux champs121
  - 1. L'objectif121
  - 2. Ajouter des informations supplémentaires121
  - 3. Les champs de saisie multiples123
  - 4. Les informations supplémentaires multiples124
  - 5. Insérer des boutons124
  - Chapitre 8 : Les composants d'interface
  - A. L'objectif127
  - B. Les badges127
  - 1. L'objectif L127
  - 2. Les badges colorés127
  - 3. Les badges arrondis128
  - 4. Les badges pour les liens129
  - 5. Insérer des badges dans du texte130
  - 6. Insérer un badge dans un bouton130
  - C. Les alertes131
  - 1. L'objectif131
  - 2. Les alertes simples131
  - 3. Les alertes avec des liens132
  - 4. Des alertes riches en texte134
  - 5. Fermer une fenêtre d'alerte134
  - D. Les barres de progression135
  - 1. L'objectif135
  - 2. La barre de progression simple136
  - 3. L'étiquette de la valeur137
  - 4. La hauteur de la barre137
  - 5. Les barres de progression colorées138
  - 6. Les barres de progression hachurées138
  - 7. Les barres de progression animées139
  - 8. Les barres de progression empilées139
  - E. Les listes d'éléments140
  - 1. L'objectif140
  - 2. Une liste simple140
  - 3. L'élément actif141
  - 4. Un élément désactivé141
  - 5. Une liste horizontale142
  - 6. Les listes de boutons142
  - 7. Liste sans bordure143
  - 8. Les listes colorées144
  - 9. Les listes avec des badges145
  - 10. Les listes riches en texte145
  - 11. Les listes d'items et de textes147
  - 12. Les listes numérotées149
  - F. Les cartes149
  - 1. L'objectif149
  - 2. Une carte simple149
  - 3. Des cartes plus élaborées150
  - G. Les bulles d'aide153
  - 1. L'objectif153
  - 2. Les paramètres techniques153
  - 3. Un exemple de bulles d'aide153
  - H. Les bulles d'aide élaborées155
  - I. Le fil d'Ariane156
  - J. La pagination157
  - 1. L'objectif157
  - 2. Un fil d'Ariane simple157
  - 3. Utiliser des icônes158
  - 4. Des éléments de mise en forme159
  - K. L'accordéon159
  - L. Les fenêtres modales162
  - 1. L'objectif162
  - 2. Une fenêtre modale simple162
  - 3. Les options des fenêtres modales164
  - M. Les roues de chargement166
  - 1. L'objectif166
  - 2. La roue simple166
  - 3. La roue grossissante168
  - 4. La taille des roues168
  - 5. Utiliser des boutons169
  - N. Les notifications170
  - 1. L'objectif170
  - 2. Une notification simple170
  - 3. Une notification personnalisée171
  - O. Synchroniser le défilement172
  - 1. Les objectifs172
  - 2. Utiliser une barre de navigation172
  - 3. Utiliser une liste groupée de liens175
  - Chapitre 9 : Les boutons
  - A. L'objectif181
  - B. Les boutons classiques181
  - 1. Les boutons simples181
  - 2. Les boutons colorés181
  - 3. Les boutons en contour182
  - 4. La taille des boutons182
  - 5. Les états des boutons183
  - C. Les blocs de boutons183
  - 1. Des boutons en pleine largeur183
  - 2. Des boutons de largeur imposée184
  - 3. Des boutons centrés185
  - D. Les groupes de boutons185
  - E. Les boutons déroulants186
  - 1. L'objectif186
  - 2. Un bouton déroulant simple186
  - 3. Des boutons colorés187
  - 4. Des boutons divisés188
  - 5. Les dimensions des boutons déroulants189
  - 6. L'orientation du symbole189
  - 7. L'état des items190
  - Chapitre 10 : La navigation
  - A. L'objectif193
  - B. Une barre de navigation simple193
  - 1. Une navigation avec une liste193
  - 2. Une navigation des liens194
  - C. Les alignements194
  - D. Les options de mise en forme195
  - 1. Utiliser des onglets195
  - 2. Utiliser des boutons196
  - 3. Une barre de navigation justifiée196
  - E. Une barre de navigation flexible197
  - F. Une barre de navigation avec bouton déroulant198
  - Chapitre 11 : Les menus de navigation
  - A. L'objectif201
  - B. Insérer un menu de navigation complet201
  - 1. La structure générale201
  - 2. Le conteneur général202
  - 3. La dénomination du site203
  - 4. Le menu hamburger203
  - 5. Le menu de navigation203
  - 6. Les items du menu203
  - 7. Le champ de recherche204
  - C. Les options des menus de navigation204
  - 1. Insérer un texte204
  - 2. Les jeux de couleurs205
  - 3. Le positionnement du menu de navigation205
  - Chapitre 12 : Les utilitaires
  - A. Les objectifs209
  - B. Les bordures209
  - 1. Ajouter une bordure209
  - 2. Gérer les bordures sur les côtés210
  - 3. Les jeux de couleurs211
  - 4. Les coins arrondis212
  - C. Le flottement213
  - 1. Appliquer un flottement214
  - 2. Le flottement responsive214
  - D. Les jeux de couleurs215
  - E. Changer l'affichage des éléments216
  - 1. Les types d'affichage216
  - 2. Changer l'affichage217
  - 3. Créer une barre de navigation217
  - F. Ajouter de la transparence218
  - G. Ajouter des ombres portées219
  - H. Les espaces pour les colonnes221
  - 1. La gestion des espaces221
  - 2. La syntaxe utilisée221
  - 3. Des marges supplémentaires222
  - 4. Des remplissages supplémentaires224
  - 5. Centrer horizontalement225
  - 6. Des espaces verticaux dans une grille226
  - I. La taille des colonnes227
  - 1. Appliquer une largeur aux colonnes227
  - 2. Appliquer une hauteur aux colonnes227
  - J. Positionner les éléments228
  - 1. Le positionnement dans les pages web228
  - 2. Exemples de positionnement228
  - K. Des classes pour le texte229
  - 1. Les alignements229
  - 2. La hauteur de ligne231
  - 3. Les classes pour les caractères232
  - Chapitre 13 : Les templates, les thèmes et les sites
  - A. Les objectifs239
  - B. Les templates239
  - 1. Utiliser les templates239
  - 2. Télécharger les templates239
  - C. Le template Carousel240
  - 1. Les fichiers du template240
  - 2. Personnaliser l'en-tête242
  - 3. Personnaliser le menu de navigation242
  - 4. Personnaliser la recherche243
  - 5. Le carousel244
  - 6. Les images d'en-tête245
  - 7. Les textes de présentation246
  - 8. Le pied de page247
  - D. Le template Album247
  - 1. Les fichiers du template247
  - 2. La structure de l'en-tête248
  - 3. Personnaliser les sections de l'en-tête249
  - 4. Personnaliser le menu de navigation250
  - 5. Le bandeau supérieur251
  - 6. L'album photo252
  - 7. Personnaliser le pied de page255
  - E. Les thèmes Bootstrap256
  - Index259
Origine de la notice:
- Electre