Usa Bootstrap 5.3.8 con su escala de espaciado real, colores semánticos, cuadrícula adaptable y API de componentes. Prueba un formulario de reservas funcional, un resumen de errores, un filtro de tabla, un modal y un selector de modo de color; después, reutiliza el código documentado.
Bootstrap 5.3.8 CSS y JavaScript nativos, servidos localmente. Los datos de las reservas y el comportamiento de la aplicación son ejemplos originales. · Referencia de implementación
02
Referencia de diseño del sistema de diseño Bootstrap
Bootstrap 5.3.8 CSS compilado predeterminado y documentación de la versión 5.3. Los valores son predeterminados, no reglas de marca obligatorias. Las comparaciones de rem con píxeles presuponen una raíz de 16 px; los tamaños de fuente adaptables pueden variar por debajo del límite para pantallas grandes. La página OpenDesign que la rodea conserva su propia tipografía.
Elige el CSS de sistema de diseño Bootstrap y las responsabilidades de JavaScript
Una hoja de estilos, comportamiento opcional de los componentes
La hoja de estilos compilada de Bootstrap proporciona la cuadrícula, la tipografía, las utilidades y la apariencia de los componentes. El paquete JavaScript añade complementos interactivos como Modal, Collapse y Dropdown. Un botón con estilos no necesita JavaScript; un activador de modal con data-bs-toggle, sí. La vista previa funcional carga localmente la hoja de estilos y el paquete correspondientes a la versión 5.3.8 para que sus controles muestren esos contratos reales.
El filtrado de la tabla de reservas, el resumen de errores y la inserción local de filas son código de la aplicación. Mantener clara esta distinción permite sustituir los registros ficticios por un servicio sin atribuir la lógica de reservas al propio Bootstrap.
CSS: diseño, tipografía, botones, campos, tablas y estilos de estado.
Bootstrap JavaScript: apertura del modal, fondo superpuesto, tecla Escape y comportamiento del foco.
Aplicación JavaScript: mensajes de validación, filtrado de registros y actualizaciones de datos locales.
Usa CSS compilado para empezar rápidamente o para un producto que pueda aceptar el conjunto estándar de utilidades. Usa el código fuente de Sass si vas a cambiar los mapas del tema, la generación de utilidades o la cuadrícula durante la compilación. Las propiedades personalizadas de CSS en tiempo de ejecución son útiles para personalizar componentes, pero cambiar una variable de color raíz no vuelve a compilar todas las variantes precompiladas.
Sistema de diseño de Bootstrap: aplicar colores semánticos y modos de color
Combina una superficie de estado con su color de primer plano
Las insignias de reserva usan bg-primary-subtle con text-primary-emphasis. Estos son roles semánticos emparejados, por lo que tanto el color de primer plano como el de fondo se adaptan cuando cambia data-bs-theme. Un fondo azul sin más, combinado con un color de texto gris arbitrario, pierde esa relación. Además, Reservado, En uso y Borrador siguen siendo etiquetas escritas: el color no es su único medio de comunicación.
Para una acción personalizada, sobrescribe sus propiedades locales --bs-btn-*. Define los valores para los estados hover y active, además del fondo en reposo. El ejemplo siguiente es una variante de la aplicación, no un valor predeterminado de Bootstrap. Mantén esta clase en el botón correspondiente para evitar que modifique silenciosamente todas las acciones principales de otras partes de la página.
Sistema de diseño de Bootstrap: usa la escala tipográfica real
Distingue la semántica del documento del tamaño visual
El título principal de la vista previa es un h1 con la clase h3: sigue siendo el encabezado principal de la página, pero usa una escala visual menor, adecuada para una herramienta. Los encabezados de sección son elementos h2 con estilo h5. Bootstrap ofrece tanto estilos predeterminados para elementos como clases de encabezado equivalentes, lo que permite hacer esta distinción sin saltarse niveles del documento.
El texto del cuerpo predeterminado tiene un tamaño de 1rem y una altura de línea de 1.5. Los tamaños de h1 a h4 cambian de forma adaptable antes de alcanzar los valores de la tabla de referencia. Por lo tanto, una captura de pantalla tomada en un único ancho no define toda la escala tipográfica. Usa los estilos compilados o el comportamiento documentado de Sass en lugar de copiar un tamaño en píxeles medido en una sola vista.
Asigna al texto secundario un rol adaptable al tema
text-body-secondary se adapta al modo de color del texto del cuerpo. Es adecuado para información complementaria de un registro, como el nombre de la persona responsable que aparece debajo del título de un equipo. La clase small reduce el tamaño en relación con el contexto; aplicarla a todas las etiquetas de campo dificultaría recorrer el formulario con la vista. Mantén las etiquetas en el tamaño normal del formulario y reserva el texto compacto para indicaciones y metadatos.
Sistema de diseño de Bootstrap: compón con utilidades de espaciado y la cuadrícula
Usa la escala en lugar de espacios arbitrarios
p-3 significa 1rem de relleno; p-4 significa 1.5rem y p-5 aumenta a 3rem. Las etiquetas son claves de escala, no cantidades literales en píxeles. La vista previa usa p-3 p-md-4 para aumentar el relleno exterior a 768px, mientras que mb-3 separa los grupos de campos por 1rem. Esta es una pauta concreta para este ejemplo, no una nueva escala de espaciado oficial.
Sistema de diseño de Bootstrap: crea campos con relaciones explícitas
Vincula las etiquetas, las indicaciones y los mensajes de validación
form-label aplica estilos a una etiqueta label real; su valor for debe coincidir con el id del campo de entrada. form-control aplica estilos a campos de entrada de texto, mientras que form-select aplica estilos a un select. La vista previa usa aria-describedby para los ID de las indicaciones y los errores, y required para la restricción correspondiente. Los nombres de las clases no crean automáticamente esas relaciones semánticas.
Usa un estado de invalidez real y un resumen accesible
Al enviar el formulario, el ejemplo comprueba cada campo, establece is-invalid y aria-invalid, crea enlaces de texto a los campos con errores y enfoca el resumen. Al corregir un campo, se actualiza su estado sin borrar las demás respuestas. Esta capa de la aplicación es esencial: la documentación de validación de Bootstrap advierte que la retroalimentación visual personalizada por sí sola no está completamente expuesta a las tecnologías de asistencia.
Comprueba el resultado de la restricción antes de marcar el campo como no válido.
Asocia el texto del error al campo y expón el estado de invalidez.
Después del envío, enfoca un resumen útil o el primer campo no válido.
Sistema de diseño de Bootstrap: presenta y filtra registros sin perder información
Usa el componente de tabla para datos comparables
La tabla tiene encabezados de columna, encabezados de fila y un título. table-hover aplica un estilo al pasar el puntero, pero no convierte las filas en botones. El filtrado oculta las filas que no coinciden y actualiza un recuento de resultados con aria-live. El estado mostrado sigue siendo texto dentro de una insignia, por lo que su significado se conserva al cambiar de modo de color.
table-responsive habilita el desplazamiento horizontal cuando una tabla ancha no cabe. Si colocas dentro de este contenedor un menú desplegable que debe salir de su área recortada, comprueba que funcione correctamente. El ejemplo mantiene el filtro encima de la tabla. En dispositivos móviles, solo la región de datos debe desplazarse horizontalmente; la página debe permanecer dentro de la ventana gráfica.
Sistema de diseño de Bootstrap: revisa la selección con el modal API
Ábrelo solo cuando el formulario sea válido
El ejemplo interactivo crea o reutiliza la instancia de Modal de Bootstrap y llama a show solo cuando la validación se completa correctamente. Así se evita que la capa de revisión tape errores que requieren atención. El texto se completa con los valores actuales; al elegir Editar detalles, se cierra el modal y se conserva el formulario.
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();
});
Trata el modal como un ciclo de vida del componente
Bootstrap controla el fondo superpuesto y la transición. Usa sus métodos y eventos en lugar de alternar display manualmente, ya que esto podría dejar el foco o el fondo en un estado incoherente. Al confirmar, esta demostración añade una fila a la tabla local y cierra el modal; no llama a ningún servicio de reservas. El mensaje de éxito describe exactamente ese resultado local.
Integra y amplía este ejemplo de sistema de diseño Bootstrap
Carga una versión coincidente de CSS y JavaScript
El ejemplo integrado carga localmente Bootstrap 5.3.8 CSS y archivos del paquete. Sus atributos de datos y Modal API corresponden a esa versión. En una aplicación Vite, importa el CSS compilado y el complemento necesario, como se muestra en la sección de configuración. Evita cargar el paquete e inicializar una segunda copia del mismo complemento mediante otro wrapper.
Ejemplos de componentes del sistema de diseño Bootstrap
index.html — estudio completo de reservas
Una página completa de Bootstrap 5.3.8 con su hoja de estilos, ejecución del modal, validación, filtros y confirmación local. Guarda este archivo como index.html y sirve la carpeta con el comando que aparece a continuación. Las dependencias fijadas de CDN requieren conexión a internet.
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>
Ningún servicio recibe el formulario. Las reservas confirmadas solo existen durante la sesión de esta página.
La vista previa local incluye las mismas versiones fijadas de CSS y JavaScript; esta copia usa sus URL públicas de CDN.
Etiqueta del campo, indicación y estado de error explícito
Esta composición de campo autocontenida usa los estilos de Bootstrap y muestra un resultado real de validación. El ejemplo de página añade un resumen de errores con enlaces que permiten enfocar sus tres campos. Un borde rojo por sí solo no indica cómo corregir el error.
Se puede establecer .is-invalid explícitamente sin .was-validated.
aria-describedby conecta el texto de ayuda y el del error; aria-invalid expresa el estado actual.
La documentación advierte que la validación visual personalizada por sí sola no proporciona suficiente información a las tecnologías de asistencia.
Un modal de revisión nativo con una etiqueta clara
El modal usa el complemento real de Bootstrap, el fondo superpuesto, la gestión de Escape y el control del foco. Coloca el título dentro de modal-header, la revisión en modal-body y las acciones para continuar en modal-footer.
Carga una vez el paquete JavaScript correspondiente de Bootstrap.
El atributo de datos API abre un ejemplo estático; el formulario funcional de reserva usa Modal.getOrCreateInstance tras una entrada válida.
Usa shown.bs.modal para el comportamiento que deba esperar a que termine la transición de apertura.
Composición adaptable de lista y formulario
La lista de inventario ocupa siete columnas y el formulario cinco en el punto de quiebre lg. Por debajo de lg, ambas secciones se apilan. g-4 da a la composición un espacio entre columnas de 1.5rem. Las columnas definen el ancho; las secciones y los encabezados semánticos describen el contenido.
La misma cuadrícula puede usar col-md-* si el contenido realmente cabe antes.
Usa la tabla de puntos de quiebre anterior en lugar de consultas de medios con variables CSS; var() no puede proporcionar un umbral para una consulta de medios.
04
Configuración del agente del sistema de diseño Bootstrap
Punto de partida para la implementación
Este ejemplo completo de HTML no requiere un paso de compilación. Importa Bootstrap 5.3.8 desde las URL fijadas de CDN que se muestran en el archivo. Los ejemplos más breves de abajo aíslan patrones concretos de esta página funcional.
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.
Una instrucción para tu proyecto
Instrucción para el agente
Implementa una interfaz de reserva de equipo con Bootstrap 5.3.8 y esta guía. Usa una fila g-4 con col-lg-7 y col-lg-5, espaciado p-3 p-md-4, roles de color adaptables al tema para el cuerpo y los niveles sutil y destacado, una tabla semántica y controles de formulario etiquetados. Valida con errores explícitos y un resumen de errores antes de abrir el Modal nativo de Bootstrap. Conserva los datos introducidos al editar; añade registros solo al estado de demostración local, salvo que se proporcione un API real. Admite data-bs-theme light/dark y el cierre con el teclado. No sustituyas la escala indicada por valores arbitrarios.
05
Fuentes y alcance del sistema de diseño Bootstrap
Guía de aplicaciones Bootstrap 5.3.8 de OpenDesign y ejemplo ejecutable con componentes nativos. Los valores de referencia proceden de la documentación de Bootstrap enlazada y del CSS compilado cuya versión está fijada. Los registros de reservas, la composición y el resumen de validación son código original de la aplicación; no se envía ninguna reserva real.
