Créez des sites web responsive avec Bootstrap 4

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 :

<nav class="navbar">
   <a class="navbar-brand" href="index.html">
      <img src="/path/to/logo.png" width="40" height="30" alt="Site logo">
      Info School
   </a>
</nav>

À 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 :

<div class="card">
   <img class=”card-img-top” src=”...” alt=”...”>
   <div class="card-body">
      [contenu de la carte]
   </div>
</div>

 À 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.

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 :

<div class="embed-responsive">
   <iframe class="embed-responsive-item" src="..." allowfullscreen></iframe>
</div>

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 :

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 :  

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.

<svg class="bi bi-bootstrap" width="1em" height="1em" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  <path 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"/>
  <path 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"/>
</svg>

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.

<svg class="bi bi-bootstrap text-primary" width="1em" height="1em" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">...</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.

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 !