# Système de design Bootstrap

## Aperçu de l’interface du système de design Bootstrap

Filtrez les réservations, validez les champs, vérifiez-les dans une fenêtre modale native et passez du mode clair au mode sombre.

## Référence de conception du système de design Bootstrap

CSS compilé par défaut de Bootstrap 5.3.8 et documentation de la version 5.3. Les valeurs sont des valeurs par défaut, et non des règles de marque obligatoires. Les conversions rem-pixel supposent une racine de 16px ; les tailles de police adaptatives peuvent varier sous le seuil des grands écrans. La page OpenDesign qui les entoure conserve sa propre typographie.

### Couleurs sémantiques et rôles des surfaces

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| --bs-primary | #0d6efd | Couleur de base des actions principales et des liens. |
| --bs-secondary | #6c757d | Famille de couleurs du thème secondaire ; ne correspond pas au rôle adaptatif du texte secondaire du corps. |
| --bs-success | #198754 | Couleur de base des états positifs ; à accompagner d’un libellé. |
| --bs-danger | #dc3545 | Couleur de base du thème d’erreur ou de danger. |
| --bs-warning | #ffc107 | Couleur de base du thème d’avertissement ; vérifier le contraste avec le premier plan. |
| --bs-info | #0dcaf0 | Couleur de base du thème informatif. |
| --bs-body-bg | #fff | Surface de page en mode clair. |
| --bs-body-color | #212529 | Couleur de premier plan du corps en mode clair. |
| --bs-secondary-bg | #e9ecef | Surface secondaire en mode clair. |
| --bs-tertiary-bg | #f8f9fa | Surface de panneau discrète en mode clair. |
| --bs-primary-bg-subtle | #cfe2ff | Surface primaire teintée en mode clair. |
| --bs-primary-text-emphasis | #052c65 | Texte associé aux surfaces primaires subtiles. |
| --bs-border-color | #dee2e6 | Rôle de bordure en mode clair. |
### Typographie du corps et hiérarchie lisible

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| --bs-body-font-size | 1rem | Taille par défaut du corps : 1rem, généralement 16px. |
| --bs-body-line-height | 1.5 | Multiplicateur sans unité : hauteur de ligne généralement de 24px. |
| --bs-body-font-weight | 400 | Graisse normale pour le texte courant. |
| --bs-body-font-family | var(--bs-font-sans-serif) | Pile de polices de l’interface système fournie par Bootstrap. |
| --bs-font-monospace | SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace | Le code et les valeurs techniques utilisent la pile de polices à chasse fixe. |
### Tailles des titres et utilitaires d’affichage

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| h1 / .h1 | 2.5rem | Seuil des grands écrans ; h1–h4 utilisent par défaut une taille de police adaptative. |
| h2 / .h2 | 2rem | Seuil des grands écrans ; h1–h4 utilisent par défaut une taille de police adaptative. |
| h3 / .h3 | 1.75rem | Seuil des grands écrans ; h1–h4 utilisent par défaut une taille de police adaptative. |
| h4 / .h4 | 1.5rem | Seuil des grands écrans ; h1–h4 utilisent par défaut une taille de police adaptative. |
| h5 / .h5 | 1.25rem | Taille fixe de titre par défaut. |
| h6 / .h6 | 1rem | Taille fixe de titre par défaut. |
| .lead | 1.25rem / weight 300 | Texte introductif ; ne remplace pas un titre. |
| .small | 0.875em | Texte de petite taille relative ; à utiliser ponctuellement pour les métadonnées. |
### Échelle des utilitaires d’espacement

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| 0 | 0 | À utiliser avec les utilitaires m/p/gap/g ; p-0, par exemple. |
| 1 | 0.25rem | À utiliser avec les utilitaires m/p/gap/g ; p-1, par exemple. |
| 2 | 0.5rem | À utiliser avec les utilitaires m/p/gap/g ; p-2, par exemple. |
| 3 | 1rem | À utiliser avec les utilitaires m/p/gap/g ; p-3, par exemple. |
| 4 | 1.5rem | À utiliser avec les utilitaires m/p/gap/g ; p-4, par exemple. |
| 5 | 3rem | À utiliser avec les utilitaires m/p/gap/g ; p-5, par exemple. |
| ms / me | inline start / end | Convention pour les côtés logiques ; contrairement à ml/mr dans les anciennes versions de Bootstrap. |
| p-3 p-md-4 | 1rem → 1.5rem at md | Marge intérieure adaptative utilisée dans l’exemple. |
| gap-2 | 0.5rem | Espacement entre les enfants d’un conteneur flex ou grid. |
### Seuils de la grille adaptative

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| xs / .col- | 0 | Palier de base, sans préfixe xs. |
| sm / .col-sm- | 576px | Petit palier ; largeur maximale de .container : 540px. |
| md / .col-md- | 768px | Palier moyen ; largeur maximale de .container : 720px. |
| lg / .col-lg- | 992px | Grand palier ; largeur maximale de .container : 960px. |
| xl / .col-xl- | 1200px | Palier très large ; largeur maximale de .container : 1140px. |
| xxl / .col-xxl- | 1400px | Plus grand palier par défaut ; largeur maximale de .container : 1320px. |
| Grid columns | 12 | Une composition col-lg-7 + col-lg-5 remplit une ligne. |
| Default horizontal gutter | 1.5rem | Marge intérieure de colonne de 0.75rem de chaque côté ; la ligne compense avec des marges négatives. |
### Rayons de bordure et élévation

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| --bs-border-width | 1px | Épaisseur de bordure par défaut. |
| --bs-border-radius | 0.375rem | Champs, cartes et arrondis par défaut. |
| --bs-border-radius-sm | 0.25rem | Arrondi compact. |
| --bs-border-radius-lg | 0.5rem | Arrondi plus prononcé. |
| --bs-border-radius-xl | 1rem | Arrondi pour les grandes surfaces. |
| --bs-border-radius-xxl | 2rem | Arrondi pour les surfaces très grandes. |
| --bs-border-radius-pill | 50rem | Forme de pilule, et non rayon mesuré d’un composant. |
| --bs-box-shadow-sm | 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) | Élévation discrète. |
| --bs-box-shadow | 0 0.5rem 1rem rgba(0, 0, 0, 0.15) | Élévation par défaut. |
| --bs-box-shadow-lg | 0 1rem 3rem rgba(0, 0, 0, 0.175) | Élévation prononcée ; ne l’appliquez pas à toutes les surfaces. |
### Variables de dimensionnement et d’état des boutons

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| --bs-btn-padding-x | 0.75rem | Marge intérieure horizontale par défaut des boutons. |
| --bs-btn-padding-y | 0.375rem | Marge intérieure verticale par défaut des boutons. |
| --bs-btn-font-size | 1rem | Taille par défaut du libellé des boutons. |
| --bs-btn-line-height | 1.5 | Multiplicateur d’interligne par défaut des libellés. |
| --bs-btn-border-width | 1px | Épaisseur de bordure par défaut. |
| --bs-btn-border-radius | var(--bs-border-radius) | Rayon par défaut des boutons. |
| --bs-btn-disabled-opacity | 0.65 | Traitement visuel ; utilisez également l’attribut disabled. |
### Changements de rôles selon le mode clair ou sombre

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| --bs-body-bg | light #fff / dark #212529 | L’arrière-plan de la page suit data-bs-theme. |
| --bs-body-color | light #212529 / dark #dee2e6 | La couleur de premier plan s’adapte à la surface. |
| --bs-border-color | light #dee2e6 / dark #495057 | Bordure adaptée au thème. |
| --bs-primary-bg-subtle | light #cfe2ff / dark #031633 | La couleur d’arrière-plan teintée des états varie selon le mode. |
| --bs-primary-text-emphasis | light #052c65 / dark #6ea8fe | À utiliser avec la surface discrète correspondante. |
| data-bs-theme | light \| dark | À définir globalement sur html ou sur un sous-arbre local. |
## Guide complet du système de conception Bootstrap

