Bootstrap 设计系统.

名称 / 规则	值 / 配置	用途
`--bs-primary`	`#0d6efd`	主要操作和链接的基础色。
`--bs-secondary`	`#6c757d`	次要主题色系；不是自适应的正文次要文本角色。
`--bs-success`	`#198754`	积极状态的基础色；应搭配文字标签。
`--bs-danger`	`#dc3545`	错误/危险主题的基础色。
`--bs-warning`	`#ffc107`	警告主题的基础色；请检查前景色对比度。
`--bs-info`	`#0dcaf0`	信息主题的基础色。
`--bs-body-bg`	`#fff`	浅色模式下的页面表面。
`--bs-body-color`	`#212529`	浅色模式下的正文前景色。
`--bs-secondary-bg`	`#e9ecef`	浅色模式下的次级表面。
`--bs-tertiary-bg`	`#f8f9fa`	浅色模式下的克制型面板表面。
`--bs-primary-bg-subtle`	`#cfe2ff`	浅色模式下的浅色主要表面。
`--bs-primary-text-emphasis`	`#052c65`	搭配主要浅色表面使用的文本颜色。
`--bs-border-color`	`#dee2e6`	浅色模式下的边框角色。

正文字体与易读层级

名称 / 规则	值 / 配置	用途
`--bs-body-font-size`	`1rem`	默认正文大小：1rem，通常为 16px。
`--bs-body-line-height`	`1.5`	无单位倍数：行高通常为 24px。
`--bs-body-font-weight`	`400`	常规正文字重。
`--bs-body-font-family`	`var(--bs-font-sans-serif)`	由 Bootstrap 提供的系统 UI 字体栈。
`--bs-font-monospace`	`SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace`	代码和技术值使用等宽字体栈。

标题字号与展示型工具类

名称 / 规则	值 / 配置	用途
`h1 / .h1`	`2.5rem`	大屏断点；h1–h4 默认采用响应式字号。
`h2 / .h2`	`2rem`	大屏断点；h1–h4 默认采用响应式字号。
`h3 / .h3`	`1.75rem`	大屏断点；h1–h4 默认采用响应式字号。
`h4 / .h4`	`1.5rem`	大屏断点；h1–h4 默认采用响应式字号。
`h5 / .h5`	`1.25rem`	固定的默认标题字号。
`h6 / .h6`	`1rem`	固定的默认标题字号。
`.lead`	`1.25rem / weight 300`	引言文本；不能替代标题。
`.small`	`0.875em`	相对较小的文本；应谨慎用于元数据。

间距工具类比例

名称 / 规则	值 / 配置	用途
`0`	`0`	与 m/p/gap/g 工具类搭配使用，例如 p-0。
`1`	`0.25rem`	与 m/p/gap/g 工具类搭配使用，例如 p-1。
`2`	`0.5rem`	与 m/p/gap/g 工具类搭配使用，例如 p-2。
`3`	`1rem`	与 m/p/gap/g 工具类搭配使用，例如 p-3。
`4`	`1.5rem`	与 m/p/gap/g 工具类搭配使用，例如 p-4。
`5`	`3rem`	与 m/p/gap/g 工具类搭配使用，例如 p-5。
`ms / me`	`inline start / end`	逻辑方向的边距约定；不同于旧版 Bootstrap 中的 ml/mr。
`p-3 p-md-4`	`1rem → 1.5rem at md`	示例中使用的响应式内边距。
`gap-2`	`0.5rem`	弹性/网格子项之间的间距。

响应式网格断点

名称 / 规则	值 / 配置	用途
`xs / .col-`	`0`	基础断点，不带 xs 前缀。
`sm / .col-sm-`	`576px`	小断点；.container 最大宽度为 540px。
`md / .col-md-`	`768px`	中断点；.container 最大宽度为 720px。
`lg / .col-lg-`	`992px`	大断点；.container 最大宽度为 960px。
`xl / .col-xl-`	`1200px`	超大断点；.container 最大宽度为 1140px。
`xxl / .col-xxl-`	`1400px`	默认最大断点；.container 最大宽度为 1320px。
`Grid columns`	`12`	col-lg-7 与 col-lg-5 的组合可填满一行。
`Default horizontal gutter`	`1.5rem`	每侧列内边距为 0.75rem；行会通过负外边距进行补偿。

边框、圆角与阴影

名称 / 规则	值 / 配置	用途
`--bs-border-width`	`1px`	默认边框宽度。
`--bs-border-radius`	`0.375rem`	输入框、卡片和默认圆角。
`--bs-border-radius-sm`	`0.25rem`	紧凑圆角。
`--bs-border-radius-lg`	`0.5rem`	较大的圆角样式。
`--bs-border-radius-xl`	`1rem`	大尺寸界面表面圆角。
`--bs-border-radius-xxl`	`2rem`	超大尺寸界面表面圆角。
`--bs-border-radius-pill`	`50rem`	胶囊形几何样式，不是按具体组件半径测量得出。
`--bs-box-shadow-sm`	`0 0.125rem 0.25rem rgba(0, 0, 0, 0.075)`	轻微阴影。
`--bs-box-shadow`	`0 0.5rem 1rem rgba(0, 0, 0, 0.15)`	默认阴影。
`--bs-box-shadow-lg`	`0 1rem 3rem rgba(0, 0, 0, 0.175)`	强阴影；不要应用于所有界面表面。

