1. 首页
  2. 卡片 Card
  3. card-form 表单卡

卡片 · card-form 表单卡

表单卡:1px 边框 + --radius-md 圆角 + 白底;head 粗体下边框、body 标准化字段区、foot 右对齐按钮行(justify-content:flex-end),表单页最常用容器。

三区结构

基础信息
<div class="card card-form"> <div class="card-head">基础信息</div> <div class="card-body"> <div class="row"> <div class="col-sm-12 col-md-6"> <label class="label label-text">账号</label> <input class="form-input" type="text"> </div> </div> </div> <div class="card-foot"> <button type="button" class="btn btn-index-hollow btn-small">取消</button> <button type="button" class="btn btn-index btn-small">保存</button> </div> </div>

foot 按钮行

提示: foot 为 flex 右对齐 + gap 0.5rem;表单内按钮不设 btn-small 的例外是「搜索/筛选」工具栏,普通保存表单建议 btn-small 保持高度一致。字段错误格式见 表格 与表单约定页。
KuoqiUI v2.00 · 离线静态文档 · 界面基于 KuoqiUI · 返回首页