Un guide pratique pour choisir, appliquer et évaluer ce système dans une interface réelle.

Des conseils complets, un point de départ pour la mise en œuvre et des liens vers les sources.

## Choisir le système de conception Bootstrap : responsabilités de CSS et de JavaScript

### Une feuille de style, avec comportement de composants en option

> La feuille de style compilée de Bootstrap fournit la grille, la typographie, les utilitaires et l’apparence des composants. Le bundle JavaScript ajoute des extensions interactives telles que Modal, Collapse et Dropdown. Un bouton mis en forme ne nécessite pas JavaScript ; un déclencheur de fenêtre modale utilisant data-bs-toggle, si. L’aperçu fonctionnel charge localement la feuille de style et le bundle 5.3.8 correspondants, afin que ses contrôles illustrent ces comportements réels.

Le filtrage du tableau des réservations, le récapitulatif des erreurs et l’ajout local de lignes relèvent du code de l’application. En distinguant clairement ces éléments, il est possible de remplacer les données fictives par un service sans attribuer à Bootstrap des fonctions de réservation qu’il ne fournit pas.

- CSS : mise en page, typographie, boutons, champs, tableaux et styles d’état.

- Bootstrap JavaScript : ouverture de la fenêtre modale, arrière-plan, touche Échap et comportement du focus.

- Application JavaScript : messages de validation, filtrage des enregistrements et mises à jour locales des données.

Consultez la spécification associée

### Choisir la version compilée de CSS ou une compilation Sass

Utilisez la version compilée de CSS pour démarrer rapidement ou pour un produit qui peut intégrer l’ensemble standard d’utilitaires. Utilisez les sources Sass pour modifier les maps de thème, la génération des utilitaires ou la grille au moment de la compilation. Les propriétés personnalisées de CSS sont pratiques pour personnaliser un composant, mais modifier une variable de couleur racine ne recompile pas toutes les variantes précompilées.

```
$primary: #3159a5;
$border-radius: .5rem;
@import "bootstrap/scss/bootstrap";
```

Référence du code

Consultez la spécification associée

## Système de conception Bootstrap : appliquer les couleurs sémantiques et les modes de couleur

### Associer une surface d’état à sa couleur de premier plan