按钮尺寸与状态变量

名称 / 规则	值 / 配置	用途
`--bs-btn-padding-x`	`0.75rem`	默认按钮水平内边距。
`--bs-btn-padding-y`	`0.375rem`	默认按钮垂直内边距。
`--bs-btn-font-size`	`1rem`	默认按钮标签字号。
`--bs-btn-line-height`	`1.5`	默认标签行高倍数。
`--bs-btn-border-width`	`1px`	默认边框厚度。
`--bs-btn-border-radius`	`var(--bs-border-radius)`	默认按钮圆角。
`--bs-btn-disabled-opacity`	`0.65`	视觉样式；同时也应使用实际的 disabled 属性。

浅色与深色模式下的角色变化

名称 / 规则	值 / 配置	用途
`--bs-body-bg`	`light #fff / dark #212529`	页面背景随 data-bs-theme 变化。
`--bs-body-color`	`light #212529 / dark #dee2e6`	前景色会根据界面表面自适应。
`--bs-border-color`	`light #dee2e6 / dark #495057`	随主题变化的边框。
`--bs-primary-bg-subtle`	`light #cfe2ff / dark #031633`	有色状态背景会随模式变化。
`--bs-primary-text-emphasis`	`light #052c65 / dark #6ea8fe`	与对应的浅色表面搭配使用。
`data-bs-theme`	`light \| dark`	在 html 上全局设置，或在局部子树中设置。

Bootstrap 设计系统完整指南

实用指南，介绍如何为真实界面选择、应用和评审此系统。

DESIGN-bootstrap.md

完整指导、实现起点和源代码链接。

下载指南

选择 Bootstrap 设计系统的 CSS 与 JavaScript 职责

一个样式表，可选的组件行为

Bootstrap 编译后的样式表提供网格、排版、工具类和组件外观。JavaScript 包则提供 Modal、Collapse 和 Dropdown 等交互插件。样式按钮不需要 JavaScript；使用 data-bs-toggle 的模态框触发器则需要。可运行的预览会在本地加载匹配的 5.3.8 样式表和包，以展示这些控件实际遵循的约定。
摘自本 OpenDesign 指南

预约表格筛选、错误摘要和本地插入行均属于应用代码。明确区分这一点，就能在将虚构记录替换为服务数据时，避免把预约行为归因于 Bootstrap 本身。

CSS：布局、排版、按钮、字段、表格和状态样式。
Bootstrap JavaScript：模态框打开、背景遮罩、Escape 键和焦点行为。
应用 JavaScript：验证消息、记录筛选和本地数据更新。

选择编译版 CSS 或 Sass 构建

快速入门，或产品可采用标准工具类集合时，使用编译版 CSS。需要在构建时修改主题映射、工具类生成或网格时，使用 Sass 源码。运行时的 CSS 自定义属性适用于组件级定制，但修改根颜色变量不会重新生成所有预编译变体。

scss

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

Bootstrap 设计系统：应用语义颜色与颜色模式

让状态表面与前景色相互搭配

预约徽标使用 bg-primary-subtle 搭配 text-primary-emphasis。这些是成对的语义角色，因此当 data-bs-theme 变化时，前景色和背景色都会相应适配。使用原始蓝色背景搭配随意选取的灰色文本，会破坏这种关联。Reserved、In use 和 Draft 仍以文字标签呈现；颜色不是它们唯一的含义。

html

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

在组件级别进行定制

对于单个自定义操作，覆盖其局部 --bs-btn-* 属性。除了默认背景，还要设置悬停和激活状态的值。下面的示例是应用变体，并非 Bootstrap 的默认样式。请将此类保留在目标按钮上，避免它意外影响页面其他无关区域中的所有主要操作。

css

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

Bootstrap 设计系统：使用实际的字体排印比例

区分文档语义与视觉字号

预览中的主标题是带有 h3 类的 h1：它仍是页面的主标题，但使用了更小的视觉比例，更适合工具界面。各节标题是应用 h5 样式的 h2 元素。Bootstrap 同时提供元素默认样式和对应的标题类，因此无需跳过文档层级，也能实现这种区分。

正文默认字号为 1rem，行高为 1.5。h1 到 h4 会随屏幕尺寸调整，之后才达到参考表中的数值。因此，单一宽度下的截图并不能定义完整的字体排印比例。请使用编译后的样式或文档说明的 Sass 行为，不要照搬单个视口中测得的像素字号。

为次要文本赋予适配主题的角色

