Construir interfaces responsivas com componentes oficiais
Inclua o contexto do projeto e peça à IA que justifique a escolha técnica.
Framework CSS Instrução para IA
Bootstrap 5.3.8
Contrato completo de Bootstrap 5.3.8: Customize, Layout, Content, Forms, Components, Helpers, Utilities e Extend — 88 tópicos.
Como usar
Anexe o arquivo à conversa com a IA e declare que ele é o contrato técnico da tarefa. Em seguida, forneça contexto, requisito, restrições e critérios de aceite.
Pronto para anexarFluxo recomendado
Como utilizar este .md em um projeto
1. Declare o ambienteBrowser, servidor, build, versão, dispositivos, compatibilidade e dependências.
2. Defina o objetivo do usuárioNão comece por uma classe/API; comece pelo comportamento que precisa existir.
3. Peça seleção de conceitosA IA deve citar as partes do guia aplicáveis e ignorar o restante.
4. ImplementeGere código somente depois da decisão e preserve a arquitetura existente.
5. ValideChecklist, edge cases, acessibilidade, segurança, responsividade/performance conforme o caso.
Aplicações
Quando anexar este guia
Selecionar classes e utilities sem inventar API
Inclua o contexto do projeto e peça à IA que justifique a escolha técnica.
Customizar tema por Sass/CSS variables
Inclua o contexto do projeto e peça à IA que justifique a escolha técnica.
Orientar acessibilidade e comportamento dos plugins JavaScript
Inclua o contexto do projeto e peça à IA que justifique a escolha técnica.
Mapa do arquivo
Principais blocos de conhecimento
1. Contrato de execução para a IA
Seção coberta pelo guia Markdown.
2. Inicialização e arquitetura de uso
Seção coberta pelo guia Markdown.
3. Mapa completo do Bootstrap 5.3.8
Seção coberta pelo guia Markdown.
3.1 Customize
Seção coberta pelo guia Markdown.
3.2 Layout
Seção coberta pelo guia Markdown.
3.3 Content
Seção coberta pelo guia Markdown.
3.4 Forms
Seção coberta pelo guia Markdown.
3.5 Components
Seção coberta pelo guia Markdown.
3.6 Helpers
Seção coberta pelo guia Markdown.
3.7 Utilities
Seção coberta pelo guia Markdown.
3.8 Extend
Seção coberta pelo guia Markdown.
4. Regras de decisão por situação
Seção coberta pelo guia Markdown.
Catálogo completo
88 tópicos oficiais mapeados para a IA
Pesquise ou filtre por categoria.
01 · Customize
Overview
Visão geral dos mecanismos de personalização: Sass, opções, cores, modos de cor, componentes, variáveis CSS e otimização.
Abrir referência oficial02 · Customize
Sass
Use os fontes Sass para controlar variáveis, maps, mixins e funções antes da compilação.
Abrir referência oficial03 · Customize
Options
Preferências globais de CSS controladas por variáveis Sass; centralize as opções em um ponto de configuração.
Abrir referência oficial04 · Customize
Color
Sistema de cores, theme colors, maps Sass e geração de variantes/utilitários.
Abrir referência oficial05 · Customize
Color modes
Temas claro/escuro e modos personalizados por meio de data-bs-theme e variáveis CSS.
Abrir referência oficial06 · Customize
Components
Base + modifier, maps e loops Sass para gerar variantes de componentes de modo sistemático.
Abrir referência oficial07 · Customize
CSS variables
Variáveis --bs-* para customização em runtime e escopos locais sem recompilar todo o Sass.
Abrir referência oficial08 · Customize
Optimize
Reduza CSS/JS não usado, importe somente o necessário, avalie ícones/fontes e minimize payload.
Abrir referência oficial09 · Layout
Breakpoints
Breakpoints mobile-first: xs <576px, sm ≥576, md ≥768, lg ≥992, xl ≥1200, xxl ≥1400.
Abrir referência oficial10 · Layout
Containers
Use .container para largura responsiva, .container-fluid para 100% e .container-{breakpoint} para alternância.
Abrir referência oficial11 · Layout
Grid
Grid responsivo de 12 colunas baseado em flexbox com .row e .col-*.
Abrir referência oficial12 · Layout
Columns
Controle alinhamento, ordem, largura automática, offset e comportamento responsivo de colunas.
Abrir referência oficial13 · Layout
Gutters
Espaçamento entre colunas/linhas com .g-*, .gx-* e .gy-*.
Abrir referência oficial14 · Layout
Utilities
Combine utilitários de display, flex, spacing e sizing para ajustes de layout sem CSS específico desnecessário.
Abrir referência oficial15 · Layout
Z-index
Entenda a escala de empilhamento dos componentes e crie novos contextos de stacking com cautela.
Abrir referência oficial16 · Layout
CSS Grid
Alternativa opt-in baseada em CSS Grid, usando .grid e .g-col-* quando suas características forem mais adequadas.
Abrir referência oficial17 · Content
Reboot
Normalização opinativa do Bootstrap para consistência de tipografia, box sizing, elementos nativos e defaults.
Abrir referência oficial18 · Content
Typography
Cabeçalhos, display headings, lead, listas, blockquote e utilitários tipográficos.
Abrir referência oficial19 · Content
Images
Imagens responsivas com .img-fluid, thumbnails e alinhamentos adequados.
Abrir referência oficial20 · Content
Tables
Tabelas opt-in com variantes, hover, striped, borders, responsividade e semântica HTML preservada.
Abrir referência oficial21 · Content
Figures
Estrutura consistente para figura, imagem e legenda com .figure, .figure-img e .figure-caption.
Abrir referência oficial22 · Forms
Overview
Visão geral dos controles de formulário, estados, layout, acessibilidade e convenções de markup.
Abrir referência oficial23 · Forms
Form control
Inputs textuais e textarea com .form-control, tamanhos, estados e arquivos.
Abrir referência oficial24 · Forms
Select
Select nativo estilizado com .form-select; preserve labels e semântica do controle.
Abrir referência oficial25 · Forms
Checks & radios
Checkbox, radio e switch com .form-check, incluindo inline e estados.
Abrir referência oficial26 · Forms
Range
Range input estilizado com .form-range.
Abrir referência oficial27 · Forms
Input group
Agrupa texto, botões e controles mantendo associação visual e semântica.
Abrir referência oficial28 · Forms
Floating labels
Labels flutuantes requerem estrutura e placeholder apropriados; não substituem acessibilidade do label.
Abrir referência oficial29 · Forms
Layout
Grid, gutters e utilitários para formulários inline, responsivos e complexos.
Abrir referência oficial30 · Forms
Validation
Validação nativa ou customizada com .was-validated, .is-valid e .is-invalid, sempre com feedback textual.
Abrir referência oficial31 · Components
Accordion
Conteúdo expansível organizado sobre Collapse; útil para informação secundária e FAQ.
Abrir referência oficial32 · Components
Alerts
Mensagens contextuais de status; use role apropriado e não dependa apenas de cor.
Abrir referência oficial33 · Components
Badge
Indicador compacto para status, contagem ou categoria; mantenha contexto textual.
Abrir referência oficial34 · Components
Breadcrumb
Trilha de navegação hierárquica; utilize nav e aria-label.
Abrir referência oficial35 · Components
Buttons
Ações com .btn; use button para ação e a apenas para navegação.
Abrir referência oficial36 · Components
Button group
Agrupamento visual/funcional de ações relacionadas, com rótulos acessíveis.
Abrir referência oficial37 · Components
Card
Contêiner flexível de conteúdo com header/body/footer, imagens e variantes.
Abrir referência oficial38 · Components
Carousel
Conteúdo deslizante; use com parcimônia, controle de pausa e rótulos acessíveis.
Abrir referência oficial39 · Components
Close button
Controle de fechar com .btn-close e nome acessível.
Abrir referência oficial40 · Components
Collapse
Mostra/oculta conteúdo via Data API ou JS; sincronize aria-expanded e target.
Abrir referência oficial41 · Components
Dropdowns
Menus contextuais posicionados com Popper; preserve navegação por teclado.
Abrir referência oficial42 · Components
List group
Listas estilizadas de itens, links e estados ativos/disabled.
Abrir referência oficial43 · Components
Modal
Diálogo modal para foco temporário; evite modais aninhados e forneça título/fechamento claros.
Abrir referência oficial44 · Components
Navbar
Cabeçalho/navegação responsiva com brand, nav, toggler e collapse/offcanvas.
Abrir referência oficial45 · Components
Navs & tabs
Navegação entre seções equivalentes; tabs exigem relação correta entre tab e panel.
Abrir referência oficial46 · Components
Offcanvas
Painel lateral/modal, útil para navegação móvel, filtros e tarefas secundárias.
Abrir referência oficial47 · Components
Pagination
Navegação entre páginas; forneça estado atual, disabled e rótulos.
Abrir referência oficial48 · Components
Placeholders
Skeletons de carregamento; complemente com estado acessível e evite simular conteúdo por tempo indefinido.
Abrir referência oficial49 · Components
Popovers
Conteúdo contextual acionável; depende de Popper e precisa de inicialização JS.
Abrir referência oficial50 · Components
Progress
Progresso de tarefa; informe valor semanticamente e não apenas visualmente.
Abrir referência oficial51 · Components
Scrollspy
Atualiza navegação conforme a região rolada; requer targets estáveis e estrutura previsível.
Abrir referência oficial52 · Components
Spinners
Indicação indeterminada de carregamento; adicione texto acessível/aria-live quando necessário.
Abrir referência oficial53 · Components
Toasts
Feedback não bloqueante e temporário; ajuste delay/autohide e use live regions adequadas.
Abrir referência oficial54 · Components
Tooltips
Informação suplementar curta; nunca esconda informação essencial apenas em hover/focus.
Abrir referência oficial55 · Helpers
Clearfix
Limpa floats legados; prefira flex/grid quando o layout puder ser moderno.
Abrir referência oficial56 · Helpers
Color & background
Pares de cor/fundo com contraste contextual coerente.
Abrir referência oficial57 · Helpers
Colored links
Links coloridos com estados hover/focus derivados do sistema de cores.
Abrir referência oficial58 · Helpers
Focus ring
Anel de foco customizável; nunca remova foco sem substituto claramente visível.
Abrir referência oficial59 · Helpers
Icon link
Alinha ícone e texto em links e controla transformações de ícone.
Abrir referência oficial60 · Helpers
Position
Atalhos para posicionar elementos relativos/absolutos em casos comuns.
Abrir referência oficial61 · Helpers
Ratio
Mantém proporção de embeds/vídeos/conteúdo com .ratio e variantes.
Abrir referência oficial62 · Helpers
Stacks
Pilhas verticais/horizontais com .vstack/.hstack e gap.
Abrir referência oficial63 · Helpers
Stretched link
Expande área clicável de um link dentro de um contêiner posicionado; verifique sobreposição/interações.
Abrir referência oficial64 · Helpers
Text truncation
Trunca uma linha com reticências; disponibilize conteúdo completo quando necessário.
Abrir referência oficial65 · Helpers
Vertical rule
Separador vertical que herda cor e funciona em layouts flex.
Abrir referência oficial66 · Helpers
Visually hidden
Conteúdo disponível a tecnologias assistivas sem exibição visual; use também focusable quando aplicável.
Abrir referência oficial67 · Utilities
API
Sass Utilities API para criar, remover ou adaptar famílias de classes utilitárias.
Abrir referência oficial68 · Utilities
Background
Background colors/gradients com tokens e opacidade.
Abrir referência oficial69 · Utilities
Borders
Adicionar/remover bordas, cor, largura, radius e opacidade.
Abrir referência oficial70 · Utilities
Colors
Classes de cor textual/contextual; valide contraste.
Abrir referência oficial71 · Utilities
Display
Controla display responsivamente; útil para esconder/mostrar ou alternar layout.
Abrir referência oficial72 · Utilities
Flex
Direção, wrap, justify, align, grow/shrink e order sobre flex containers/items.
Abrir referência oficial73 · Utilities
Float
Floats responsivos; use apenas quando float é semanticamente adequado, não como grid moderno.
Abrir referência oficial74 · Utilities
Interactions
Seleção de texto e pointer-events; não bloqueie interação necessária/acessível.
Abrir referência oficial75 · Utilities
Link
Opacity, offset, underline e estados de link.
Abrir referência oficial76 · Utilities
Object fit
Controla como mídia substituída ocupa a caixa: contain, cover, fill, scale, none.
Abrir referência oficial77 · Utilities
Opacity
Opacidade do elemento; atenção a contraste e hit targets.
Abrir referência oficial78 · Utilities
Overflow
Controle de overflow auto/hidden/visible/scroll e eixos conforme suporte.
Abrir referência oficial79 · Utilities
Position
static, relative, absolute, fixed, sticky e utilitários top/start/end/bottom/translate.
Abrir referência oficial80 · Utilities
Shadows
Sombras predefinidas para hierarquia visual; não use como único indicador de estado.
Abrir referência oficial81 · Utilities
Sizing
Largura/altura/min/max relativas a parent e viewport.
Abrir referência oficial82 · Utilities
Spacing
Margin, padding e gap responsivos; siga escala do design system.
Abrir referência oficial83 · Utilities
Text
Alinhamento, wrapping, transform, weight, style, decoration, monospace e line-height.
Abrir referência oficial84 · Utilities
Vertical align
Alinhamento vertical de inline/table-cell; não substitui alinhamento flex/grid.
Abrir referência oficial85 · Utilities
Visibility
visibility sem alterar layout; diferencie de display:none e de visually-hidden.
Abrir referência oficial86 · Utilities
Z-index
Classes simplificadas de z-index; evite corrida de números e documente camadas.
Abrir referência oficial87 · Extend
Approach
Entenda decisões e princípios de extensão para adicionar regras sem lutar contra a arquitetura do Bootstrap.
Abrir referência oficial88 · Extend
Icons
Bootstrap não inclui ícones no core; escolha biblioteca de ícones conscientemente e preserve acessibilidade.
Abrir referência oficialNenhum tópico encontrado.
Prompt
Prompt-base para copiar
Use o guia “Bootstrap 5.3.8” anexado como contrato técnico para esta tarefa. 1. Diagnostique o requisito e o ambiente. 2. Aponte as seções do guia que serão usadas. 3. Escolha a solução mais simples que preserve semântica, acessibilidade, segurança e manutenção. 4. Não invente APIs/classes. 5. Implemente e revise pelo checklist do guia. Contexto: [DESCREVA o sistema, stack, estado atual e cenário da mudança] Objetivo: [DESCREVA o resultado observável que deve existir ao final] Restrições: [DESCREVA o que não pode mudar, compatibilidade, segurança e limites técnicos]
Exemplo preenchido — o que o usuário pode descrever
Use o modelo acima com dados concretos do projeto. O exemplo abaixo mostra o nível de detalhe esperado.
Contexto: Aplicação interna de atendimento em HTML5 + JavaScript, Bootstrap 5.3.8 via CDN, appbar fixa e suporte a desktop/mobile a partir de 360px. Objetivo: Adicionar ao cadastro um modal de confirmação de exclusão e um toast de sucesso, mantendo o fluxo atual. Restrições: Não alterar backend; não inventar classes Bootstrap; preservar teclado/foco; evitar CSS/JS customizados quando componentes e utilities oficiais resolverem.
ContextoStack, versões, arquitetura, página/módulo afetado, estado atual e comportamento existente.
ObjetivoResultado observável para o usuário ou para o sistema; diga o que deve funcionar ao final.
RestriçõesO que não pode mudar, compatibilidade, segurança, acessibilidade, performance, prazo e limites de escopo.