Usa Bootstrap 5.3.8 tramite le scale effettive di spaziatura, i colori semantici, la griglia responsive e le API dei componenti. Prova un modulo di prenotazione funzionante, un riepilogo degli errori, un filtro per tabella, una finestra modale e un selettore della modalità colore, poi riutilizza il codice documentato.
Bootstrap 5.3.8 CSS nativo e JavaScript, serviti localmente. I dati delle prenotazioni e il comportamento dell’applicazione sono esempi originali. · Riferimento per l’implementazione
02
Riferimento di progettazione del sistema di design Bootstrap
Bootstrap 5.3.8 CSS compilato predefinito e documentazione della versione 5.3. I valori sono impostazioni predefinite, non regole di brand obbligatorie. I confronti tra rem e pixel presuppongono una radice di 16px; le dimensioni responsive dei caratteri possono variare al di sotto del valore previsto per gli schermi grandi. La pagina OpenDesign circostante mantiene la propria tipografia.
Sistema di design Bootstrap: scegli le responsabilità di Bootstrap e JavaScript CSS
Un foglio di stile, comportamento dei componenti opzionale
Il foglio di stile compilato di Bootstrap fornisce griglia, tipografia, utility e aspetto dei componenti. Il bundle JavaScript aggiunge plugin interattivi come Modal, Collapse e Dropdown. Un pulsante stilizzato non richiede JavaScript; un trigger modale data-bs-toggle, invece, sì. L’anteprima funzionante carica localmente il foglio di stile e il bundle corrispondenti alla versione 5.3.8, così che i controlli mostrino il comportamento effettivo previsto.
Il filtraggio della tabella delle prenotazioni, il riepilogo degli errori e l’inserimento locale delle righe sono codice dell’applicazione. Mantenere chiara questa distinzione permette di sostituire i dati fittizi con un servizio senza attribuire a Bootstrap funzionalità di prenotazione che non offre.
CSS: layout, tipografia, pulsanti, campi, tabelle e stili degli stati.
Bootstrap JavaScript: apertura della modale, sfondo, tasto Escape e gestione dello stato attivo.
JavaScript dell’applicazione: messaggi di convalida, filtraggio dei record e aggiornamenti dei dati locali.
Usa CSS compilato per iniziare rapidamente o per un prodotto che può adottare il set standard di utility. Usa il sorgente Sass per modificare le mappe dei temi, la generazione delle utility o la griglia in fase di build. Le proprietà personalizzate di CSS a runtime sono utili per personalizzare i singoli componenti, ma modificare una variabile di colore radice non ricompila tutte le varianti precompilate.
Applica colori semantici e modalità colore nel sistema di design Bootstrap
Abbina una superficie di stato al colore del testo in primo piano
I badge delle prenotazioni usano bg-primary-subtle con text-primary-emphasis. Sono ruoli semantici abbinati, quindi il colore del testo e lo sfondo si adattano entrambi quando cambia data-bs-theme. Uno sfondo blu puro abbinato a un colore grigio arbitrario per il testo perde questa relazione. Le etichette «Prenotato», «In uso» e «Bozza» restano inoltre visibili: il colore non è l’unico modo per comunicarne il significato.
Per un’azione personalizzata, modifica localmente le proprietà --bs-btn-*. Imposta i valori di hover e active oltre allo sfondo a riposo. L’esempio qui sotto è una variante dell’applicazione, non un valore predefinito di Bootstrap. Applica questa classe solo al pulsante interessato, così da non modificare inavvertitamente tutte le azioni principali in altre parti della pagina.
Usa la scala tipografica effettiva del sistema di design Bootstrap
Distingui la semantica del documento dalla dimensione visiva
Il titolo principale dell’anteprima è un h1 con la classe h3: resta l’intestazione principale della pagina, ma usa una scala visiva più contenuta, adatta a uno strumento. Le intestazioni di sezione sono elementi h2 con lo stile h5. Bootstrap fornisce sia gli stili predefiniti degli elementi sia le classi equivalenti per le intestazioni, consentendo questa distinzione senza saltare livelli nella struttura del documento.
Il testo del corpo predefinito è 1rem con un’altezza riga di 1.5. Le dimensioni da h1 a h4 aumentano in modo responsive prima di raggiungere i valori della tabella di riferimento. Uno screenshot a una sola larghezza, quindi, non definisce l’intera scala tipografica. Usa gli stili compilati o il comportamento Sass documentato invece di copiare una dimensione in pixel misurata in un’unica finestra.
Assegna al testo secondario un ruolo adattivo al tema
text-body-secondary segue la modalità colore del corpo. È adatto alle informazioni di supporto sui record, come il nome del responsabile sotto il titolo dell’attrezzatura. La classe small riduce le dimensioni rispetto al contesto; applicarla a tutte le etichette dei campi renderebbe il modulo più difficile da consultare. Mantieni le etichette alla dimensione normale dei moduli e riserva il testo compatto ai suggerimenti e ai metadati.
Componi con le utility di spaziatura e la griglia nel sistema di design Bootstrap
Usa la scala invece di spazi arbitrari
p-3 indica un padding di 1rem; p-4 indica 1.5rem e p-5 passa a 3rem. Le etichette sono chiavi della scala, non quantità espresse letteralmente in pixel. L’anteprima usa p-3 p-md-4, così il padding esterno aumenta a 768px, mentre mb-3 separa i gruppi di campi di 1rem. È una scelta concreta per questo esempio, non una nuova scala di spaziatura ufficiale.
Crea campi con relazioni esplicite nel sistema di design Bootstrap
Collega etichette, suggerimenti e messaggi di convalida
form-label applica uno stile a un’etichetta reale; il suo valore for deve corrispondere all’id dell’input. form-control applica uno stile agli input di testo, mentre form-select applica uno stile a un elemento select. L’anteprima usa aria-describedby per gli ID dei suggerimenti e degli errori e required per il vincolo effettivo. I nomi delle classi non creano automaticamente queste relazioni semantiche.
Usa uno stato di errore reale e un riepilogo raggiungibile
Al momento dell’invio, l’esempio controlla ogni campo, imposta is-invalid e aria-invalid, crea collegamenti testuali ai campi non validi e porta il focus sul riepilogo. La correzione di un campo ne aggiorna lo stato senza cancellare le altre risposte. Questo livello applicativo è essenziale: la documentazione di convalida Bootstrap avverte che il solo feedback visivo personalizzato non è esposto completamente alle tecnologie assistive.
Controlla il risultato del vincolo effettivo prima di contrassegnare il campo come non valido.
Associa il testo dell’errore al campo e rendi noto lo stato non valido.
Dopo l’invio, porta il focus su un riepilogo utile o sul primo campo non valido.
Sistema di design Bootstrap: presentare e filtrare i record senza perderne il significato
Usa il componente tabella per dati da confrontare
La tabella ha intestazioni di colonna e di riga, oltre a una didascalia. table-hover applica uno stile al passaggio del cursore, ma non trasforma le righe in pulsanti. Il filtro modifica la visibilità delle righe corrispondenti e aggiorna il conteggio dei risultati con aria-live. Lo stato mostrato resta testuale all’interno di un badge, così il suo significato non cambia al variare della modalità colore.
table-responsive consente lo scorrimento orizzontale quando una tabella ampia non entra nello spazio disponibile. Prima di inserire in questo contenitore un menu a discesa che deve fuoriuscire dalla sua area ritagliata, verifica che funzioni correttamente. Nell’esempio, il filtro si trova sopra la tabella. Sui dispositivi mobili può scorrere orizzontalmente solo l’area dei dati; la pagina deve rimanere entro il viewport.
Sistema di design Bootstrap: rivedere la selezione con la finestra modale API
Apri la finestra solo dopo aver convalidato il modulo
L’esempio interattivo crea o riutilizza l’istanza Bootstrap Modal e chiama show solo quando la convalida ha esito positivo. In questo modo la finestra di riepilogo non copre gli errori che richiedono attenzione. Il testo viene popolato con i valori correnti; scegliendo Modifica dettagli si chiude la finestra modale e i dati del modulo restano invariati.
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();
});
Gestisci la finestra modale come un componente con un proprio ciclo di vita
Bootstrap gestisce lo sfondo e le transizioni. Usa i suoi metodi e i suoi eventi invece di alternare manualmente la proprietà display, per evitare incoerenze nel focus o nello sfondo. In questa dimostrazione, la conferma aggiunge una riga alla tabella locale e chiude la finestra modale; non chiama un servizio di prenotazione. Il messaggio di conferma descrive con precisione questo risultato locale.
Sistema di design Bootstrap: integrare ed estendere questo esempio Bootstrap
Carica una release corrispondente di CSS e JavaScript
L’esempio incorporato carica i file Bootstrap 5.3.8 CSS e bundle archiviati localmente. Gli attributi data e l’API Modal provengono da questa release. In un’applicazione Vite, importa il file CSS compilato e il plugin necessario come mostrato nella sezione di configurazione. Evita di caricare il bundle e inizializzare una seconda copia dello stesso plugin tramite un altro wrapper.
Bootstrap Esempi di componenti del sistema di design
index.html — esempio completo per le prenotazioni
Una pagina completa con Bootstrap 5.3.8, il foglio di stile, il runtime modale, la convalida, i filtri e la conferma locale. Salva questo file come index.html e servi la cartella con il comando riportato sotto. Le dipendenze CDN fissate a una versione specifica richiedono una connessione di rete.
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>
Nessun servizio riceve i dati del modulo. Le prenotazioni confermate esistono solo nella sessione di questa pagina.
L’anteprima locale include gli stessi file CSS e JavaScript fissati a una versione specifica; questa copia usa i relativi URL CDN pubblici.
Etichetta del campo, suggerimento e stato di errore esplicito
Questa composizione autonoma del campo usa gli stili di Bootstrap e un risultato di convalida reale. L’esempio di pagina aggiunge un riepilogo degli errori con collegamenti attivabili da tastiera ai tre campi. Un semplice bordo rosso non comunica come correggere l’errore.
.is-invalid può essere impostato esplicitamente senza .was-validated.
aria-describedby collega il testo del suggerimento e dell’errore; aria-invalid esprime lo stato corrente.
La documentazione avverte che il solo feedback visivo personalizzato non fornisce informazioni sufficienti alle tecnologie assistive.
Una finestra modale di riepilogo nativa con un’etichetta chiara
La finestra modale usa il plugin effettivo di Bootstrap, lo sfondo, la gestione del tasto Esc e la gestione del focus. Inserisci il titolo in modal-header, il riepilogo in modal-body e le azioni per proseguire in modal-footer.
Carica una volta il bundle JavaScript corrispondente di Bootstrap.
L’attributo data API apre un esempio statico; il modulo di prenotazione funzionante usa Modal.getOrCreateInstance dopo l’inserimento di dati validi.
Usa shown.bs.modal per il comportamento che deve attendere il completamento della transizione di apertura.
Composizione reattiva di elenco e modulo
Al breakpoint lg, l’elenco delle attrezzature occupa sette colonne e il modulo cinque. Sotto lg, le due sezioni si dispongono una sotto l’altra. g-4 assegna alla composizione uno spazio tra gli elementi di 1.5rem. Le colonne descrivono le larghezze; le sezioni e le intestazioni semantiche descrivono il contenuto.
La stessa griglia può usare col-md-* se i contenuti trovano davvero spazio già a quel breakpoint.
Usa la tabella dei breakpoint qui sopra invece di media query con variabili CSS; var() non può fornire una soglia per una media query.
04
Bootstrap Configurazione dell’agente per il sistema di design
Punto di partenza per l’implementazione
Questo esempio completo con HTML non richiede una fase di compilazione. Importa Bootstrap 5.3.8 dagli URL CDN fissati a una versione specifica, indicati nel file. Gli esempi più brevi qui sotto isolano singoli schemi della pagina funzionante.
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 per il tuo progetto
Prompt per l’agente
Implementa un’interfaccia per prenotare attrezzature usando Bootstrap 5.3.8 e questa guida. Usa una riga g-4 con col-lg-7 e col-lg-5, spaziatura p-3 p-md-4, ruoli cromatici per il corpo del testo e per i colori tenui e intensi, una tabella semantica e controlli del modulo con etichette. Esegui la convalida con errori espliciti e un riepilogo degli errori prima di aprire la finestra modale nativa Bootstrap Modal. Quando si modificano i dati, conserva i valori inseriti; aggiungi record solo allo stato locale della demo, a meno che non venga fornito un vero API. Supporta data-bs-theme light/dark e la chiusura da tastiera. Non sostituire la scala indicata con valori arbitrari.
05
Bootstrap Fonti e ambito del sistema di design
Guida applicativa Bootstrap 5.3.8 di OpenDesign ed esempio eseguibile con componenti nativi. I valori di riferimento provengono dalla documentazione Bootstrap collegata e dal file CSS compilato e fissato a una versione specifica. I record delle prenotazioni, la composizione del layout e il riepilogo della convalida sono codice applicativo originale; non viene inviata alcuna prenotazione reale.
