KuoqiUI - 精美的CSS组件库

KuoqiUI

KuoqiUI 文档 v1.06

功能丰富的 CSS 框架 · 卡片体系 · 栅格布局 · 组件库

快速开始

三步上手 KuoqiUI

引入样式

在页面 head 中引入 kuoqiui.min.css，支持自定义主题色。

使用组件

通过 class 组合使用卡片、按钮、表单、表格等组件。

栅格布局

使用 12 列响应式栅格系统，快速构建页面布局。

引入方式

<!-- 引入 KuoqiUI 样式 -->
<link rel="stylesheet" href="/assets/ui.1.06/kuoqiui.min.css">

<!-- 引入 KuoqiJS (可选，用于交互组件) -->
<script src="/assets/kq.1.14/kq.js"></script>
<script src="/assets/ui.1.06/ui.js"></script>

<!-- 自定义主题色 (CSS 变量) -->
<style>
:root {
    --color-index: #72b872;    /* 主色调 */
    --color-font: #ffffff;      /* 字体白色 */
    --color-sub-index: #5da65d; /* 次色调 */
    --color-border: #e6e1d8;    /* 边框色 */
}
</style>

卡片体系

30+ 种卡片样式，覆盖各种 UI 场景

基础卡片

<div class="card">
    <div class="card-head">标题</div>
    <div class="card-body">内容</div>
    <div class="card-foot">底部</div>
</div>

控制面板

<div class="card card-cpanel">
    <div class="card-head">面板标题</div>
    <div class="card-body">面板内容</div>
</div>

<!-- 简洁风格 -->
<div class="card card-cpanel cpanel-simple">
    ...
</div>

栅格布局

12 列响应式网格系统

<!-- 基础栅格 -->
<div class="container">
    <div class="row">
        <div class="col-4">1/3 宽度</div>
        <div class="col-8">2/3 宽度</div>
    </div>
</div>

<!-- 响应式 -->
<div class="row">
    <div class="col-3 col-sm-6 col-xs-12">
        桌面 1/4 | 平板 1/2 | 手机 100%
    </div>
</div>

<!-- 自动填充 -->
<div class="row-flex">
    <div class="col-auto">固定宽度</div>
    <div class="col-other">自适应填充</div>
    <div class="col-auto">固定宽度</div>
</div>

表单控件

输入框 & 按钮

<!-- 文本输入 -->
<input class="form-input" placeholder="请输入" />

<!-- 下拉选择 -->
<select class="form-select">
    <option>选项一</option>
    <option>选项二</option>
</select>

<!-- 文本域 -->
<textarea class="form-textarea"></textarea>

<!-- 按钮 -->
<button class="form-button">提交</button>
<button class="btn btn-index">主按钮</button>
<button class="btn btn-hollow">空心按钮</button>

表单布局

<div class="card form-item">
    <div class="card-head">
        <span class="label-text">用户名</span>
    </div>
    <div class="card-body">
        <input class="form-input" />
    </div>
</div>

<!-- 单选框组 -->
<div class="radio-group">
    <label class="radio-item active">
        <input type="radio" name="opt" checked /> 选项A
    </label>
    <label class="radio-item">
        <input type="radio" name="opt" /> 选项B
    </label>
</div>

表格样式

<!-- 基础表格 -->
<table class="table">
    <tr>
        <th>ID</th>
        <th>名称</th>
        <th>状态</th>
    </tr>
    <tr>
        <td>1</td>
        <td>测试数据</td>
        <td>启用</td>
    </tr>
</table>

<!-- 边框表格 -->
<table class="table table-border">...</table>

<!-- 切换样式 -->
<table class="table table-toggle">...</table>

<!-- 斑马纹 -->
<table class="table table-tr2n">...</table>

颜色体系

标签颜色

主色正文提示红色绿色黄色

<span class="label color-index">主色文字</span>
<span class="label label-text">正文文字</span>
<span class="label label-tips">提示文字</span>
<span class="label label-red">红色文字</span>

背景颜色

主色

成功

危险

<div class="fill-index">主色背景</div>
<div class="fill-success">成功背景</div>
<div class="fill-danger">危险背景</div>
<div class="fill-warning">警告背景</div>
<div class="fill-tips">提示背景</div>
<div class="fill-white">白色背景</div>

图标字体

80+ 图标，覆盖常用场景

<i class="icon icon-home"></i>
<i class="icon icon-user"></i>
<i class="icon icon-setting"></i>
<i class="icon icon-search"></i>
<i class="icon icon-edit"></i>
<i class="icon icon-delete"></i>
<i class="icon icon-add"></i>
<i class="icon icon-close"></i>
<i class="icon icon-right"></i>
<i class="icon icon-left"></i>

KuoqiPHP v1.05 | KuoqiJS v1.14 | KuoqiUI v1.06