Les badges de réservation utilisent bg-primary-subtle avec text-primary-emphasis. Il s’agit de rôles sémantiques complémentaires : la couleur de premier plan et l’arrière-plan s’adaptent tous deux lorsque data-bs-theme change. Un arrière-plan bleu brut associé à une couleur de texte grise arbitraire rompt cette relation. Les libellés Réservé, En cours d’utilisation et Brouillon restent également explicites ; la couleur n’est pas leur seul moyen de transmettre l’information.

```
<span class="badge text-primary-emphasis bg-primary-subtle">Reserved</span>
<section data-bs-theme="dark">
  <div class="bg-body text-body border rounded p-3">Theme-scoped content</div>
</section>
```

Référence du code

Consultez la spécification associée

### Limiter la personnalisation au composant

Pour une action personnalisée, surchargez ses propriétés --bs-btn-* locales. Définissez aussi les valeurs de survol et d’activation, en plus de l’arrière-plan au repos. L’exemple ci-dessous est une variante propre à l’application, et non une valeur par défaut de Bootstrap. Limitez cette classe au bouton concerné pour éviter de modifier involontairement toutes les actions principales d’une autre partie de la page.

```
.btn-reserve {
  --bs-btn-color: #fff;
  --bs-btn-bg: #3159a5;
  --bs-btn-border-color: #3159a5;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #274783;
  --bs-btn-hover-border-color: #274783;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #203a6b;
  --bs-btn-active-border-color: #203a6b;
}
```

Référence du code

Consultez la spécification associée

## Système de conception Bootstrap : utiliser la véritable échelle typographique

### Distinguer la sémantique du document de la taille visuelle

Le titre principal de l’aperçu est un élément h1 auquel la classe h3 est appliquée : il reste le titre principal de la page, tout en adoptant une échelle visuelle plus petite, adaptée à un outil. Les titres de section sont des éléments h2 avec le style h5. Bootstrap fournit à la fois des styles par défaut pour les éléments et des classes de titre équivalentes, ce qui permet de faire cette distinction sans sauter de niveaux dans le document.

Le texte courant par défaut est de 1rem, avec une hauteur de ligne de 1.5. Les titres h1 à h4 s’adaptent à la taille de l’écran avant d’atteindre les valeurs du tableau de référence. Une capture d’écran à une seule largeur ne définit donc pas toute l’échelle typographique. Utilisez les styles compilés ou le comportement Sass documenté plutôt que de recopier une taille en pixels mesurée dans une seule fenêtre d’affichage.

Consultez la spécification associée

### Donner au texte secondaire un rôle adapté au thème

text-body-secondary suit le mode de couleur du texte courant. Il convient aux informations complémentaires sur un enregistrement, comme le nom du propriétaire sous le titre d’un équipement. La classe small réduit la taille du texte par rapport à son contexte ; l’appliquer à chaque libellé de champ rendrait le formulaire plus difficile à parcourir. Gardez la taille normale des formulaires pour les libellés et réservez le texte compact aux indications et aux métadonnées.

```
<h1 class="h3">Equipment reservations</h1>
<p class="text-body-secondary">Review availability before booking.</p>
<small class="text-body-secondary">Local demonstration data</small>
```

Référence du code

Consultez la spécification associée

## Système de conception Bootstrap : composer avec les utilitaires d’espacement et la grille

### Utiliser l’échelle plutôt que des espacements arbitraires

p-3 correspond à une marge intérieure de 1rem ; p-4, à 1.5rem ; et p-5 passe à 3rem. Ces libellés désignent des paliers de l’échelle, et non des valeurs littérales en pixels. L’aperçu utilise p-3 p-md-4 pour augmenter sa marge intérieure externe à 768px, tandis que mb-3 sépare les groupes de champs de 1rem. Il s’agit d’une règle concrète pour cet exemple, et non d’une nouvelle échelle officielle d’espacement.

```
<div class="p-3 p-md-4">
  <div class="d-flex flex-wrap gap-2 mb-3">
    <button class="btn btn-primary">Review</button>
    <button class="btn btn-outline-secondary">Reset</button>
  </div>
</div>
```

Référence du code

Consultez la spécification associée

### Préserver la relation entre les lignes et les colonnes

La démonstration utilise row g-4 avec col-lg-7 et col-lg-5. Les deux sections occupent toute la largeur jusqu’au seuil lg de 992px, puis se partagent une ligne de douze colonnes. Placez les colonnes de la grille dans une ligne : ses marges négatives compensent le remplissage des colonnes. Ajouter une seconde marge arbitraire autour de chaque colonne peut défaire cet alignement.

Consultez la spécification associée

## Système de conception Bootstrap : créer des champs avec des relations explicites

### Relier les libellés, les indications et les messages de validation

form-label met en forme un véritable libellé ; sa valeur for doit correspondre à l’identifiant id du champ. form-control met en forme les champs de saisie textuels, tandis que form-select s’applique aux menus de sélection. L’aperçu utilise aria-describedby pour associer les identifiants des indications et des erreurs, ainsi que required pour définir la contrainte effective. Les noms de classe ne créent pas automatiquement ces relations sémantiques.

