文档 - VisitorUI

快速开始

VisitorUI 是一个现代化、响应式的 CSS UI 框架，帮助开发者快速构建美观的 Web 应用程序。

安装

通过以下链接下载 VisitorUI：

下载 VisitorUI

引入 CSS

在 HTML 文件中引入 VisitorUI CSS：

基础模板

使用以下模板开始您的项目：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的项目</title>
    <link rel="stylesheet" href="visitor-ui.css">
</head>
<body>
    <button class="visitor-btn visitor-btn-primary">主要按钮</button>
</body>
</html>
                

CSS 变量

VisitorUI 使用 CSS 变量来定义主题，您可以轻松自定义这些变量。

主要变量

:root {
  /* 主要颜色变量 */
  --visitor-primary: #4361ee;
  --visitor-primary-light: #4895ef;
  --visitor-primary-dark: #3a0ca3;
  --visitor-secondary: #f72585;
  --visitor-success: #4cc9f0;
  --visitor-warning: #f8961e;
  --visitor-danger: #e63946;
  
  /* 边框和阴影 */
  --visitor-border-radius: 12px;
  --visitor-border-radius-sm: 8px;
  --visitor-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  
  /* 过渡效果 */
  --visitor-transition: all 0.3s ease;
}
                

自定义变量

在引入 VisitorUI CSS 文件后，您可以覆盖这些变量：

<style>
:root {
  --visitor-primary: #ff6b6b;
  --visitor-secondary: #4ecdc4;
  --visitor-border-radius: 16px;
}
</style>
                

组件参考

VisitorUI 提供丰富的 UI 组件，每个组件都有特定的类名。

按钮类名

类名	描述	示例
`.visitor-btn`	按钮基础类
`.visitor-btn-primary`	主要按钮
`.visitor-btn-secondary`	次要按钮
`.visitor-btn-outline`	轮廓按钮
`.visitor-btn-large`	大按钮
`.visitor-btn-block`	块级按钮

表单类名

类名	描述
`.visitor-form-group`	表单组容器
`.visitor-form-label`	表单标签
`.visitor-form-control`	表单控件
`.visitor-form-check`	复选框/单选框容器
`.visitor-input-group`	输入组容器

卡片类名

类名	描述
`.visitor-card`	卡片容器
`.visitor-card-header`	卡片头部
`.visitor-card-body`	卡片主体
`.visitor-card-footer`	卡片底部
`.visitor-card-title`	卡片标题

工具类

VisitorUI 提供了一系列实用的工具类。

间距类

.visitor-mt-1 { margin-top: 10px; }
.visitor-mt-2 { margin-top: 20px; }
.visitor-mt-3 { margin-top: 30px; }
.visitor-mt-4 { margin-top: 40px; }
.visitor-mt-5 { margin-top: 50px; }

.visitor-mb-1 { margin-bottom: 10px; }
.visitor-mb-2 { margin-bottom: 20px; }
.visitor-mb-3 { margin-bottom: 30px; }
.visitor-mb-4 { margin-bottom: 40px; }
.visitor-mb-5 { margin-bottom: 50px; }

.visitor-p-1 { padding: 10px; }
.visitor-p-2 { padding: 20px; }
.visitor-p-3 { padding: 30px; }
.visitor-p-4 { padding: 40px; }
.visitor-p-5 { padding: 50px; }
                

文本类

.visitor-text-center { text-align: center; }
.visitor-text-left { text-align: left; }
.visitor-text-right { text-align: right; }

.visitor-text-primary { color: var(--visitor-primary); }
.visitor-text-secondary { color: var(--visitor-secondary); }
.visitor-text-success { color: var(--visitor-success); }
.visitor-text-danger { color: var(--visitor-danger); }
                

自定义

VisitorUI 提供多种自定义方式。

Sass 版本（即将推出）

未来版本将提供 Sass 版本，支持更灵活的自定义。

扩展组件

您可以通过添加自定义 CSS 来扩展组件：

/* 自定义按钮样式 */
.custom-btn {
  background: linear-gradient(45deg, #4361ee, #3a0ca3);
  border: none;
}

/* 自定义卡片样式 */
.custom-card {
  border: 2px solid var(--visitor-primary);
  box-shadow: 0 15px 35px rgba(67, 97, 238, 0.2);
}
                

浏览器支持

VisitorUI 支持所有现代浏览器：

Chrome 60+
Firefox 55+
Safari 12+
Edge 79+
Opera 47+

VisitorUI 使用现代 CSS 特性，对于旧版浏览器，建议使用相应的 polyfill。