# 设计系统 .italia

## 设计系统 .italia 界面预览

体验一个真实的本地三步规划流程，处理未选择选项的情况，并在返回时保留备注。

## 设计系统 .italia 设计参考

Bootstrap Italia 2.18.3 已安装的软件包及官方文档；在三个视口宽度下检查了原生 CSS 和字体渲染。

### 字体排印与字体

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| Main family | Titillium Web | 预览中包含原生 WOFF2 字体文件，字重为 400/600/700。 |
| Long reading / code | Lora / Roboto Mono | font-serif 和 font-monospace；不要在整个界面中使用等宽字体。 |
| Body | 16px / 1.5 | 自 2.7 版字体排印修订以来的默认基础字号。 |
| H1 mobile | 40px / 48px | 576px 以下使用实际的 2.18.3 CSS。 |
| H1 from 576px | 48px / 56px | 实测的原生 CSS；文档表格仍标注为 60px 行高。 |
| Responsive typography | 576px threshold | 与步骤条 992px 的紧凑布局断点不同。 |
### 原生语义令牌

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| --bs-primary | hsl(210,100%,40%) = #0066cc | 主要操作和链接颜色。 |
| --bs-body-color | hsl(0,0%,10%) | 默认正文颜色。 |
| --bs-success | hsl(160,100%,25%) | 表示成功，并非自动代表已完成。 |
| --bs-danger | hsl(350,60%,50%) | 错误或危险操作语义。 |
| --bs-warning | hsl(36,100%,30%) | 警告语义，与调色板中的黄色区分开。 |
| --bs-border-radius | 4px | 另有 2px 的小号和 8px 的大号变体。 |
### 间距与布局

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| Utility sizes 0–5 | 0, 4, 8, 16, 24, 48px | 根字号为常规的 16px 时；例如 p-3=1rem，p-5=3rem。 |
| Responsive thresholds | 576 / 768 / 992 / 1200 / 1400px | 从 sm 到 xxl。 |
| Container maxima | 540 / 720 / 960 / 1176 / 1320px | 实际的 Italia CSS；xl 与标准 Bootstrap 的 1140px 不同。 |
| Preview width | 900px maximum | 适用于简短本地计划的应用层选择，不是官方容器令牌。 |
| Stepper compact mode | Below 992px | 仅显示当前步骤标签和文本序号。 |
### 步骤条结构

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| Root/header | steppers / steppers-header | 标题区域包含步骤列表。 |
| Stage states | confirmed / active | 应用代码必须在验证后更新这些状态。 |
| Mobile index | steppers-index | 确保 n/total 与当前步骤保持同步。 |
| Body | steppers-content; aria-live=polite | 播报单页内容的变化。 |
| Navigation | steppers-nav; steppers-btn-prev / steppers-btn-next | 这些类定义的是呈现方式，不会自动处理表单流程。 |
## 设计系统 .italia 完整指南

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

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

## 设计系统 .italia 系统与实现

### 通过代码库了解 Designers Italia

> Designers Italia 的范围不止是一个 CSS 软件包，还包括服务设计指南、工具包和实施资源。本示例重点介绍文档所述的 Bootstrap Italia 实现，并固定使用 2.18.3 版。这并不意味着安装该库就能完成公共服务设计，也不代表满足了市政网站的所有要求。

在所检查的版本中，Bootstrap Italia 包含 Bootstrap 5.2.3 并对其进行了定制。不要再叠加一份未经定制的 Bootstrap 软件包。预览使用其原生 CSS，以及本地提供的 Titillium Web 字体文件，并采用原创的三步图书馆之行规划流程。

阅读配套规范

## 设计系统 .italia 字体排印与精确数值

### 字体各司其职

Titillium Web 是界面常用字体；Lora 是适合较长篇幅阅读的衬线字体；Roboto Mono 用于代码或等宽内容。预览加载了实际使用的 Titillium Web 字重，并保留字体许可证，不会在未说明的情况下替换为系统字体。