```
<label for="equipment" class="form-label">Equipment</label>
<select id="equipment" class="form-select" required
  aria-describedby="equipment-error">
  <option value="">Choose equipment</option>
  <option>Camera kit A</option>
</select>
<div class="invalid-feedback" id="equipment-error">Choose equipment.</div>
```

Référence du code

Consultez la spécification associée

### Utiliser un véritable état invalide et un récapitulatif accessible

Lors de l’envoi, l’exemple vérifie chaque champ, définit is-invalid et aria-invalid, crée des liens textuels vers les champs en erreur et place le focus sur le récapitulatif. La correction d’un champ met à jour son état sans effacer les autres réponses. Cette couche applicative est essentielle : la documentation de validation de Bootstrap précise que ses seuls retours visuels personnalisés ne sont pas entièrement perceptibles par les technologies d’assistance.

1. Examinez le résultat de la contrainte avant de marquer le champ comme invalide.

2. Associez le texte d’erreur au champ et signalez son état invalide.

3. Après l’envoi, placez le focus sur un récapitulatif utile ou sur le premier champ invalide.

Consultez la spécification associée

## Système de conception Bootstrap : présenter et filtrer les enregistrements sans en perdre le sens

### Utiliser le composant tableau pour comparer des données

Le tableau comporte des en-têtes de colonnes, des en-têtes de lignes et une légende. table-hover applique un effet au survol, mais ne transforme pas les lignes en boutons. Le filtrage masque les lignes correspondantes et actualise le nombre de résultats dans une région aria-live. Le statut affiché reste du texte dans un badge : sa signification est donc préservée lorsque le mode de couleur change.

```
<div class="table-responsive">
  <table class="table table-hover">
    <caption>Fictional equipment reservations</caption>
    <thead><tr><th scope="col">Equipment</th><th scope="col">Status</th></tr></thead>
    <tbody><tr><th scope="row">Camera kit A</th><td>Reserved</td></tr></tbody>
  </table>
</div>
```

Référence du code

Consultez la spécification associée

### Limiter le défilement du tableau aux données

table-responsive permet le défilement horizontal lorsqu’un tableau large ne peut pas tenir dans l’espace disponible. Vérifiez qu’une liste déroulante qui doit dépasser de cette zone ne sera pas coupée si vous la placez dans ce conteneur. Dans l’exemple, le filtre se trouve au-dessus du tableau. Sur mobile, seule la zone de données peut défiler horizontalement ; la page elle-même doit rester dans les limites de la fenêtre d’affichage.

Consultez la spécification associée

## Système de design Bootstrap : examiner la sélection avec la modale API

### N’ouvrir la modale que si le formulaire est valide

L’exemple interactif crée une instance de Bootstrap Modal ou réutilise celle qui existe, puis appelle show uniquement si la validation réussit. Ainsi, la fenêtre de révision ne recouvre pas les erreurs à corriger. Son texte est renseigné à partir des valeurs actuelles ; le bouton Modifier les détails ferme la modale sans effacer le formulaire.

```
const element = document.getElementById("review-modal");
const modal = bootstrap.Modal.getOrCreateInstance(element);
// Run after validation and after populating the review text.
modal.show();
element.addEventListener("hidden.bs.modal", () => {
  document.querySelector("#reservation button[type=submit]").focus();
});
```

Référence du code

Consultez la spécification associée

### Gérer la modale comme le cycle de vie d’un composant

Bootstrap gère l’arrière-plan et la transition. Utilisez ses méthodes et ses événements plutôt que de modifier manuellement l’affichage, au risque de désynchroniser le focus ou l’arrière-plan. Dans cette démonstration, la confirmation ajoute une ligne au tableau local et ferme la modale ; aucun service de réservation n’est appelé. Le message de réussite décrit précisément ce résultat local.

Consultez la spécification associée

## Système de design Bootstrap : intégrer et étendre cet exemple Bootstrap

### Charger une seule version correspondante de CSS et JavaScript

L’exemple intégré charge les fichiers CSS et Bootstrap 5.3.8 stockés localement. Ses attributs data et son API Modal proviennent de cette version. Dans une application Vite, importez le fichier CSS compilé et le plug-in nécessaire, comme indiqué dans la section de configuration. Évitez de charger le bundle et d’initialiser une deuxième copie du même plug-in au moyen d’un autre wrapper.

Consultez la spécification associée

### Étendre l’exemple en respectant le contrat réel du composant

Pour ajouter un champ au formulaire, fournissez son libellé, son id, sa contrainte, le message associé et la gestion de sa validation. Pour ajouter un état à un enregistrement, définissez son texte et une paire de badges sémantiquement appropriée. Pour modifier la mise en page, choisissez un point de rupture et une répartition de la grille dans la référence ci-dessus. Il s’agit d’extensions explicites de l’exemple fonctionnel, et non d’une invitation à inventer un nouveau vocabulaire d’interface.

- Utilisez l’exemple pour examiner le focus, la fermeture de la modale et les changements de thème.

- Séparez les opérations sur les données de l’application du comportement du plug-in Bootstrap.

