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

• Des fichiers complémentaires (2 026 Ko)

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