# Sistema de design Bootstrap

## Prévia da interface do sistema de design Bootstrap

Filtre reservas, valide campos, revise em um modal nativo e alterne entre os modos claro e escuro.

## 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.

### Cores semânticas e funções das superfícies

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| --bs-primary | #0d6efd | Cor base da ação principal e dos links. |
| --bs-secondary | #6c757d | Família secundária de tema; não corresponde à função adaptativa de texto secundário do corpo. |
| --bs-success | #198754 | Cor base do status positivo; use também um rótulo. |
| --bs-danger | #dc3545 | Cor base do tema de erro/destrutivo. |
| --bs-warning | #ffc107 | Cor base do tema de alerta; verifique o contraste do texto. |
| --bs-info | #0dcaf0 | Cor base do tema informativo. |
| --bs-body-bg | #fff | Superfície da página no modo claro. |
| --bs-body-color | #212529 | Cor do texto principal no modo claro. |
| --bs-secondary-bg | #e9ecef | Superfície secundária no modo claro. |
| --bs-tertiary-bg | #f8f9fa | Superfície de painel discreta no modo claro. |
| --bs-primary-bg-subtle | #cfe2ff | Superfície primária com tonalidade no modo claro. |
| --bs-primary-text-emphasis | #052c65 | Texto combinado com superfícies primárias sutis. |
| --bs-border-color | #dee2e6 | Função da borda no modo claro. |
### Tipografia do corpo e hierarquia legível

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| --bs-body-font-size | 1rem | Tamanho padrão do texto do corpo: 1rem, normalmente 16px. |
| --bs-body-line-height | 1.5 | Multiplicador sem unidade: normalmente, altura de linha de 24px. |
| --bs-body-font-weight | 400 | Peso normal do texto do corpo. |
| --bs-body-font-family | var(--bs-font-sans-serif) | Pilha de fontes da interface do sistema fornecida por Bootstrap. |
| --bs-font-monospace | SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace | O código e os valores técnicos usam a pilha monoespaçada. |
### Tamanhos de títulos e utilitários de exibição

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| h1 / .h1 | 2.5rem | Limite para telas grandes; h1–h4 usam tamanhos de fonte responsivos por padrão. |
| h2 / .h2 | 2rem | Limite para telas grandes; h1–h4 usam tamanhos de fonte responsivos por padrão. |
| h3 / .h3 | 1.75rem | Limite para telas grandes; h1–h4 usam tamanhos de fonte responsivos por padrão. |
| h4 / .h4 | 1.5rem | Limite para telas grandes; h1–h4 usam tamanhos de fonte responsivos por padrão. |
| h5 / .h5 | 1.25rem | Tamanho padrão fixo do título. |
| h6 / .h6 | 1rem | Tamanho padrão fixo do título. |
| .lead | 1.25rem / weight 300 | Texto introdutório; não substitui um título. |
| .small | 0.875em | Texto relativamente pequeno; use com moderação em metadados. |
### Escala de utilitários de espaçamento

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| 0 | 0 | Use com os utilitários m/p/gap/g; por exemplo, p-0. |
| 1 | 0.25rem | Use com os utilitários m/p/gap/g; por exemplo, p-1. |
| 2 | 0.5rem | Use com os utilitários m/p/gap/g; por exemplo, p-2. |
| 3 | 1rem | Use com os utilitários m/p/gap/g; por exemplo, p-3. |
| 4 | 1.5rem | Use com os utilitários m/p/gap/g; por exemplo, p-4. |
| 5 | 3rem | Use com os utilitários m/p/gap/g; por exemplo, p-5. |
| ms / me | inline start / end | Convenção de lados lógicos; diferente de ml/mr nas versões antigas de Bootstrap. |
| p-3 p-md-4 | 1rem → 1.5rem at md | Preenchimento responsivo usado no exemplo. |
| gap-2 | 0.5rem | Espaçamento entre os elementos filhos de flex/grid. |
### Limites da grade responsiva

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| xs / .col- | 0 | Faixa base, sem infixo xs. |
| sm / .col-sm- | 576px | Faixa pequena; largura máxima de .container: 540px. |
| md / .col-md- | 768px | Faixa média; largura máxima de .container: 720px. |
| lg / .col-lg- | 992px | Faixa grande; largura máxima de .container: 960px. |
| xl / .col-xl- | 1200px | Faixa extragrande; largura máxima de .container: 1140px. |
| xxl / .col-xxl- | 1400px | Maior faixa padrão; largura máxima de .container: 1320px. |
| Grid columns | 12 | Uma composição col-lg-7 + col-lg-5 preenche uma linha. |
| Default horizontal gutter | 1.5rem | Preenchimento de coluna de 0.75rem em cada lado; a linha compensa com margens negativas. |
### Raio das bordas e elevação

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| --bs-border-width | 1px | Largura padrão da borda. |
| --bs-border-radius | 0.375rem | Campos, cartões e cantos arredondados padrão. |
| --bs-border-radius-sm | 0.25rem | Arredondamento compacto. |
| --bs-border-radius-lg | 0.5rem | Arredondamento mais amplo. |
| --bs-border-radius-xl | 1rem | Arredondamento amplo para superfícies. |
| --bs-border-radius-xxl | 2rem | Arredondamento extragrande para superfícies. |
| --bs-border-radius-pill | 50rem | Formato de pílula; não representa o raio medido de um componente. |
| --bs-box-shadow-sm | 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) | Elevação sutil. |
| --bs-box-shadow | 0 0.5rem 1rem rgba(0, 0, 0, 0.15) | Elevação padrão. |
| --bs-box-shadow-lg | 0 1rem 3rem rgba(0, 0, 0, 0.175) | Elevação intensa; não aplique a todas as superfícies. |
### Tamanho dos botões e variáveis de estado

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| --bs-btn-padding-x | 0.75rem | Preenchimento horizontal padrão do botão. |
| --bs-btn-padding-y | 0.375rem | Preenchimento vertical padrão do botão. |
| --bs-btn-font-size | 1rem | Tamanho padrão do texto do botão. |
| --bs-btn-line-height | 1.5 | Multiplicador padrão da altura de linha do rótulo. |
| --bs-btn-border-width | 1px | Espessura padrão da borda. |
| --bs-btn-border-radius | var(--bs-border-radius) | Raio padrão do botão. |
| --bs-btn-disabled-opacity | 0.65 | Estilo visual; use também o atributo disabled real. |
### Alterações de função nos modos claro e escuro

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| --bs-body-bg | light #fff / dark #212529 | O plano de fundo da página acompanha data-bs-theme. |
| --bs-body-color | light #212529 / dark #dee2e6 | A cor do texto se adapta à superfície. |
| --bs-border-color | light #dee2e6 / dark #495057 | Borda adaptada ao tema. |
| --bs-primary-bg-subtle | light #cfe2ff / dark #031633 | O plano de fundo colorido do status muda conforme o modo. |
| --bs-primary-text-emphasis | light #052c65 / dark #6ea8fe | Use com a superfície sutil correspondente. |
| data-bs-theme | light \| dark | Defina globalmente em html ou em uma subárvore local. |
## Guia completo do sistema de design Bootstrap

