入门 · 类名迁移
下载

入门

Migration 类名迁移

旧项目迁到 PivCSS 的类名对照速查。断点 576/768/992/1200 px，移动优先。

迁移原则
  • 删旧 CSS/JS 依赖，改引 pivcss.css（交互组件再引 pivcss.min.js）
  • 类前缀逐步改为 pvs-*；多列布局用原生 Grid，不是 flex 模拟列
  • 换肤改 --pvs-* 变量，见 主题定制

栅格（row/col 系）

常见 flex 列写法可对照为 pvs-grid + pvs-col-*。详例见 弹性栅格。

类名说明
containerpvs-container
row + col-*pvs-grid + pvs-col-* / pvs-col-lg-*
col-12 col-md-6 col-lg-4pvs-col-full md:pvs-col-6 lg:pvs-col-4
col-lg-8pvs-col-lg-8（<992px 满宽）
col-xl-4pvs-col-xl-4（<1200px 满宽）
g-3 / gap-3pvs-gap-3 或 grid 上 --pvs-gap

显示与响应式

类名说明
d-none d-md-flexpvs-hidden md:pvs-flex
d-block d-lg-nonepvs-block lg:pvs-hidden
flex-column flex-md-rowpvs-flex-col md:pvs-flex-row
justify-content-centerpvs-justify-center
align-items-centerpvs-items-center
text-centerpvs-text-center
w-100pvs-w-full

断点前缀对照：sm: / md: / lg: / xl: — 见 响应式。

间距与排版

类名说明
m-3 / p-3pvs-m-3 / pvs-p-3
mt-4 / mb-0pvs-mt-4 / pvs-mb-0
mx-autopvs-mx-auto
fw-boldpvs-font-bold
text-mutedpvs-text-muted
smallpvs-text-sm

常用组件

类名说明
btn btn-primarypvs-btn pvs-btn--primary
btn btn-outline-secondarypvs-btn pvs-btn--outline
cardpvs-card + pvs-card__body
alert alert-warningpvs-alert pvs-alert--warning
badge bg-primarypvs-badge
form-controlpvs-input
form-labelpvs-label
navbarpvs-navbar
modalpvs-modal + data-pvs-modal-open
dropdownpvs-dropdown + data-pvs-dropdown-toggle

完整 44 组件见侧栏或 组件总览；JS 钩子见 JavaScript。

中文后台常见类名（layui-*）

旧项目多为 jQuery + 模块加载；PivCSS 为零构建 + 可选原生 pivcss.min.js。下表左侧为历史类名，右侧为 PivCSS 等价写法。

类名说明
layui-btn layui-btn-normalpvs-btn pvs-btn--primary
layui-form / layui-inputpvs-form-group / pvs-input
layui-tablepvs-table + pvs-table--sortable（JS 在 PivUI）
layui-layerpvs-modal / pvs-offcanvas
layui-navpvs-navbar / pvs-sidenav
laydatepvs-datepicker + data-pvs-datepicker
uploadpvs-upload + data-pvs-upload-auto
treepvs-tree
flow 无限滚动data-pvs-infinite
主题色重编译--pvs-primary 运行时覆盖

轻量组件库（uk-*）

历史类前缀 uk- 可对照为 PivCSS pvs-；JS 钩子由 uk-* 改为 data-pvs-*。

类名说明
uk-button uk-button-primarypvs-btn pvs-btn--primary
uk-cardpvs-card
uk-gridpvs-grid + pvs-col-*
uk-navbarpvs-navbar
uk-modalpvs-modal + data-pvs-modal-open
uk-dropdownpvs-dropdown
uk-tooltippvs-tooltip（纯 CSS hover）
uk-offcanvaspvs-offcanvas
uk-tabpvs-tabs + data-pvs-tabs
uk-notificationpvs-toast

下一步

类名速查

类样式
旧 container row colPivCSS pvs-container pvs-grid pvs-col-*
旧 d-* justify-*PivCSS pvs-flex pvs-hidden md:pvs-*
旧 btn btn-*PivCSS pvs-btn pvs-btn--*
旧主题 Sass 变量PivCSS --pvs-* CSS 变量
旧 layui-btnPivCSS pvs-btn pvs-btn--primary
旧 layui-layerPivCSS pvs-modal + JS