正文字号保持为 16px。标题字号在 576px 处调整：小屏幕上的 H1 为 40px，行高 48px；在已安装的 CSS 中则为 48px，行高 56px。文档表格给出的桌面端行高为 60px；这里的参考表记录了经检查的版本，并说明两者差异，而不是混用两个来源的数据。

阅读配套规范

## 设计系统 .italia 响应式断点与间距

### 两个断点，各自解决不同问题

字体排印的断点是 576px，而步骤条会在 992px 以下切换标题区域的呈现方式。在紧凑屏幕上，当前步骤标签和 n/total 序号仍会显示。其他步骤名称不会被挤进难以阅读的列中。移动端用户仍需要获得当前步骤提示；示例通过标题焦点和无障碍状态文本提供提示。

间距工具类遵循经过验证的 rem 比例：根字号为常规大小时，尺寸 1 到 5 分别对应 4、8、16、24 和 48px。网格容器的最大宽度包括 xl 下的 1176px，而不是人们常凭记忆照搬的标准 Bootstrap 数值。独立的计划界面明确将 900px 设为应用层的较窄上限。

阅读配套规范

## 设计系统 .italia 步骤条结构与职责

### 标题区域不会驱动工作流

文档规定的结构将 steppers-header、steppers-content 和 steppers-nav 分开。标题区域中的列表项会添加 confirmed 和 active 类；序号用于显示当前位置。上一步和下一步按钮会添加各自专用的类。这些类描述呈现方式。应用必须自行判断当前表单是否有效，以及能否进入后续步骤。

示例为每个步骤使用常规 section，并让控件保留在 DOM 中，只隐藏未激活的 section。因此，返回填写通行备注的步骤时，备注仍会保留。复核步骤会读取现有控件中的内容，而不是根据猜测的服务器结果重新创建内容。

```
<div class="steppers">
  <div class="steppers-header">
    <ul>
      <li class="confirmed">Visit type <span class="visually-hidden">Completed</span></li>
      <li class="active" aria-current="step">Access note <span class="visually-hidden">Current step</span></li>
      <li>Review</li>
    </ul>
    <span class="steppers-index" aria-hidden="true">2/3</span>
  </div>
  <div class="steppers-content" aria-live="polite">
    <h2>Add an access note</h2>
    <label for="note">Access note (optional)</label>
    <textarea id="note" class="form-control" rows="3"></textarea>
  </div>
  <nav class="steppers-nav" aria-label="Plan steps">
    <button class="btn btn-outline-primary steppers-btn-prev">Back</button>
    <button class="btn btn-primary steppers-btn-next">Continue</button>
  </nav>
</div>
```

代码参考

阅读配套规范

## 设计系统 .italia 验证与有效进度

### 仅在必填选项已选后继续

必须选择访问类型。未选择任何选项就继续时，界面会停留在第一步，显示明确的错误提示，并将焦点移至第一个单选按钮。选择类型并继续后，第一步会标记为已完成。备注为选填，可以留空；此时复核页面会说明未添加备注。

返回上一步不会清除已选项或备注。重新开始会有意清除两者，并返回起点。最终页面称为“本地计划”：绝不会声称已提交、获批或保存预约。

1. 未选择任何单选项时尝试继续，并查看错误提示。

2. 选择访问类型，添加简短备注，然后打开复核页面。

3. 返回备注步骤，确认备注仍保留，然后重新开始以清除计划。

阅读配套规范

## 设计系统 .italia 无障碍状态与焦点

### 确保视觉位置与朗读位置一致

当前列表项带有 aria-current="step"，并包含视觉隐藏的当前阶段标签。已完成的阶段除添加确认状态类外，也会显示完成提示。由于当前标题和阶段语义已能说明所处位置，紧凑数字索引会对辅助技术隐藏；它仍会显示，供视觉定位。

