组件

Translation note (2026-04-30). v2.0.0 adds RTL support and a refreshed 2026 framework comparison. The English source is the canonical reference while these translations catch up. See https://skeletonic.io/about/ · https://skeletonic.io/components/ · https://skeletonic.io/benchmarks/.

以下每个示例均使用被演示的样式表本身渲染。无预处理器。无 JavaScript。无额外依赖。将任意代码片段复制到空白 HTML 文件中即可运行。

输入控件

访客通过点击、轻触或聚焦来驱动页面的交互元素。

按钮

语义化、可主题化的操作触发器。实心和描边变体各提供六种品牌颜色。

<a href="#" class="button primary">Primary</a>
<a href="#" class="button secondary">Secondary</a>
<a href="#" class="button tertiary">Tertiary</a>

主要次要第三

描边变体：

<a href="#" class="button primary-outline">Outline</a>
<a href="#" class="button secondary-outline">Outline</a>

描边描边

无障碍提示。 每个 .button 变体均配备 :focus-visible 焦点环和 24×24 px 最小点击区域（WCAG 2.2 SC 2.5.8）。页内操作请使用 <button type="button">，仅在导航时使用 <a href>。

徽章

用于状态、计数或分类的紧凑标签。文字大小固定，徽章与周围文本对齐。

<span class="badge">Default</span>
<span class="badge primary">Primary</span>
<span class="badge success">Success</span>
<span class="badge warning">Warning</span>
<span class="badge danger">Danger</span>

默认主要成功警告危险

无障碍提示。 徽章默认为装饰性元素。当徽章承载唯一信号（如未读计数）时，请用视觉隐藏辅助类包裹：<span class="visually-hidden">3 条未读消息</span>。

反馈

告知访客某事已发生或即将发生的界面元素。

提示框

带有语义意图的状态消息。在 v2.0.0 中，每个变体均显式命名空间化为 .alert-{primary,secondary,info,success,warning,error}，因此变体类不会与页面其他地方的状态类冲突。

<div class="alert alert-primary" role="alert">
  <strong>Heads up.</strong> This is a primary alert.
</div>
<div class="alert alert-success" role="status">
  <strong>Saved.</strong> Your changes are persisted.
</div>
<div class="alert alert-warning" role="alert">
  <strong>Careful.</strong> This action affects shared state.
</div>
<div class="alert alert-error" role="alert">
  <strong>Error.</strong> Could not save the form.
</div>

请注意。 这是一条主要提示。

已保存。 你的更改已持久化。

请谨慎。 此操作影响共享状态。

错误。 无法保存表单。

无障碍提示。 对需要立即关注的消息（错误、警告）使用 role="alert"，对非紧急确认使用 role="status"。两者都会在消息出现时立即向辅助技术暴露。

容器

用于框定和分组相关内容的容器。

卡片

一个带边框和内边距的容器，用于承载单个内聚单元。配合 flex-N 栅格即可构建响应式卡片墙。

<section class="row">
  <article class="card flex-1">
    <div class="card-content">
      <h3 class="card-title">Lightweight</h3>
      <p>38.8 KB minified, 7.7 KB gzipped.</p>
    </div>
  </article>
  <article class="card flex-1">
    <div class="card-content">
      <h3 class="card-title">Accessible</h3>
      <p>WCAG 2.2 conformant out of the box.</p>
    </div>
  </article>
  <article class="card flex-1">
    <div class="card-content">
      <h3 class="card-title">Modular</h3>
      <p>Cascade-layered for easy overrides.</p>
    </div>
  </article>
</section>

轻量

38.8 KB 压缩后，7.7 KB gzip。

无障碍

开箱即符合 WCAG 2.2 标准。

模块化

级联层架构，轻松覆盖样式。

无障碍提示。 每张卡片应使用语义化地标元素包裹（<article>、<section>），内容以标题（<h3>）开头。屏幕阅读器用户可将卡片列表作为一级可导航区域遍历。

表单

用于收集用户数据的输入框、标签和分组。

表单字段

标签、文本输入框、文本域、字段集和图例——与设计系统其余部分保持一致的尺寸。

<form>
  <label for="name">Name</label>
  <input id="name" type="text" required>

  <label for="email">Email</label>
  <input id="email" type="email" required class="input-primary">

  <label for="msg">Message</label>
  <textarea id="msg" rows="4"></textarea>

  <button type="submit" class="button primary">Send</button>