Um guia prático para escolher, aplicar e avaliar este sistema em uma interface real.

Orientações completas, um ponto de partida para a implementação e links para o código-fonte.

## 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.

Consulte a especificação de apoio

### 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.

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

Referência de código

Consulte a especificação de apoio

## 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.

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

Referência de código

Consulte a especificação de apoio

### Concentre a personalização no componente

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.

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

Referência de código

Consulte a especificação de apoio

## 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.

Consulte a especificação de apoio

### 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.

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

Referência de código

Consulte a especificação de apoio

## 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.

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

Referência de código

Consulte a especificação de apoio

### Mantenha intacta a relação entre linhas e colunas

A demonstração usa row g-4 com col-lg-7 e col-lg-5. As duas seções ocupam toda a largura até o limite lg de 992px; a partir daí, dividem uma linha de doze colunas. Coloque as colunas da grade dentro de uma linha: as margens negativas dela compensam o preenchimento interno das colunas. Adicionar outra margem arbitrária ao redor de cada coluna pode desfazer esse alinhamento.

Consulte a especificação de apoio

## 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.

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

Referência de código

Consulte a especificação de apoio

### Use um estado inválido real e um resumo acessível

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.

1. Verifique o resultado da restrição antes de marcar o campo como inválido.

2. Associe a mensagem de erro ao campo e exponha o estado inválido.

3. Após o envio, direcione o foco para um resumo útil ou para o primeiro campo inválido.

Consulte a especificação de apoio

## 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.

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

Referência de código

Consulte a especificação de apoio

### Restrinja a rolagem da tabela aos dados

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.

Consulte a especificação de apoio

## 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.

```
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();
});
```

Referência de código

Consulte a especificação de apoio

### Trate o modal como um ciclo de vida de componente

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.

Consulte a especificação de apoio

## 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.

Consulte a especificação de apoio

### Amplie usando o contrato real do componente

Para adicionar outro campo ao formulário, informe seu rótulo, id, restrição, mensagem associada e lógica de validação. Para adicionar outro estado de registro, defina o texto e um par de badges semânticos apropriado. Para alterar o layout, escolha um breakpoint e uma divisão da grade entre as opções acima. Essas são extensões explícitas do exemplo funcional, não um pedido para inventar um novo vocabulário de interface.

- Use o exemplo para inspecionar o foco, o fechamento do modal e as alterações de tema.

- Mantenha as operações de dados da aplicação separadas do comportamento do plugin Bootstrap.

- Confira novamente qualquer substituição de tema nos estados normal, hover, foco, inválido e desabilitado.