- Vérifiez à nouveau chaque surcharge de thème dans les états normal, survolé, avec focus, invalide et désactivé.

Consultez la spécification associée

## Bootstrap Exemples de composants du système de design

### index.html — exemple complet de réservation

Page complète Bootstrap 5.3.8 avec sa feuille de style, le moteur d’exécution de la modale, la validation, les filtres et la confirmation locale. Enregistrez ce fichier sous le nom index.html et servez le dossier avec la commande ci-dessous. Les dépendances CDN dont les versions sont fixées nécessitent une connexion réseau.

```
<!doctype html><html lang="en" data-bs-theme="light"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Bootstrap equipment reservations — OpenDesign example</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"><style>body{margin:0}main{max-width:1120px;margin:auto}.demo-stat{font-variant-numeric:tabular-nums}.table td,.table th{vertical-align:middle}.table caption{font-size:.875rem}.demo-status:empty{display:none}@media(max-width:575px){.table th,.table td{font-size:.8125rem;padding:.65rem .4rem}.demo-mobile-hide{display:none}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}</style></head><body>
<header class="border-bottom bg-body-tertiary px-3 px-md-4 py-3 d-flex align-items-center justify-content-between gap-3"><div><strong>Studio inventory</strong><span class="badge text-bg-primary ms-2">Bootstrap 5.3.8</span></div><button id="theme" type="button" class="btn btn-outline-secondary btn-sm" aria-pressed="false">Dark mode</button></header>
<main class="p-3 p-md-4"><div class="d-flex align-items-start justify-content-between gap-3 mb-4"><div><p class="text-body-secondary small mb-1">EQUIPMENT / RESERVATIONS</p><h1 class="h3 mb-2">Keep the next shoot ready.</h1><p class="text-body-secondary mb-0">Check equipment, create a local reservation and review its details.</p></div><span class="badge rounded-pill text-primary-emphasis bg-primary-subtle border border-primary-subtle demo-mobile-hide">Interactive example</span></div>
<div class="row g-3 mb-4"><div class="col-4"><div class="border rounded p-3"><div class="text-body-secondary small">Equipment</div><strong class="fs-3 demo-stat">12</strong></div></div><div class="col-4"><div class="border rounded p-3"><div class="text-body-secondary small">Reservations</div><strong id="count" class="fs-3 demo-stat">3</strong></div></div><div class="col-4"><div class="border rounded p-3"><div class="text-body-secondary small">Available</div><strong class="fs-3 demo-stat">8</strong></div></div></div>
<div class="row g-4"><section class="col-lg-7" aria-labelledby="list-title"><div class="d-flex align-items-center justify-content-between gap-3 mb-3"><h2 id="list-title" class="h5 m-0">Reservation list</h2><div><label for="filter" class="visually-hidden">Filter reservations by status</label><select class="form-select form-select-sm" id="filter"><option value="all">All statuses</option><option value="Reserved">Reserved</option><option value="In use">In use</option><option value="Draft">Draft</option></select></div></div><div class="table-responsive border rounded"><table class="table table-hover mb-0"><caption class="px-3">Fictional records. New entries stay in this browser tab.</caption><thead class="table-light"><tr><th scope="col">Equipment</th><th scope="col">Date</th><th scope="col">Status</th></tr></thead><tbody id="rows"><tr data-status="Reserved"><th scope="row" class="fw-medium">Camera kit A<div class="small fw-normal text-body-secondary">Mia Chen</div></th><td>10 Oct</td><td><span class="badge text-primary-emphasis bg-primary-subtle">Reserved</span></td></tr><tr data-status="In use"><th scope="row" class="fw-medium">Lighting studio<div class="small fw-normal text-body-secondary">Alex Kim</div></th><td>10 Oct</td><td><span class="badge text-success-emphasis bg-success-subtle">In use</span></td></tr><tr data-status="Draft"><th scope="row" class="fw-medium">Audio recorder<div class="small fw-normal text-body-secondary">Jules Davis</div></th><td>11 Oct</td><td><span class="badge text-secondary-emphasis bg-secondary-subtle">Draft</span></td></tr></tbody></table></div><p id="empty" class="alert alert-info mt-3" hidden>No reservations match this status.</p><p id="results" class="small text-body-secondary mt-2" aria-live="polite">3 reservations shown</p><div class="alert alert-primary mt-4 mb-0"><strong>Try the system</strong><p class="small mb-0 mt-1">Switch color mode, filter the table, submit an empty form, then review a complete reservation in a Bootstrap modal.</p></div></section>
<section class="col-lg-5" aria-labelledby="form-title"><div class="card"><div class="card-body p-3 p-md-4"><h2 id="form-title" class="h5 mb-3">New reservation</h2><form id="reservation" novalidate><div id="error-summary" class="alert alert-danger" tabindex="-1" role="alert" hidden><strong>Check the reservation details.</strong><ul class="mb-0 mt-2" id="error-links"></ul></div><div class="mb-3"><label class="form-label" for="equipment">Equipment</label><select class="form-select" id="equipment" aria-describedby="equipment-error" required><option value="">Choose equipment</option><option>Camera kit A</option><option>Lighting studio</option><option>Audio recorder</option></select><div id="equipment-error" class="invalid-feedback">Choose equipment for this reservation.</div></div><div class="mb-3"><label class="form-label" for="owner">Reserved by</label><input class="form-control" id="owner" autocomplete="name" aria-describedby="owner-hint owner-error" required><div class="form-text" id="owner-hint">Use a fictional name for this example.</div><div class="invalid-feedback" id="owner-error">Enter the name of the person reserving equipment.</div></div><div class="mb-3"><label class="form-label" for="date">Reservation date</label><input class="form-control" id="date" type="date" aria-describedby="date-error" required><div class="invalid-feedback" id="date-error">Choose a reservation date.</div></div><button type="submit" class="btn btn-primary w-100">Review reservation</button></form><p class="small text-body-secondary mt-3 mb-0">This example validates input locally. It does not reserve real equipment.</p></div></div></section></div><div id="notice" class="alert alert-success mt-4 demo-status" role="status" hidden></div></main>
<div class="modal fade" id="review-modal" tabindex="-1" aria-labelledby="review-title" aria-hidden="true"><div class="modal-dialog modal-dialog-centered"><div class="modal-content"><div class="modal-header"><h2 class="modal-title fs-5" id="review-title">Review reservation</h2><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close review"></button></div><div class="modal-body"><dl class="row mb-0"><dt class="col-4">Equipment</dt><dd class="col-8" id="review-equipment"></dd><dt class="col-4">Reserved by</dt><dd class="col-8" id="review-owner"></dd><dt class="col-4">Date</dt><dd class="col-8" id="review-date"></dd></dl><p class="small text-body-secondary mt-3 mb-0">Confirming adds a row to this local example only.</p></div><div class="modal-footer"><button class="btn btn-outline-secondary" data-bs-dismiss="modal" type="button">Edit details</button><button class="btn btn-primary" id="confirm" type="button">Add to example</button></div></div></div></div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script><script>
const $=id=>document.getElementById(id);const fields=['equipment','owner','date'];const review=bootstrap.Modal.getOrCreateInstance($('review-modal'));
$('theme').onclick=()=>{const dark=document.documentElement.dataset.bsTheme!=='dark';document.documentElement.dataset.bsTheme=dark?'dark':'light';$('theme').setAttribute('aria-pressed',String(dark));$('theme').textContent=dark?'Light mode':'Dark mode'};
function filter(){let count=0;for(const row of $('rows').rows){row.hidden=$('filter').value!=='all'&&row.dataset.status!==$('filter').value;if(!row.hidden)count++}$('empty').hidden=count>0;$('results').textContent=count+' reservations shown'}$('filter').onchange=filter;
function validateField(id){const el=$(id),invalid=!el.checkValidity();el.classList.toggle('is-invalid',invalid);el.setAttribute('aria-invalid',String(invalid));return !invalid}
$('reservation').onsubmit=e=>{e.preventDefault();const invalid=fields.filter(id=>!validateField(id));$('error-links').replaceChildren();$('error-summary').hidden=invalid.length===0;if(invalid.length){for(const id of invalid){const li=document.createElement('li'),a=document.createElement('a');a.href='#'+id;a.className='alert-link';a.textContent=$(id+'-error').textContent;a.onclick=e=>{e.preventDefault();$(id).focus()};li.append(a);$('error-links').append(li)}$('error-summary').focus();return}for(const id of fields)$('review-'+id).textContent=$(id).value;review.show()};
for(const id of fields)$(id).addEventListener('input',()=>{if($(id).getAttribute('aria-invalid')==='true')validateField(id)});
$('review-modal').addEventListener('hidden.bs.modal',()=>$('reservation').querySelector('button').focus());
$('confirm').onclick=()=>{const row=document.createElement('tr');row.dataset.status='Reserved';const name=document.createElement('th');name.scope='row';name.className='fw-medium';name.textContent=$('equipment').value;const owner=document.createElement('div');owner.className='small fw-normal text-body-secondary';owner.textContent=$('owner').value;name.append(owner);const date=document.createElement('td');date.textContent=$('date').value;const state=document.createElement('td'),badge=document.createElement('span');badge.className='badge text-primary-emphasis bg-primary-subtle';badge.textContent='Reserved';state.append(badge);row.append(name,date,state);$('rows').prepend(row);$('count').textContent=$('rows').rows.length;$('filter').value='all';filter();review.hide();$('notice').hidden=false;$('notice').textContent='Reservation added to this local example. No data was sent.';$('reservation').reset();for(const id of fields){$(id).classList.remove('is-invalid');$(id).removeAttribute('aria-invalid')}};
</script></body></html>
```

