Utilisez Bootstrap 5.3.8 avec son échelle d’espacement réelle, ses couleurs sémantiques, sa grille adaptative et ses API de composants. Essayez un formulaire de réservation fonctionnel, un récapitulatif des erreurs, un filtre de tableau, une fenêtre modale et un sélecteur de mode de couleur, puis réutilisez le code documenté.
Bootstrap 5.3.8 CSS natif et JavaScript, servis localement. Les données de réservation et le comportement de l’application sont des exemples originaux. · Référence de mise en œuvre
02
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Examinez le résultat de la contrainte avant de marquer le champ comme invalide.
Associez le texte d’erreur au champ et signalez son état invalide.
Après l’envoi, placez le focus sur un récapitulatif utile ou sur le premier champ invalide.
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.
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.
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.
javascript
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();
});
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.
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.
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.
html
<!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/[email protected]/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/[email protected]/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>
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.
.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.
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.
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.
04
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.
sh
# 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
Prompt pour l’agent IA
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.
05
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.
