Typographie, images, tableaux et icônes

Typographie, images, tableaux et icônes — Cours Bootstrap 5

Leçon 1

La typographie

Tableau: Les classes de texte

Classe	Effet
`h1` à `h6`	donne l'apparence d'un titre à n'importe quel élément
`display-1` à `display-6`	très grands titres d'accroche
`lead`	paragraphe d'introduction, plus grand
`fs-1` à `fs-6`	taille de police
`fw-bold`, `fw-semibold`, `fw-light`	graisse
`text-muted` / `text-body-secondary`	texte discret
`small`, `mark`	petit texte, surlignage
`list-unstyled`, `list-inline`	listes sans puces, listes en ligne
`blockquote` + `blockquote-footer`	citation

Leçon 2

Les images

Classe	Effet
`img-fluid`	`max-width: 100%; height: auto;` : l'image ne déborde jamais
`rounded`, `rounded-circle`	coins arrondis, cercle
`img-thumbnail`	bordure et padding façon vignette
`object-fit-cover`	recadre l'image dans sa boîte
`float-start` + `ms-3`	image habillée par le texte

Leçon 3

Les tableaux

Classe	Effet
`table`	obligatoire : le style de base
`table-striped`	une ligne sur deux grisée
`table-hover`	ligne surlignée au survol
`table-bordered` / `table-borderless`	bordures partout / aucune
`table-sm`	tableau compact
`table-dark`, `table-primary`…

Leçon 4

Les icônes : Bootstrap Icons

Vidéo · À regarder

Apprendre BOOTSTRAP 5 & HTML en créant son CV Web [TUTO COMPLET]

H2Prog · YouTube

Regarde de 38:37 à 53:2914 min 52 s

Ouvrir sur YouTube à 38:37

Travaux pratiques

La carte de contact

Exercices

Exercice 4.1

Choisis la bonne réponse

1Quelle classe rend une image fluide ?
2Pour un très grand titre d'accroche :
3Quelle classe est obligatoire sur un tableau Bootstrap ?
4Le défilement horizontal d'un tableau sur mobile se met…
5Une icône seule dans un bouton nécessite…
6lead sert à…

0/6 répondues

Exercice 4.2

Le tableau des notes

L'essentiel du chapitre

À retenir

Texte : display-*, lead, fs-*, fw-*, text-body-secondary, list-unstyled. La balise pour le sens, la classe pour l'apparence.
Images : img-fluid, rounded-circle, img-thumbnail, object-fit-cover.
Tableaux : table + table-striped, table-hover, table-dark, align-middle, conteneur table-responsive.
Icônes : Bootstrap Icons par CDN, <i class="bi bi-nom"> avec aria-hidden="true".

Une section d'accroche

html

<header class="py-5 text-center">
  <h1 class="display-4 fw-bold">Apprends le web à Casablanca</h1>
  <p class="lead">HTML, CSS, Bootstrap et JavaScript en 12 semaines.</p>
</header>

Un tableau Bootstrap complet

html

<div class="table-responsive">
  <table class="table table-striped table-hover align-middle">
    <caption>Tarifs 2026-2027</caption>
    <thead class="table-dark">
      <tr><th scope="col">Formule</th><th scope="col">Durée</th><th scope="col">Prix</th></tr>
    </thead>
    <tbody>
      <tr><th scope="row">HTML et CSS</th><td>8 semaines</td><td>3 500 DH</td></tr>
      <tr class="table-success"><th scope="row">Pack complet</th><td>14 semaines</td><td>5 900 DH</td></tr>
    </tbody>
  </table>
</div>

Installer et utiliser Bootstrap Icons

html

<!-- dans le head -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

<!-- dans la page -->
<a href="mailto:anas@exemple.ma"><i class="bi bi-envelope" aria-hidden="true"></i> anas@exemple.ma</a>
<button class="btn btn-danger"><i class="bi bi-trash" aria-hidden="true"></i> Supprimer</button>
<button class="btn btn-outline-secondary" aria-label="Fermer"><i class="bi bi-x-lg" aria-hidden="true"></i></button>