Référence du code

- Aucun service ne reçoit le formulaire. Les réservations confirmées n’existent que pendant la session sur cette page.

- L’aperçu local intègre les mêmes versions épinglées de CSS et JavaScript ; cette copie utilise leurs URL CDN publiques.

### Libellé, aide et état d’erreur explicite du champ

Cette composition de champ autonome utilise le style Bootstrap et un résultat de validation réel. L’exemple de page ajoute un résumé des erreurs contenant des liens pouvant recevoir le focus pour ses trois champs. Une bordure rouge ne suffit pas à expliquer comment corriger l’erreur.

```
<form id="reservation" novalidate>
  <label for="owner" class="form-label">Reserved by</label>
  <input id="owner" class="form-control" required
    aria-describedby="owner-hint owner-error">
  <div id="owner-hint" class="form-text">Use a fictional name.</div>
  <div id="owner-error" class="invalid-feedback">Enter a name.</div>
  <button class="btn btn-primary mt-3" type="submit">Review reservation</button>
</form>
<script>
const form = document.querySelector('#reservation');
const input = document.querySelector('#owner');
form.addEventListener('submit', event => {
  event.preventDefault();
  const invalid = !input.checkValidity();
  input.classList.toggle('is-invalid', invalid);
  input.setAttribute('aria-invalid', String(invalid));
  if (invalid) input.focus();
});
</script>
```

