HTML/CSS avancé et Bootstrap

Section 13.4.1 : HTML/CSS avancé et Bootstrap

🎯 Objectif pédagogique

Maîtriser HTML sémantique, CSS avancé (Flexbox, Grid) et Bootstrap pour construire des interfaces web responsive et professionnelles rapidement.

HTML sémantique

L'HTML sémantique utilise des balises qui décrivent le sens du contenu, pas juste son apparence. Cela améliore l'accessibilité, le SEO et la maintenabilité du code.

<!-- NON sémantique -->
<div class="header">
  <div class="nav">...</div>
</div>
<div class="main">
  <div class="article">...</div>
  <div class="sidebar">...</div>
</div>
<div class="footer">...</div>

<!-- Sémantique -->
<header>
  <nav>...</nav>
</header>
<main>
  <article>...</article>
  <aside>...</aside>
</main>
<footer>...</footer>

Flexbox : aligner en une dimension

Flexbox gère l'alignement sur un axe (horizontal OU vertical) :

.container {
  display: flex;
  justify-content: space-between;  /* Axe principal */
  align-items: center;              /* Axe croisé */
  gap: 16px;                        /* Espacement */
}

/* Direction */
.container { flex-direction: row; }     /* Défaut : horizontal */
.container { flex-direction: column; }  /* Vertical */

/* Wrap */
.container { flex-wrap: wrap; }         /* Retour à la ligne */

/* Flex sur les enfants */
.item { flex: 1; }           /* Prendre l espace disponible */
.item { flex: 0 0 200px; }   /* Taille fixe 200px, pas de grow */

CSS Grid : layouts en deux dimensions

Grid gère les layouts en lignes ET colonnes simultanément :

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* 3 colonnes égales */
  grid-template-rows: auto;
  gap: 24px;
}

/* Responsive */
.grid {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* Placement explicite */
.hero {
  grid-column: 1 / -1;  /* Toute la largeur */
}

.sidebar {
  grid-row: 2 / 4;       /* Span 2 lignes */
}

Bootstrap : prototyper rapidement

Bootstrap est le framework CSS le plus populaire. Il fournit un système de grille, des composants prêts à l'emploi et des utilitaires CSS qui permettent de construire une interface en quelques minutes.

<!-- Grille responsive Bootstrap -->
<div class="container">
  <div class="row">
    <div class="col-12 col-md-8">
      <h1>Contenu principal</h1>
    </div>
    <div class="col-12 col-md-4">
      <h2>Sidebar</h2>
    </div>
  </div>
</div>

<!-- Card Bootstrap -->
<div class="card" style="width: 18rem;">
  <img src="image.jpg" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Titre</h5>
    <p class="card-text">Description...</p>
    <a href="#" class="btn btn-primary">Action</a>
  </div>
</div>

<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">
    <a class="navbar-brand" href="#">MonApp</a>
    <button class="navbar-toggler" type="button"
            data-bs-toggle="collapse" data-bs-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" href="#">Accueil</a>
        </li>
      </ul>
    </div>
  </div>
</nav>