text-body-secondary 会随正文颜色模式变化，适合显示辅助记录信息，例如设备标题下方的所有者姓名。small 类会相对于所在上下文缩小字号；若用于每个字段标签，表单会更难浏览。标签应保持正常的表单字号，较小字号则留给提示和元数据。

html

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

Bootstrap 设计系统：使用间距工具类和网格进行组合

使用间距比例，避免随意设置间隔

p-3 表示 1rem 内边距；p-4 表示 1.5rem，p-5 则增至 3rem。这些标签是比例档位，而非实际像素值。预览使用 p-3 p-md-4，使外边距内侧的留白在 768px 时增大；mb-3 则以 1rem 间隔分隔字段组。这是此示例采用的具体规则，并非新增的官方间距比例。

html

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

保持行与列的对应关系

Bootstrap 设计系统：明确字段之间的关联

关联标签、提示和反馈

form-label 用于设置实际 label 的样式；其 for 值必须与输入框的 id 相匹配。form-control 用于文本类输入框，form-select 则用于 select。预览通过 aria-describedby 关联提示和错误 ID，并使用 required 设置实际约束。仅靠类名不会自动建立这些语义关联。

html

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

使用实际的无效状态，并提供可访问的错误摘要

提交时，示例会检查每个字段，设置 is-invalid 和 aria-invalid，为出错字段创建文本链接，并将焦点移至摘要。更正字段会更新其状态，同时保留其他答案。应用层的这套处理至关重要：Bootstrap 验证文档提醒，单靠自定义视觉反馈无法让辅助技术完整获取验证信息。

将字段标记为无效之前，先检查实际约束的验证结果。
将错误文本与字段关联，并公开其无效状态。
提交后，将焦点置于有用的摘要或第一个无效字段。

Bootstrap 设计系统：呈现和筛选记录，同时保留其含义

使用表格组件展示可比较的数据

表格包含列标题、行标题和标题说明。table-hover 会应用悬停样式，但不会让行变成按钮。筛选会隐藏匹配行，并更新 aria-live 结果计数。显示的状态仍以徽章内的文本呈现，因此切换颜色模式后，其含义依然清晰。

html

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

将表格滚动限制在数据区域内

当宽表格无法完整显示时，table-responsive 会提供水平滚动。若下拉菜单需要超出裁切区域，请先确认将其放在此包装器内不会造成问题。示例将筛选器置于表格上方。在移动设备上，只有数据区域可以水平滚动；页面本身应保持在视口范围内。

Bootstrap 设计系统：集成并扩展此 Bootstrap 示例

加载相互匹配的 CSS 和 JavaScript 版本

内嵌示例会加载本地存储的 Bootstrap 5.3.8 CSS 和 bundle 文件。其中的数据属性和 Modal API 均来自该版本。在 Vite 应用中，请按照设置部分的说明导入编译后的 CSS 和所需插件。避免同时加载 bundle，并通过其他封装重复初始化同一插件。

根据实际组件约定进行扩展

使用示例检查焦点、模态框关闭行为和主题变化。
将应用数据操作与 Bootstrap 插件行为分开处理。
在常规、悬停、聚焦、无效和禁用状态下重新检查主题覆盖效果。

Bootstrap 设计系统组件示例

index.html — 完整预订示例

完整的 Bootstrap 5.3.8 页面，包含样式表、模态框运行时、验证、筛选器和本地确认功能。将此文件保存为 index.html，并使用下方命令提供该文件夹。固定版本的 CDN 依赖项需要网络连接。

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>

表单数据不会发送给任何服务。已确认的预订仅存在于当前页面会话中。
本地预览使用与 CSS 和 JavaScript 相同的固定版本；此副本使用它们的公共 CDN URL。

字段标签、提示和明确的错误状态

此独立字段组合使用 Bootstrap 样式，并展示实际验证结果。页面示例还添加了错误摘要，其中包含指向三个字段的可聚焦链接。仅用红色边框无法说明如何修正。

html

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

可以不设置 .was-validated，直接设置 .is-invalid。
aria-describedby 用于关联提示和错误文本；aria-invalid 用于表达当前状态。
文档提醒，仅提供自定义视觉验证无法向辅助技术提供足够的信息。

带有明确标签的原生审阅模态框

模态框使用 Bootstrap 的实际插件、背景遮罩、Escape 键处理和焦点管理。将标题放在 modal-header 中，将审阅内容放在 modal-body 中，并将继续操作放在 modal-footer 中。

html

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

加载匹配的 Bootstrap JavaScript bundle 一次即可。
data API 会打开静态示例；有效输入后，实际预订表单会使用 Modal.getOrCreateInstance。
对于必须等到打开过渡完成后才能执行的操作，请使用 shown.bs.modal。

响应式列表与表单布局

库存列表在 lg 断点下占七列，表单占五列。低于 lg 时，两个部分会纵向堆叠。g-4 为布局提供 1.5rem 的间距。列描述宽度，语义化分区和标题描述内容。

html

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