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

• Des fichiers complémentaires (2 853 ko)

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