按照官方指南的建议，变化中的内容区域使用 aria-live="polite"，适用于单页流程。示例还会将焦点移至新标题，让键盘用户能从可预期的位置开始阅读。在更复杂的表单中，请使用你支持的辅助技术测试这一组合，避免重复播报过多。

- 使用真正的按钮切换步骤，并在第一阶段禁用“返回”按钮。

- 将标签与单选按钮和文本区域正确关联；占位文本不能替代标签。

- 用文本呈现当前状态和已完成状态，不要只依赖蓝色或图标。

阅读配套规范

## 设计系统 .italia 原生资源与初始化

### CSS、字体和可选的 JavaScript

该软件包提供 CSS、打包脚本、源字体和 SVG 雪碧图。此 Stepper 示例需要 CSS 和所选字体；其导航属于应用逻辑。其他组件可使用 data-bs-toggle 或文档所述的数据属性自动初始化。请勿对同一组件同时使用自动初始化和第二个手动实例。

使用模块时，只导入应用所需的组件。官方指南指出，过渡方法会在过渡结束前返回，而且过渡期间发起的调用可能会被忽略。对于这些组件，请等待相关完成事件后再串联依赖操作；这个简单的 Stepper 不会虚构原生过渡 API。

阅读配套规范

## 设计系统 .italia 集成边界

### 使用工具包时，不要暗示服务已完成

该库文档建议保持版本为最新，并不建议在生产环境中依赖公共 CDN。此设置固定了已验证的版本，本地示例也包含自身所需的资源和许可证。真实服务仍需进行内容设计、数据处理、服务器端验证，并根据确认的提交响应采取相应操作。

该示例使用通用的图书馆到访场景，不包含市政标志或官方徽章。这是一个用于教学的 OpenDesign 示例，并非公共机构服务。在任何原型中都应保持这一区别，避免精心设计的确认状态被误认为是真实的请求记录。

阅读配套规范

## 设计系统 .italia 设计系统组件示例

### 第二阶段的 Stepper 结构

已确认状态、当前状态和移动端索引状态必须由应用代码保持同步。

```
<div class="steppers">
  <div class="steppers-header">
    <ul>
      <li class="confirmed">Visit type <span class="visually-hidden">Completed</span></li>
      <li class="active" aria-current="step">Access note <span class="visually-hidden">Current step</span></li>
      <li>Review</li>
    </ul>
    <span class="steppers-index" aria-hidden="true">2/3</span>
  </div>
  <div class="steppers-content" aria-live="polite">
    <h2>Add an access note</h2>
    <label for="note">Access note (optional)</label>
    <textarea id="note" class="form-control" rows="3"></textarea>
  </div>
  <nav class="steppers-nav" aria-label="Plan steps">
    <button class="btn btn-outline-primary steppers-btn-prev">Back</button>
    <button class="btn btn-primary steppers-btn-next">Continue</button>
  </nav>
</div>
```

代码参考

### 完整的本地规划流程

原生 CSS/字体、必填单选项验证、可选备注、确认、返回和重置。