Consulte a especificação de apoio

## 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.

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

Referência de código

- 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.

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

Referência de código

- .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.

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

Referência de código

- 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.

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

Referência de código

- 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.

## 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.

```
# 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

```
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.
```

## 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.

- Referência de Bootstrap 5.3 Fundamentos, utilitários e componentes versionados.

- Variáveis e valores padrão de CSS Nomes e valores padrão usados nas tabelas de especificações.

- Validação e comportamento do modal Orientações sobre estados dos campos; os exemplos de componentes também trazem links para as páginas exatas de API.

## Recursos relacionados ao sistema de design Bootstrap

### Bulma

Crie uma mesa editorial com a estrutura real de campos e controles de Bulma, colunas responsivas, modificadores de cores semânticas e variáveis de CSS, incluindo o código completo de validação.

### Chakra UI

Uma referência do Chakra UI v3 para tokens, funções de cores semânticas, receitas e componentes compostos de formulário. Examine as escalas reais de espaçamento e tipografia e experimente um formulário nativo de perfil de espaço de trabalho, com validação, simulação de falha ao salvar e aparência clara/escura.

### CoreUI

Uma fila de revisão do CoreUI criada com variáveis reais do tema 5.9, abas nativas, seleção em lote por caixas de seleção e uma notificação persistente que permite desfazer o último arquivamento local.


- [Referência de implementação](https://getbootstrap.com/docs/5.3/getting-started/introduction/)
- [Fonte](https://getbootstrap.com/docs/5.3/customize/css-variables/)
- [Fonte](https://getbootstrap.com/docs/5.3/content/typography/)
- [Fonte](https://getbootstrap.com/docs/5.3/utilities/spacing/)
- [Fonte](https://getbootstrap.com/docs/5.3/layout/grid/)
- [Fonte](https://getbootstrap.com/docs/5.3/components/buttons/)
- [Fonte](https://getbootstrap.com/docs/5.3/customize/color-modes/)
- [Consulte a especificação de apoio](https://getbootstrap.com/docs/5.3/getting-started/introduction/)
- [Referência de código](https://getbootstrap.com/docs/5.3/customize/sass/)
- [Consulte a especificação de apoio](https://getbootstrap.com/docs/5.3/customize/sass/)
- [Referência de código](https://getbootstrap.com/docs/5.3/customize/color-modes/)
- [Consulte a especificação de apoio](https://getbootstrap.com/docs/5.3/customize/color-modes/)
- [Referência de código](https://getbootstrap.com/docs/5.3/components/buttons/)
- [Consulte a especificação de apoio](https://getbootstrap.com/docs/5.3/components/buttons/)
- [Consulte a especificação de apoio](https://getbootstrap.com/docs/5.3/content/typography/)
- [Referência de código](https://getbootstrap.com/docs/5.3/utilities/colors/)
- [Consulte a especificação de apoio](https://getbootstrap.com/docs/5.3/utilities/colors/)
- [Referência de código](https://getbootstrap.com/docs/5.3/utilities/spacing/)
- [Consulte a especificação de apoio](https://getbootstrap.com/docs/5.3/utilities/spacing/)
- [Consulte a especificação de apoio](https://getbootstrap.com/docs/5.3/layout/grid/)
- [Referência de código](https://getbootstrap.com/docs/5.3/forms/form-control/)
- [Consulte a especificação de apoio](https://getbootstrap.com/docs/5.3/forms/form-control/)
- [Consulte a especificação de apoio](https://getbootstrap.com/docs/5.3/forms/validation/)
- [Referência de código](https://getbootstrap.com/docs/5.3/content/tables/)
- [Consulte a especificação de apoio](https://getbootstrap.com/docs/5.3/content/tables/)
- [Referência de código](https://getbootstrap.com/docs/5.3/components/modal/)
- [Consulte a especificação de apoio](https://getbootstrap.com/docs/5.3/components/modal/)
- [Consulte a especificação de apoio](https://getbootstrap.com/docs/5.3/getting-started/vite/)
- [Consulte a especificação de apoio](https://getbootstrap.com/docs/5.3/getting-started/javascript/)
- [Referência de código](https://getbootstrap.com/docs/5.3/getting-started/introduction/)
- [Referência de código](https://getbootstrap.com/docs/5.3/forms/validation/)
- [Referência de código](https://getbootstrap.com/docs/5.3/layout/grid/)
- [Referência de Bootstrap 5.3 Fundamentos, utilitários e componentes versionados.](https://getbootstrap.com/docs/5.3/)
- [Variáveis e valores padrão de CSS Nomes e valores padrão usados nas tabelas de especificações.](https://getbootstrap.com/docs/5.3/customize/css-variables/)
- [Validação e comportamento do modal Orientações sobre estados dos campos; os exemplos de componentes também trazem links para as páginas exatas de API.](https://getbootstrap.com/docs/5.3/forms/validation/)