Maintenant que nous savons gérer les éléments typographiques, voyons comment ajouter des supports à une page.
Ajoutez des images
Les images font partie intégrante d’un site web. Notre site ne fait pas exception. "Pimentons" son apparence en lui ajoutant de belles images à la façon Bootstrap !
Ajoutez un logo
Nous commencerons par ajouter un logo à la section d'en-tête. C'est plutôt simple avec Bootstrap. Tout ce que vous avez à faire est d'ajouter une balise <img>
à l'élément .navbar-brand
. Il aura fort probablement besoin d'attributs ou de styles personnalisés pour garantir un dimensionnement harmonieux, comme indiqué dans cet exemple :
class="navbar"
class="navbar-brand" href="index.html"
src="/path/to/logo.png" width="40" height="30" alt="Site logo"
Info School
À présent, modifiez l'élément .navbar-brand
dans vos fichiers afin d'afficher le logo dans la section d'en-tête.
Si besoin, vous pouvez vérifier votre travail dans les fichiers du dossier partie-3/chapitre-3/logo dans le dépôt Git du cours.
Ajoutez des images aux cartes
Les cartes Bootstrap sont très polyvalentes et permettent d’intégrer de multiples éléments. Pour intégrer une image à une carte, vous pouvez ajouter un élément <img>
avec une classe.card-img-top
au même niveau que le <div>
.card-body
, de cette façon :
class="card"
class=”card-img-top” src=”...” alt=”...”
class="card-body"
[contenu de la carte]
À présent, essayez d'ajouter des images aux cartes sur la page d'accueil, ainsi que sur la page Cours (lessons.html). J'ai fourni des images pour les cartes de la page d'accueil et des images pour les cartes de la page des cours.
En cas de besoin, vous pouvez vérifier votre travail dans les fichiers du dossier partie-3/chapitre-3/images-carte dans le dépôt Git du cours.
Ajoutez des vidéos à votre site
Les vidéos constituent un excellent moyen de communiquer des informations en ligne. Elles sont indispensables à notre site d'apprentissage en ligne !
Notre site comportera une vidéo sur la page Détails du cours (lesson-1.html), avec une description. Nous allons utiliser les classes intégrées de Bootstrap pour ajouter des vidéos à partir de sites, tels que YouTube. Pour ce faire, vous devez envelopper l'iframe qui contient la vidéo dans un élément parent, en utilisant la classe .embed-responsive
:
class="embed-responsive"
class="embed-responsive-item" src="..." allowfullscreen
Notez qu'il n'est pas nécessaire d'inclure un attribut frameborder=”0”
à l' <iframe>
: Bootstrap s'en charge.
Les classes intégrées de Bootstrap peuvent également être utilisées pour d'autres types d'éléments, tels qu'embed
, <video>
et <object>
.
Tout comme avec l'exemple <iframe>
ci-dessus, vous pouvez ajouter la classe .embed-responsive-item
pour adapter les styles à n'importe lequel de ces autres éléments.
Bootstrap intègre la possibilité de contrôler le ratio d’affichage de votre vidéo avec les classes de modificateur suivantes :
Classe de modificateur | Rapport d'aspect |
.embed-responsive-21by9 | 21:9 |
embed-responsive-16by9 | 16:9 |
embed-responsive-4by3 | 4:3 |
embed-responsive-1by1 | 1:1 (carré) |
Puisque nous voulons que Bootstrap conserve un rapport 16:9 pour notre vidéo, nous utiliserons la classe de modificateur .embed-responsive-16by9
pour le <div>
parent :
Ajoutez des icônes à votre site web
Dans de nombreuses situations, il vous sera utile d’agrémenter du texte ou des zones de votre site web par des icônes explicites. Intégrée fin 2019, une liste de plus de 500 icônes est maintenant disponible pour vos projets Bootstrap.
Le framework vous propose deux manières de l’installer. Pour les plus aguerris, vous pouvez passer par le terminal avec la commande npm install bootstrap-icons ; la seconde option vous invite à télécharger directement les fichiers sources du dossier GitHub.
Une fois intégrées aux fichiers sources de votre site web, les icônes peuvent être facilement utilisées par l’intermédiaire d’un élément <img>
:
Cependant, si vous souhaitez rendre la customisation de l’icône flexible, c’est-à-dire avoir la possibilité de modifier facilement sa taille ou même sa couleur, il vous faudra intégrer l’élément
<svg>
de l’icône disponible dans les fichiers sources précédemment téléchargés.
class="bi bi-bootstrap" width="1em" height="1em" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"
fill-rule="evenodd" d="M14 3H6a3 3 0 00-3 3v8a3 3 0 003 3h8a3 3 0 003-3V6a3 3 0 00-3-3zM6 2a4 4 0 00-4 4v8a4 4 0 004 4h8a4 4 0 004-4V6a4 4 0 00-4-4H6z" clip-rule="evenodd"
fill-rule="evenodd" d="M10.537 14H7.062V5.545h3.398c1.588 0 2.543.809 2.543 2.11 0 .884-.65 1.675-1.482 1.816v.1c1.143.117 1.904.931 1.904 2.033 0 1.488-1.084 2.396-2.888 2.396zM8.375 6.658v2.467h1.558c1.16 0 1.764-.428 1.764-1.23 0-.78-.568-1.237-1.541-1.237H8.375zm1.898 6.229H8.375v-2.725h1.822c1.236 0 1.887.463 1.887 1.348 0 .896-.627 1.377-1.811 1.377z" clip-rule="evenodd"
En suivant cette méthode, rien de plus facile pour appliquer une couleur à l’icône en utilisant les classes utilitaires Bootstrap text-*
. En ajoutant la classe .text-success
, on applique la couleur verte à l’icône représentant par défaut un succès, une validation.
class="bi bi-bootstrap text-primary" width="1em" height="1em" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"...
Il est temps de commencer la page Détails du cours (lesson-1.html) !
Pour rappel, voilà à quoi ressemble la conception de la page :

Comme vous le voyez, pour créer la page Détails du cours, ainsi qu'intégrer la vidéo, vous devrez utiliser des titres (h1 pour le titre du cours et h2 pour le titre de la section Aperçu) et des listes pour afficher le contenu.
Si nécessaire, vous pouvez vérifier votre travail dans le dossier partie-3/chapitre-3/vidéo du dépôt Git du cours.
En résumé
Vous avez appris à :
Ajouter une image de logo à la barre de navigation avec la classe Bootstrap .navbar-brand.
Ajouter une image au composant carte de Bootstrap avec la classe .card-img-top, nous permettant d’afficher cette dernière en haut du composant.
Utiliser les classes intégrées de Bootstrap pour inclure des vidéos sur vos pages et contrôler leurs ratios d’affichage.
Intégrer des icônes mises à disposition par le framework avec les balises HTML <img> ou <svg>, tout en customisant leur couleur.
Maintenant que vous pouvez créer une mise en page responsive pour vos pages et ajouter des types différents de contenu, vous êtes prêt à améliorer l'expérience utilisateur en ajoutant de l'interactivité au site !