```
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Prepare a library visit</title><link rel="stylesheet" href="vendor/bootstrap-italia-2.18.3/bootstrap-italia.min.css"><link rel="stylesheet" href="vendor/bootstrap-italia-2.18.3/fonts.css"><style>body{padding:32px 16px}main{max-width:900px;margin:auto}.steppers-content{padding:24px 0}.steppers-nav{display:flex;gap:16px;justify-content:space-between}.form-check{margin-bottom:16px}footer{font-size:14px;margin-top:32px;border-top:1px solid #ccc;padding-top:16px}[hidden]{display:none!important}.error{color:var(--bs-danger)}@media(max-width:575px){body{padding:24px 16px}}</style><main><p class="text-uppercase">Independent service example</p><h1>Prepare a library visit</h1><p class="lead">Choose a visit format, add a note and review your local plan.</p><div class="steppers"><div class="steppers-header"><ul id="steps"><li class="active" aria-current="step">Visit type <span class="visually-hidden">Current step</span></li><li>Access note</li><li>Review</li></ul><span class="steppers-index" id="index" aria-hidden="true">1/3</span></div><div class="steppers-content" aria-live="polite"><section data-step="0"><h2 tabindex="-1">Choose a visit type</h2><fieldset><legend class="visually-hidden">Visit type</legend><div class="form-check"><input id="guided" type="radio" name="visit" value="Guided introduction"><label for="guided">Guided introduction</label></div><div class="form-check"><input id="quiet" type="radio" name="visit" value="Quiet reading visit"><label for="quiet">Quiet reading visit</label></div></fieldset><p id="error" class="error" role="alert" hidden>Choose a visit type before continuing.</p></section><section data-step="1" hidden><h2 tabindex="-1">Add an access note</h2><p id="hint">Optional. Describe what would help you use the space; avoid sensitive personal information.</p><label for="note">Access note</label><textarea id="note" rows="3" class="form-control" aria-describedby="hint" maxlength="200"></textarea></section><section data-step="2" hidden><h2 tabindex="-1">Review your local plan</h2><dl><dt>Visit type</dt><dd id="review-type"></dd><dt>Access note</dt><dd id="review-note"></dd></dl><p>This is a local plan only. No booking or request has been sent.</p></section></div><nav class="steppers-nav" aria-label="Plan steps"><button id="back" class="btn btn-outline-primary steppers-btn-prev" disabled>Back</button><button id="next" class="btn btn-primary steppers-btn-next">Continue</button><button id="reset" class="btn btn-primary" hidden>Start again</button></nav></div><footer>Native Bootstrap Italia 2.18.3 CSS and Titillium Web. Original local planning flow; no municipal identity or booking service.</footer></main><script>let step=0;const labels=['Visit type','Access note','Review'];function render(){document.querySelectorAll('[data-step]').forEach(x=>x.hidden=Number(x.dataset.step)!==step);document.querySelectorAll('#steps li').forEach((li,i)=>{li.className=i===step?'active':i<step?'confirmed':'';li.removeAttribute('aria-current');li.textContent=labels[i];const state=document.createElement('span');state.className='visually-hidden';state.textContent=i===step?' Current step':i<step?' Completed':'';li.append(state);if(i===step)li.setAttribute('aria-current','step')});document.querySelector('#index').textContent=(step+1)+'/3';document.querySelector('#back').disabled=step===0;document.querySelector('#next').hidden=step===2;document.querySelector('#reset').hidden=step!==2;if(step===2){document.querySelector('#review-type').textContent=document.querySelector('[name=visit]:checked').value;document.querySelector('#review-note').textContent=document.querySelector('#note').value.trim()||'No note added'}document.querySelector('[data-step="'+step+'"] h2').focus()}document.querySelector('#next').onclick=()=>{if(step===0&&!document.querySelector('[name=visit]:checked')){document.querySelector('#error').hidden=false;document.querySelector('#guided').focus();return}document.querySelector('#error').hidden=true;step++;render()};document.querySelector('#back').onclick=()=>{step--;render()};document.querySelector('#reset').onclick=()=>{document.querySelectorAll('[name=visit]').forEach(x=>x.checked=false);document.querySelector('#note').value='';step=0;render()};</script></html>
```

代码参考

## 设计系统 .italia Agent 设置

### 实现起点

原生 CSS 和字体设置。Stepper 导航属于应用逻辑；下方提供完整可运行示例。“来源”中的完整可运行示例 ZIP 还提供准确的预览依赖项和完整文档。解压后，在该目录中运行 python3 -m http.server 8080，然后打开 http://localhost:8080/designers-italia.html。请勿通过 file:// 打开基于模块的示例。