Référence du code

- .is-invalid peut être défini explicitement sans .was-validated.

- aria-describedby associe le texte d’aide et le message d’erreur ; aria-invalid indique l’état actuel.

- La documentation précise que la validation visuelle personnalisée, à elle seule, ne fournit pas assez d’informations aux technologies d’assistance.

### Une modale de révision native avec un libellé clair

La modale utilise le véritable plug-in de Bootstrap, son arrière-plan, la gestion de la touche Échap et la gestion du focus. Placez le titre dans modal-header, la révision dans modal-body et les actions de continuation dans modal-footer.

```
<button class="btn btn-primary" data-bs-toggle="modal"
  data-bs-target="#review">Review reservation</button>
<div class="modal fade" id="review" tabindex="-1"
  aria-labelledby="review-title" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h2 class="modal-title fs-5" id="review-title">Review reservation</h2>
        <button class="btn-close" data-bs-dismiss="modal"
          aria-label="Close review"></button>
      </div>
      <div class="modal-body">Camera kit A · 10 October</div>
      <div class="modal-footer">
        <button class="btn btn-outline-secondary" data-bs-dismiss="modal">Edit details</button>
      </div>
    </div>
  </div>
</div>
```

Référence du code

- Chargez une seule fois le bundle JavaScript correspondant à Bootstrap.

- L’attribut data API ouvre un exemple statique ; le formulaire de réservation fonctionnel utilise Modal.getOrCreateInstance après validation des données saisies.

- Utilisez shown.bs.modal pour tout comportement qui doit attendre la fin de la transition d’ouverture.

### Une composition adaptative avec liste et formulaire

Au point de rupture lg, la liste d’inventaire occupe sept colonnes et le formulaire cinq. En dessous de lg, les deux sections s’empilent. g-4 définit une gouttière de 1.5rem pour la composition. Les colonnes indiquent la largeur ; les sections et les titres sémantiques décrivent le contenu.

```
<main class="container py-4">
  <div class="row g-4">
    <section class="col-lg-7" aria-labelledby="reservations-title">
      <h2 id="reservations-title" class="h5">Reservations</h2>
      <div class="table-responsive">
        <table class="table table-hover">
          <caption>Fictional equipment reservations</caption>
          <thead><tr><th scope="col">Equipment</th><th scope="col">Status</th></tr></thead>
          <tbody><tr><th scope="row">Camera kit A</th><td>Reserved</td></tr></tbody>
        </table>
      </div>
    </section>
    <section class="col-lg-5" aria-labelledby="new-title">
      <h2 id="new-title" class="h5">New reservation</h2>
    </section>
  </div>
</main>
```

Référence du code

- La même grille peut utiliser col-md-* si le contenu tient réellement dans l’espace disponible dès ce point de rupture.

- Utilisez le tableau des points de rupture ci-dessus plutôt que des requêtes média avec les variables CSS ; var() ne peut pas fournir de seuil pour une requête média.

## Bootstrap Configuration de l’agent IA du système de design

### Point de départ de l’implémentation

Aucune étape de compilation n’est nécessaire pour cet exemple complet HTML. Il importe Bootstrap 5.3.8 depuis les URL CDN dont les versions sont fixées dans le fichier. Les exemples plus courts ci-dessous isolent des motifs individuels de cette page fonctionnelle.

```
# Save the complete index.html from Component Examples in a new folder.
# Serve that folder with Python 3:
python3 -m http.server 8000
# Open http://localhost:8000/ in a browser.
```

### Un prompt pour votre projet

```
Créez une interface de réservation de matériel à l’aide de Bootstrap 5.3.8 et de ce guide. Utilisez une ligne g-4 avec col-lg-7 et col-lg-5, un espacement p-3 p-md-4, le corps adapté au thème et des rôles de couleur subtils ou accentués, un tableau sémantique et des champs de formulaire avec libellés. Affichez des erreurs explicites et un résumé des erreurs avant d’ouvrir la modale native Bootstrap Modal. Conservez les valeurs des champs lors de la modification ; n’ajoutez les enregistrements qu’à l’état local de la démonstration, sauf si un véritable API est fourni. Prenez en charge data-bs-theme en mode clair et sombre, ainsi que la fermeture au clavier. Ne remplacez pas l’échelle fournie par des valeurs arbitraires.
```

