入门

Quick start 快速开始

最小页面：容器 + 标题 + 主按钮；分栏见下方布局口诀。

布局选型口诀（开源通用）：

页面分栏 → pvs-grid + pvs-col-*（默认 12 轨）
顶栏 / 按钮组 / 对齐 → pvs-flex + pvs-justify-* pvs-items-*
表单 / 列表竖排 → pvs-stack；标签簇横排 → pvs-cluster

详表见布局 · 弹性栅格。

示例

Hello PivCSS

开源底子。

开始安装

<div class="pvs-container">
  <h2 class="pvs-heading pvs-heading-2">Hello PivCSS</h2>
  <p class="pvs-text-muted pvs-mt-4">开源底子。</p>
  <a class="pvs-btn pvs-btn--primary pvs-mt-4" href="/download/">开始安装</a>
</div>

三列卡片（Grid）

多列页面优先 Grid，不是纯 Flex。收窄窗口可见 pvs-col-lg-4 在 lg 以下满宽堆叠。

卡片 A

卡片 B

卡片 C

<div class="pvs-container pvs-py-4">
  <div class="pvs-grid" style="--pvs-grid-columns:12;--pvs-gap:0.75rem">
    <div class="pvs-col-lg-4 pvs-p-3 pvs-border pvs-bg-surface-muted">卡片 A</div>
    <div class="pvs-col-lg-4 pvs-p-3 pvs-border pvs-bg-surface-muted">卡片 B</div>
    <div class="pvs-col-lg-4 pvs-p-3 pvs-border pvs-bg-surface-muted">卡片 C</div>
  </div>
</div>