```
npm install bootstrap-italia@2.18.3
# Copy dist/css/bootstrap-italia.min.css into public/vendor.
# Copy the needed src/fonts/Titillium_Web WOFF2 files and declare @font-face.
# CSS is sufficient for the Stepper presentation; application code owns navigation.
# For data-bs-toggle widgets, load dist/js/bootstrap-italia.bundle.min.js once.
```

### 适用于你项目的提示词

```
使用 Bootstrap Italia 2.18.3 原生 CSS 和 Titillium Web。按照文档构建 steppers/header/content/nav 结构，并设置当前状态、已确认状态和同步的移动端索引状态。在应用代码中处理验证与导航，点击“返回”时保留值，并根据真实后端响应为最终状态添加标签。请勿再混用一个 Bootstrap 运行时，也不要声称本地确认已提交。
```

## 设计系统 .italia 来源与范围

专注于 Bootstrap Italia 的独立 OpenDesign 示例。不代表任何公共机构，也不提供实际预约服务。

- 安装与资源 CSS、模块、打包文件、字体和运行时边界。

- Stepper 原生结构、状态、紧凑模式和实时区域。

- 排版 字体系列和响应式标题。

- 间距 实用工具比例与语法。

- 已发布的源代码 固定的发布版本尺寸与语义变量。

- 下载完整可运行示例 包含完整 HTML、本地 CSS/JavaScript 依赖、随附许可证以及确切启动说明的 ZIP 包。无需构建步骤。

## 设计系统 .italia 相关资源

### Designsystemet

通过完整的任务说明编辑器，探索 Designsystemet 实际的主题角色、尺寸模式和原生字段行为，并查看字符数反馈及保留的呈现状态。

### DSFR

了解法国国家设计系统在其机构适用范围内的具体字体排印、网格和手风琴组件 API。在清晰、中立的教学示例中，对比相互关联与彼此独立的展开行为。

### Europa Component Library

通过完整的原生手风琴任务说明，了解 Europa 的 EC 颜色、字体和间距用途，其中包括键盘操作、全部展开行为，以及无 JavaScript 时的易读回退方案。


- [实现参考](https://italia.github.io/bootstrap-italia/docs/componenti/steppers/)
- [来源](https://italia.github.io/bootstrap-italia/docs/organizzare-i-contenuti/tipografia/)
- [来源](https://github.com/italia/bootstrap-italia/blob/v2.18.3/dist/css/bootstrap-italia.min.css)
- [来源](https://italia.github.io/bootstrap-italia/docs/organizzare-gli-spazi/spaziature/)
- [来源](https://italia.github.io/bootstrap-italia/docs/componenti/steppers/)
- [阅读配套规范](https://italia.github.io/bootstrap-italia/docs/come-iniziare/introduzione/)
- [阅读配套规范](https://italia.github.io/bootstrap-italia/docs/organizzare-i-contenuti/tipografia/)
- [阅读配套规范](https://italia.github.io/bootstrap-italia/docs/organizzare-gli-spazi/spaziature/)
- [代码参考](https://italia.github.io/bootstrap-italia/docs/componenti/steppers/)
- [阅读配套规范](https://italia.github.io/bootstrap-italia/docs/componenti/steppers/)
- [安装与资源 CSS、模块、打包文件、字体和运行时边界。](https://italia.github.io/bootstrap-italia/docs/come-iniziare/introduzione/)
- [Stepper 原生结构、状态、紧凑模式和实时区域。](https://italia.github.io/bootstrap-italia/docs/componenti/steppers/)
- [排版 字体系列和响应式标题。](https://italia.github.io/bootstrap-italia/docs/organizzare-i-contenuti/tipografia/)
- [间距 实用工具比例与语法。](https://italia.github.io/bootstrap-italia/docs/organizzare-gli-spazi/spaziature/)
- [已发布的源代码 固定的发布版本尺寸与语义变量。](https://github.com/italia/bootstrap-italia/blob/v2.18.3/dist/css/bootstrap-italia.min.css)