## Bootstrap Périmètre et sources du système de design

Guide d’application Bootstrap 5.3.8 de OpenDesign et exemple exécutable utilisant les composants natifs. Les valeurs de référence proviennent de la documentation Bootstrap liée et du fichier CSS compilé dont la version est fixée. Les enregistrements de réservation, la composition de la mise en page et le résumé de validation sont du code d’application original ; aucune réservation réelle n’est envoyée.

- Référence Bootstrap 5.3 Fondations, utilitaires et composants versionnés.

- Variables et valeurs par défaut de CSS Noms et valeurs par défaut utilisés dans les tableaux de spécification.

- Validation et comportement de la modale Recommandations concernant les états des champs ; les exemples de composants renvoient également vers les pages API correspondantes.

## Bootstrap Ressources associées au système de design

### Bulma

Créez un bureau éditorial avec la structure réelle des champs et contrôles de Bulma, des colonnes adaptatives, des modificateurs de couleur sémantiques et des variables CSS, avec un code de validation complet.

### Chakra UI

Une référence Chakra UI v3 sur les jetons, les rôles de couleurs sémantiques, les recettes et les composants de formulaire composés. Examinez les échelles réelles d’espacement et de typographie, puis testez un formulaire natif de profil d’espace de travail avec validation, simulation d’échec de l’enregistrement et apparence claire ou sombre.

### CoreUI

Une file de révision CoreUI reposant sur les véritables variables de thème 5.9, des onglets natifs, la sélection par lots avec cases à cocher et une notification persistante permettant d’annuler la dernière opération d’archivage locale.


- [Référence de mise en œuvre](https://getbootstrap.com/docs/5.3/getting-started/introduction/)
- [Source](https://getbootstrap.com/docs/5.3/customize/css-variables/)
- [Source](https://getbootstrap.com/docs/5.3/content/typography/)
- [Source](https://getbootstrap.com/docs/5.3/utilities/spacing/)
- [Source](https://getbootstrap.com/docs/5.3/layout/grid/)
- [Source](https://getbootstrap.com/docs/5.3/components/buttons/)
- [Source](https://getbootstrap.com/docs/5.3/customize/color-modes/)
- [Consultez la spécification associée](https://getbootstrap.com/docs/5.3/getting-started/introduction/)
- [Référence du code](https://getbootstrap.com/docs/5.3/customize/sass/)
- [Consultez la spécification associée](https://getbootstrap.com/docs/5.3/customize/sass/)
- [Référence du code](https://getbootstrap.com/docs/5.3/customize/color-modes/)
- [Consultez la spécification associée](https://getbootstrap.com/docs/5.3/customize/color-modes/)
- [Référence du code](https://getbootstrap.com/docs/5.3/components/buttons/)
- [Consultez la spécification associée](https://getbootstrap.com/docs/5.3/components/buttons/)
- [Consultez la spécification associée](https://getbootstrap.com/docs/5.3/content/typography/)
- [Référence du code](https://getbootstrap.com/docs/5.3/utilities/colors/)
- [Consultez la spécification associée](https://getbootstrap.com/docs/5.3/utilities/colors/)
- [Référence du code](https://getbootstrap.com/docs/5.3/utilities/spacing/)
- [Consultez la spécification associée](https://getbootstrap.com/docs/5.3/utilities/spacing/)
- [Consultez la spécification associée](https://getbootstrap.com/docs/5.3/layout/grid/)
- [Référence du code](https://getbootstrap.com/docs/5.3/forms/form-control/)
- [Consultez la spécification associée](https://getbootstrap.com/docs/5.3/forms/form-control/)
- [Consultez la spécification associée](https://getbootstrap.com/docs/5.3/forms/validation/)
- [Référence du code](https://getbootstrap.com/docs/5.3/content/tables/)
- [Consultez la spécification associée](https://getbootstrap.com/docs/5.3/content/tables/)
- [Référence du code](https://getbootstrap.com/docs/5.3/components/modal/)
- [Consultez la spécification associée](https://getbootstrap.com/docs/5.3/components/modal/)
- [Consultez la spécification associée](https://getbootstrap.com/docs/5.3/getting-started/vite/)
- [Consultez la spécification associée](https://getbootstrap.com/docs/5.3/getting-started/javascript/)
- [Référence du code](https://getbootstrap.com/docs/5.3/getting-started/introduction/)
- [Référence du code](https://getbootstrap.com/docs/5.3/forms/validation/)
- [Référence du code](https://getbootstrap.com/docs/5.3/layout/grid/)
- [Référence Bootstrap 5.3 Fondations, utilitaires et composants versionnés.](https://getbootstrap.com/docs/5.3/)
- [Variables et valeurs par défaut de CSS Noms et valeurs par défaut utilisés dans les tableaux de spécification.](https://getbootstrap.com/docs/5.3/customize/css-variables/)
- [Validation et comportement de la modale Recommandations concernant les états des champs ; les exemples de composants renvoient également vers les pages API correspondantes.](https://getbootstrap.com/docs/5.3/forms/validation/)