</form>

姓名

邮箱

留言

无障碍提示。 每个输入框必须有程序化关联的 <label for="…">。使用 <fieldset> 和 <legend> 对相关控件分组。必填字段使用 required 属性（并在标签文本中添加可见的星号）。

布局

结构性基础元素——栅格、容器、页头——构成整个页面的框架。

栅格

基于 flexbox 的响应式 flex-N 栅格（1 → 12 列）。.row 父元素自动处理间距和换行。

<div class="row">
  <div class="flex-6">Half</div>
  <div class="flex-6">Half</div>
</div>
<div class="row">
  <div class="flex-4">Third</div>
  <div class="flex-4">Third</div>
  <div class="flex-4">Third</div>
</div>

二分之一

三分之一

无障碍提示。 视觉顺序应与 DOM 顺序一致。避免使用 flex-direction: row-reverse 或 order: 重排行——屏幕阅读器和键盘用户遵循源码顺序，而非渲染顺序。

一个完整的纯 CSS 页头，带响应式汉堡切换按钮。零 JavaScript。 将下方代码片段复制到已加载 skeletonic.min.css 的空白 HTML 页面中，菜单即可自动折叠、展开，并正确捕获焦点。

<style>
  .sk-header{position:relative;display:flex;align-items:center;gap:1rem;padding:.75rem 1rem;border:1px solid #e4e4e7;border-radius:.5rem;background:#fff;}
  .sk-header .sk-brand{font-weight:600;color:#0a0a0a;text-decoration:none;}
  .sk-header .sk-toggle{position:absolute;left:-9999px;}
  .sk-header .sk-burger{display:none;margin-left:auto;cursor:pointer;padding:.625rem .75rem;border:1px solid #e4e4e7;border-radius:.375rem;font-size:1.125rem;line-height:1;min-width:2.75rem;min-height:2.75rem;}
  .sk-header .sk-burger:focus-within,.sk-header .sk-toggle:focus-visible+.sk-burger{outline:2px solid hsl(210,100%,42%);outline-offset:2px;}
  .sk-header .sk-menu{list-style:none;display:flex;gap:.25rem;margin:0 0 0 auto;padding:0;}
  .sk-header .sk-menu a{display:inline-flex;align-items:center;min-height:2.75rem;padding:.5rem .875rem;border-radius:.375rem;color:#1a1a1a;text-decoration:none;}
  .sk-header .sk-menu a:hover{background:#f4f4f5;}
  @media (max-width:640px){
    .sk-header .sk-burger{display:inline-flex;align-items:center;justify-content:center;}
    .sk-header .sk-menu{display:none;flex-direction:column;gap:0;position:absolute;top:calc(100% + .25rem);left:0;right:0;background:#fff;border:1px solid #e4e4e7;border-radius:.5rem;padding:.375rem;box-shadow:0 4px 24px rgba(0,0,0,.08);z-index:10;}
    .sk-header .sk-menu a{padding:.75rem 1rem;border-bottom:1px solid #f4f4f5;}
    .sk-header .sk-menu li:last-child a{border-bottom:0;}
    .sk-header .sk-toggle:checked ~ .sk-menu{display:flex;}
  }
</style>
<header class="sk-header">
  <a class="sk-brand" href="#">Brand</a>
  <input class="sk-toggle" id="sk-nav-toggle" type="checkbox" aria-label="Toggle navigation">
  <label class="sk-burger" for="sk-nav-toggle" aria-hidden="true">☰</label>
  <ul class="sk-menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Docs</a></li>
    <li><a href="#">Components</a></li>
    <li><a href="#">About</a></li>
  </ul>
</header>

品牌

无障碍提示。 隐藏的复选框保留在 Tab 顺序中，键盘用户可通过 Space 或 Enter 打开菜单。<label> 设置了 aria-hidden，因为复选框本身才是无障碍名称来源。将窗口宽度缩小到 640 px 以下即可看到汉堡切换按钮接管导航。

查看完整无障碍说明 → · 浏览色板 →

Skeletonic Stylus

输入控件

按钮

徽章

反馈

提示框

容器

卡片

轻量

无障碍

模块化

表单

表单字段

布局

栅格

页头和汉堡导航