Use Bootstrap 5.3.8 com sua escala de espaçamento real, cores semânticas, grade responsiva e APIs de componentes. Experimente um formulário de reserva funcional, um resumo de erros, um filtro de tabela, um modal e um alternador de modo de cor; depois, reutilize o código documentado.
Bootstrap 5.3.8 CSS e JavaScript nativos, servidos localmente. Os dados de reserva e o comportamento do aplicativo são exemplos originais. · Referência de implementação
02
Referência de design do sistema de design Bootstrap
Bootstrap 5.3.8 CSS compilados padrão e documentação da versão 5.3. Os valores são padrões, não regras de marca obrigatórias. As conversões de rem para pixels consideram uma raiz de 16px; os tamanhos de fonte responsivos podem variar abaixo do limite para telas grandes. A página OpenDesign ao redor mantém sua própria tipografia.
Escolha o CSS de sistema de design Bootstrap e as responsabilidades de JavaScript
Uma folha de estilos, comportamento opcional dos componentes
A folha de estilos compilada de Bootstrap fornece a grade, a tipografia, os utilitários e a aparência dos componentes. O pacote JavaScript adiciona plugins interativos, como Modal, Collapse e Dropdown. Um botão estilizado não exige JavaScript; um acionador de modal com data-bs-toggle, sim. A prévia funcional carrega localmente a folha de estilos e o pacote correspondentes à versão 5.3.8 para que os controles demonstrem esses contratos reais.
A filtragem da tabela de reservas, o resumo de erros e a inserção local de linhas são implementados pelo aplicativo. Deixar essa distinção clara permite substituir os registros fictícios por um serviço sem atribuir ao próprio Bootstrap a funcionalidade de reservas.
CSS: layout, tipografia, botões, campos, tabelas e estilos de estado.
Bootstrap JavaScript: abertura do modal, fundo sobreposto, tecla Escape e comportamento do foco.
Aplicação JavaScript: mensagens de validação, filtragem de registros e atualizações locais de dados.
Escolha o CSS compilado ou uma compilação com Sass
Use o CSS compilado para começar rapidamente ou para um produto compatível com o conjunto padrão de utilitários. Use o código-fonte Sass para alterar mapas de tema, geração de utilitários ou a grade durante a compilação. As propriedades personalizadas de CSS em tempo de execução são úteis para personalizar componentes, mas alterar uma variável de cor raiz não recompila todas as variantes pré-compiladas.
Sistema de Design Bootstrap: aplique cores semânticas e modos de cor
Combine uma superfície de status com sua cor de primeiro plano
Os selos de reserva usam bg-primary-subtle com text-primary-emphasis. Essas funções semânticas são complementares, então a cor de primeiro plano e o fundo se adaptam quando data-bs-theme muda. Um fundo azul puro combinado com uma cor de texto cinza arbitrária perde essa relação. Além disso, Reservado, Em uso e Rascunho continuam sendo rótulos escritos; a cor não é seu único meio de transmitir significado.
Para uma ação personalizada, substitua as propriedades --bs-btn-* locais. Defina valores para os estados de foco e ativo, além do fundo padrão. O exemplo abaixo é uma variante da aplicação, não um padrão de Bootstrap. Mantenha esta classe no botão desejado para evitar que ela altere silenciosamente todas as ações primárias de outras partes da página.
Sistema de Design Bootstrap: use a escala tipográfica real
Separe a semântica do documento do tamanho visual
O título principal da prévia é um h1 com a classe h3: ele continua sendo o título principal da página, mas usa a escala visual menor, mais adequada a uma ferramenta. Os títulos das seções são elementos h2 com estilo h5. Bootstrap oferece estilos padrão para os elementos e classes de título equivalentes, permitindo essa distinção sem pular níveis no documento.
O texto padrão do corpo usa 1rem com entrelinha de 1.5. Os tamanhos de h1 a h4 se ajustam de forma responsiva antes de atingir os valores da tabela de referência. Portanto, uma captura de tela em uma única largura não define toda a escala tipográfica. Use os estilos compilados ou o comportamento Sass documentado, em vez de copiar um tamanho em pixels medido em apenas uma largura de tela.
Atribua ao texto secundário uma função adaptável ao tema
text-body-secondary acompanha o modo de cor do corpo. É adequado para informações complementares de registros, como o nome do responsável abaixo do título de um equipamento. A classe small reduz o tamanho em relação ao contexto; usá-la em todos os rótulos dos campos dificulta a leitura rápida do formulário. Mantenha os rótulos no tamanho padrão dos formulários e reserve o texto compacto para dicas e metadados.
Sistema de Design Bootstrap: componha com utilitários de espaçamento e a grade
Use a escala em vez de espaçamentos arbitrários
p-3 corresponde a 1rem de preenchimento interno; p-4, a 1.5rem; e p-5 salta para 3rem. Os rótulos são chaves da escala, não valores literais em pixels. A prévia usa p-3 p-md-4 para aumentar o preenchimento externo em 768px, enquanto mb-3 separa os grupos de campos por 1rem. Esta é uma regra específica para este exemplo, não uma nova escala oficial de espaçamento.
Sistema de Design Bootstrap: crie campos com relações explícitas
Associe rótulos, dicas e mensagens de validação
form-label aplica estilo a um rótulo real; seu valor for deve corresponder ao id do campo. form-control estiliza campos de entrada de texto, enquanto form-select estiliza um menu de seleção. A prévia usa aria-describedby para associar os IDs das dicas e dos erros, além de required para indicar a restrição efetiva. Os nomes das classes não criam essas relações semânticas automaticamente.
Ao enviar o formulário, o exemplo verifica cada campo, define is-invalid e aria-invalid, cria links de texto para os campos com erro e move o foco para o resumo. Quando um campo é corrigido, seu estado é atualizado sem apagar as outras respostas. Essa camada da aplicação é essencial: a documentação de validação de Bootstrap alerta que o feedback visual personalizado, por si só, não é totalmente apresentado às tecnologias assistivas.
Verifique o resultado da restrição antes de marcar o campo como inválido.
Associe a mensagem de erro ao campo e exponha o estado inválido.
Após o envio, direcione o foco para um resumo útil ou para o primeiro campo inválido.
Sistema de Design Bootstrap: apresente e filtre registros sem perder o significado
Use o componente de tabela para dados comparáveis
A tabela tem cabeçalhos de coluna, cabeçalhos de linha e uma legenda. table-hover aplica um estilo ao passar o cursor, mas não transforma as linhas em botões. A filtragem altera o estado de visibilidade das linhas correspondentes e atualiza a contagem de resultados com aria-live. O status exibido continua sendo texto dentro de um selo, então seu significado permanece mesmo quando o modo de cor muda.
table-responsive permite a rolagem horizontal quando uma tabela larga não cabe na tela. Antes de colocar nessa área um menu suspenso que precise sair dos limites do recorte, verifique como ele se comporta. No exemplo, o filtro fica acima da tabela. Em dispositivos móveis, somente a área de dados deve rolar horizontalmente; a página inteira deve permanecer dentro da tela.
Sistema de Design Bootstrap: revise a seleção com o modal API
Abra o modal somente depois que o formulário for validado
O exemplo interativo cria ou reutiliza a instância de Modal de Bootstrap e chama show somente quando a validação é aprovada. Assim, a camada de revisão não encobre erros que exigem atenção. O texto é preenchido com os valores atuais; ao escolher Editar detalhes, o modal é fechado e o formulário é mantido.
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();
});
Bootstrap controla o fundo sobreposto e a transição do modal. Use os métodos e eventos disponíveis em vez de alternar display manualmente, o que pode deixar o foco ou o fundo em um estado inconsistente. Nesta demonstração, a confirmação adiciona uma linha local à tabela e fecha o modal; ela não chama um serviço de reservas. A mensagem de sucesso descreve exatamente esse resultado local.
Integre e amplie este exemplo de sistema de design Bootstrap
Carregue uma versão correspondente de CSS e JavaScript
O exemplo incorporado carrega localmente os arquivos de Bootstrap 5.3.8 CSS e do pacote armazenados. Os atributos de dados e o Modal API são dessa versão. Em uma aplicação Vite, importe o CSS compilado e o plugin necessário, conforme mostrado na seção de configuração. Evite carregar o pacote e inicializar uma segunda cópia do mesmo plugin por meio de outro wrapper.
Exemplos de componentes do sistema de design Bootstrap
index.html — estudo completo de reservas
Uma página Bootstrap 5.3.8 completa, com folha de estilos, runtime do modal, validação, filtros e confirmação local. Salve este arquivo como index.html e disponibilize a pasta usando o comando abaixo. As dependências fixadas por CDN exigem conexão com 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>
Nenhum serviço recebe os dados do formulário. As reservas confirmadas existem apenas nesta sessão da página.
A prévia local inclui as mesmas versões fixadas de CSS e JavaScript; esta cópia usa os URLs públicos de CDN desses recursos.
Rótulo do campo, dica e estado de erro explícito
Esta composição independente de campo usa estilos de Bootstrap e um resultado real de validação. O exemplo de página adiciona um resumo de erros com links focalizáveis para os três campos. Uma borda vermelha, por si só, não comunica como corrigir o problema.
.is-invalid pode ser definido explicitamente sem .was-validated.
aria-describedby associa a dica e o texto de erro; aria-invalid expressa o estado atual.
A documentação alerta que a validação visual personalizada, por si só, não oferece informações suficientes às tecnologias assistivas.
Um modal de revisão nativo com um rótulo claro
O modal usa o plugin real de Bootstrap, o backdrop, o tratamento da tecla Escape e o gerenciamento de foco. Coloque o título em modal-header, a revisão em modal-body e as ações para continuar em modal-footer.
Carregue uma vez o bundle correspondente de Bootstrap JavaScript.
O data API abre um exemplo estático; o formulário funcional de reservas usa Modal.getOrCreateInstance após a entrada de dados válidos.
Use shown.bs.modal para comportamentos que precisam aguardar o fim da transição de abertura.
Uma composição responsiva de lista e formulário
No breakpoint lg, a lista de inventário ocupa sete colunas e o formulário, cinco. Abaixo de lg, as duas seções ficam empilhadas. g-4 define um espaçamento interno de 1.5rem na composição. As colunas descrevem a largura; as seções semânticas e os títulos descrevem o conteúdo.
A mesma grade pode usar col-md-* se o conteúdo realmente couber em uma largura menor.
Use a tabela de breakpoints acima em vez de media queries com variáveis CSS; var() não pode definir um limite de media query.
04
Configuração do agente para o sistema de design Bootstrap
Ponto de partida para implementação
Este exemplo completo de HTML não exige uma etapa de build. Ele importa Bootstrap 5.3.8 dos URLs fixados de CDN exibidos no arquivo. Os exemplos mais curtos abaixo isolam padrões individuais desta 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.
Um prompt para seu projeto
Prompt para agente de IA
Implemente uma interface de reserva de equipamentos usando Bootstrap 5.3.8 e este guia. Use uma linha g-4 com col-lg-7 e col-lg-5, espaçamento p-3 p-md-4, o corpo adaptado ao tema e papéis de cor sutil/de ênfase, uma tabela semântica e controles de formulário identificados por rótulos. Faça a validação com erros explícitos e um resumo de erros antes de abrir o Modal nativo de Bootstrap. Preserve os campos ao editar; adicione registros apenas ao estado local de demonstração, a menos que seja fornecido um API real. Ofereça suporte a data-bs-theme light/dark e ao fechamento pelo teclado. Não substitua a escala fornecida por valores arbitrários.
05
Escopo e fontes do sistema de design Bootstrap
Guia de aplicação Bootstrap 5.3.8 e exemplo executável de componentes nativos de OpenDesign. Os valores de referência vêm da documentação Bootstrap vinculada e do CSS compilado com versão fixada. Os registros de reservas, a composição do layout e o resumo de validação são código original da aplicação; nenhuma reserva real é enviada.
