增强版 CSS 框架使用文档
增强版 CSS 框架使用文档
目录
1. 框架概述 {#1-框架概述}
本框架是一个功能完整的 CSS 工具集，提供了全面的样式解决方案，包括：
- 灵活的 12 列网格系统，支持多断点响应式设计
- 完整的全局变量系统，便于主题定制
- 丰富的工具类，覆盖布局、间距、边框、文本等场景
- 统一的过渡与动画效果，提升用户体验
- 标准化的基础样式重置，确保跨浏览器一致性
框架设计遵循 "移动优先" 原则，通过清晰的命名规范和模块化结构，使开发者能够快速构建一致、美观的界面。
2. 快速开始
引入框架
将框架 CSS 文件引入到 HTML 文档的
<head>中：
\<link rel="stylesheet" href="path/to/enhanced-css-framework.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="path/to/enhanced-css-framework.css">
\</head>
\<body class="bg-background">
  \<div class="container">
  \<div class="row">
  \<div class="col-md-6">
  \<!-- 内容 -->
  \</div>
  \<div class="col-md-6">
  \<!-- 内容 -->
  \</div>
  \</div>
  \</div>
\</body>
\</html>3. 全局变量
框架使用 CSS 变量（Custom Properties）定义全局样式，所有变量都在:root选择器下声明，便于统一修改和主题定制。
3.1 颜色系统
主题色
\--color-primary: #007BFF; /\* 主色调 \*/
\--color-primary-light: #3395FF; /\* 主色浅变体 \*/
\--color-primary-dark: #0056D2; /\* 主色深变体 \*/
\--color-primary-transparent: rgba(0, 123, 255, 0.15); /\* 主色透明变体 \*/
\--color-primary-rgb: 0, 123, 255; /\* 主色RGB值（用于rgba计算） \*/
\--color-secondary: #444; /\* 辅助色 \*/
\--color-secondary-light: #666;
\--color-secondary-dark: #222;背景色
\--color-background: #ffffff; /\* 主要背景色 \*/
\--color-background-alt: #f9fafb; /\* 交替背景色 \*/
\--color-background-hover: #f3f4f6; /\* 悬停背景色 \*/
\--color-background-active: #e5e7eb; /\* 激活背景色 \*/
\--color-background-card: #ffffff; /\* 卡片背景色 \*/
\--color-background-modal: #ffffff; /\* 模态框背景色 \*/
\--color-background-overlay: rgba(0, 0, 0, 0.5); /\* 遮罩层背景色 \*/文本色
\--color-text: #000000; /\* 主要文本色 \*/
\--color-text-light: #374151; /\* 浅色文本 \*/
\--color-text-lighter: #6B7280; /\* 更浅文本 \*/
\--color-text-muted: #3d3d3d; /\* 次要文本 \*/
\--color-text-disabled: #9CA3AF; /\* 禁用文本色 \*/
\--color-text-inverse: #ffffff; /\* 深色背景上的文本 \*/功能色（状态色）
\--color-success: #52c41a; /\* 成功色 \*/
\--color-warning: #fa8c16; /\* 警告色 \*/
\--color-danger: #ff4d4f; /\* 危险/错误色 \*/
\--color-info: #4096ff; /\* 信息色 \*/中性色系
提供从--color-neutral-50（最浅）到--color-neutral-950（最深）的完整中性色阶，满足各种场景需求。
七色调全色系
包含红、橙、黄、绿、青、蓝、紫七个色系，每个色系都有从 50 到 950 的色阶变化，如：
/\* 红色系示例 \*/
\--color-red-50: #fff5f5;
\--color-red-100: #ffe3e3;
/\* ... 中间色阶省略 ... \*/
\--color-red-950: #5c0d12;3.2 字体系统
\--font-family-main: 'Helvetica Neue', Helvetica, 'PingFang SC', ...; /\* 主要字体 \*/
\--font-family-mono: 'SF Mono', Menlo, Monaco, ...; /\* 等宽字体（代码用） \*/
\--font-family-display: var(--font-family-main); /\* 标题字体 \*/
/\* 字体大小 \*/
\--font-size-xs: 10px;
\--font-size-sm: 12px;
\--font-size-md: 13px;
\--font-size-lg: 14px;
\--font-size-xl: 16px;
\--font-size-2xl: 18px;
\--font-size-3xl: 22px;
\--font-size-4xl: 26px;
\--font-size-5xl: 32px;
\--font-size-6xl: 40px;
/\* 字体权重 \*/
\--font-weight-light: 300;
\--font-weight-normal: 400;
\--font-weight-medium: 500;
\--font-weight-semibold: 600;
\--font-weight-bold: 700;
\--font-weight-extrabold: 800;
/\* 行高 \*/
\--line-height-xs: 1.2;
\--line-height-sm: 1.3;
\--line-height-md: 1.5;
\--line-height-lg: 1.6;
\--line-height-xl: 1.8;3.3 边框系统
/\* 边框宽度 \*/
\--border-width: 1px;
\--border-width-sm: 0.5px; /\* 细边框 \*/
\--border-width-lg: 2px; /\* 粗边框 \*/
/\* 边框圆角 \*/
\--border-radius: 4px;
\--border-radius-sm: 2px; /\* 小圆角 \*/
\--border-radius-lg: 6px; /\* 大圆角化 \*/
\--border-radius-xl: 8px;
\--border-radius-full: 9999px; /\* 全圆角（圆形） \*/
/\* 边框颜色 \*/
\--color-border: #ccc;
\--color-border-light: #e5e7eb; /\* 浅色边框 \*/
\--color-border-dark: #9CA3AF; /\* 深色边框 \*/
\--color-border-primary: var(--color-primary); /\* 主色边框 \*/3.4 间距系统
\--spacing-0: 0; /\* 零间距 \*/
\--spacing-xxs: 2px; /\* 极小间距 \*/
\--spacing-xs: 4px;
\--spacing-sm: 5px;
\--spacing-md: 10px;
\--spacing-lg: 20px;
\--spacing-xl: 25px;
\--spacing-2xl: 32px; /\* 更大间距 \*/
\--spacing-3xl: 40px;
\--spacing-4xl: 56px;
\--spacing-5xl: 72px;3.5 阴影系统
\--shadow-none: none;
\--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
\--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
\--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.06);
\--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
\--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
\--shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.05);
\--shadow-3xl: 0 30px 60px rgba(0, 0, 0, 0.2), 0 15px 15px rgba(0, 0, 0, 0.07);
\--shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.05);
\--shadow-top: 0 -2px 6px rgba(0, 0, 0, 0.08), 0 -1px 4px rgba(0, 0, 0, 0.06);
\--shadow-primary: 0 4px 12px rgba(var(--color-primary-rgb), 0.2);3.6 过渡与动画
/\* 过渡时长与曲线 \*/
\--transition-fast: 150ms ease;
\--transition-normal: 300ms ease;
\--transition-slow: 500ms ease;
\--transition-snail: 800ms ease;
\--transition-ultra: 1200ms ease;
/\* 预设过渡效果 \*/
\--transition-color: color var(--transition-normal);
\--transition-bg: background-color var(--transition-normal);
\--transition-border: border-color var(--transition-normal);
\--transition-transform: transform var(--transition-normal);
\--transition-shadow: box-shadow var(--transition-normal);
/\* 动画时长 \*/
\--animation-duration-xs: 150ms;
\--animation-duration-sm: 300ms;
\--animation-duration-md: 500ms;
\--animation-duration-lg: 800ms;
\--animation-duration-xl: 1000ms;4. 网格系统
框架采用 12 列网格布局，通过容器（container）、行（row）和列（col）的组合实现灵活的页面布局。
4.1 容器
容器用于包裹网格内容，提供居中对齐和内边距控制。
| 类名 | 说明 | 最大宽度 |
|---|---|---|
.container | 基础容器 | 1200px |
.container-sm | 小型容器 | 540px |
.container-md | 中型容器 | 720px |
.container-lg | 大型容器 | 960px |
.container-xl | 特大型容器 | 1140px |
.container-xxl | 超大型容器 | 1320px |
.container-fluid | 流体容器 | 100% 宽度 |
使用示例：
\<div class="container">
  \<!-- 网格内容 -->
\</div>
\<div class="container-fluid">
  \<!-- 占满全屏的网格内容 -->
\</div>4.2 行
行（Row）用于包裹列（Column），并提供负外边距抵消列的内边距，确保布局对齐。
| 类名 | 说明 |
|---|---|
.row | 基础行 |
.row-gutter-sm | 小间距行（8px） |
.row-gutter-lg | 大间距行（24px） |
使用示例：
\<div class="row">
  \<!-- 列内容 -->
\</div>
\<div class="row row-gutter-sm">
  \<!-- 小间距的列内容 -->
\</div>4.3 列
列是网格系统的核心，通过指定占比来控制宽度。框架采用 12 列系统，每列的宽度为100% / 12 * 列数。
基础列类：
| 类名 | 说明 | 宽度占比 |
|---|---|---|
.col-1 | 1 列宽 | 8.333% |
.col-2 | 2 列宽 | 16.666% |
| ... | ... | ... |
.col-12 | 12 列宽 | 100% |
.col | 自动分配宽度 | 平均分配 |
.col-auto | 自动宽度 | 由内容决定 |
使用示例：
\<div class="row">
  \<div class="col-4">占4列（33.333%）\</div>
  \<div class="col-8">占8列（66.666%）\</div>
\</div>
\<div class="row">
  \<div class="col">自动分配1\</div>
  \<div class="col">自动分配2\</div>
  \<div class="col">自动分配3\</div>
\</div>
\<div class="row">
  \<div class="col-auto">根据内容自动调整宽度\</div>
  \<div class="col">剩余空间自动填充\</div>
\</div>4.4 响应式断点
框架提供 6 个响应式断点，支持在不同屏幕尺寸下调整布局：
| 断点前缀 | 断点值 | 说明 |
|---|---|---|
xs | 0 | 超小屏幕（手机，默认） |
sm | 576px | 小屏幕（平板竖屏） |
md | 768px | 中等屏幕（平板横屏） |
lg | 992px | 大屏幕（笔记本 / 小桌面） |
xl | 1200px | 特大屏幕（桌面） |
xxl | 1400px | 超特大屏幕（大桌面） |
响应式列类命名规则：.col-[断点前缀]-[列数]
使用示例：
\<div class="row">
  \<!-- 在超小屏幕占12列（全屏），小屏幕及以上占6列（半屏） -->
  \<div class="col-12 col-sm-6">响应式列\</div>
  \<!-- 在超小屏幕占12列，小屏幕占6列，中等屏幕及以上占4列 -->
  \<div class="col-12 col-sm-6 col-md-4">多级响应式列\</div>
\</div>4.5 列偏移
通过偏移类可以控制列的左侧留白，实现列的右移效果。
偏移类命名规则：.offset-[断点前缀]-[偏移列数]
使用示例：
\<div class="row">
  \<!-- 基础偏移：向右偏移3列 -->
  \<div class="col-6 offset-3">居中的6列\</div>
\</div>
\<div class="row">
  \<!-- 响应式偏移：在中等屏幕及以上向右偏移2列 -->
  \<div class="col-12 col-md-8 offset-md-2">中等屏幕居中的8列\</div>
\</div>4.6 列排序
通过排序类可以改变列的显示顺序，而不改变 HTML 结构。
排序类：
| 类名 | 说明 |
|---|---|
.order-first | 排在最前面 |
.order-last | 排在最后面 |
.order-[n] | 排在第 n 位（n 为 0-12） |
.order-[断点前缀]-first | 在指定断点排在最前面 |
.order-[断点前缀]-last | 在指定断点排在最后面 |
.order-[断点前缀]-[n] | 在指定断点排在第 n 位 |
使用示例：
\<div class="row">
  \<!-- 默认顺序：1, 2, 3 -->
  \<!-- 排序后：3, 1, 2 -->
  \<div class="col-4 order-2">1\</div>
  \<div class="col-4 order-3">2\</div>
  \<div class="col-4 order-1">3\</div>
\</div>
\<div class="row">
  \<!-- 在小屏幕及以上交换顺序 -->
  \<div class="col-6 order-2 order-sm-1">先在移动端显示，后在桌面端显示\</div>
  \<div class="col-6 order-1 order-sm-2">后在移动端显示，先在桌面端显示\</div>
\</div>5. 工具类
框架提供了丰富的工具类，用于快速设置元素样式，避免重复编写 CSS。
5.1 显示控制
| 类名 | 说明 |
|---|---|
.hidden | 隐藏元素（display: none） |
.invisible | 不可见但保留空间（visibility: hidden） |
.visible | 可见（visibility: visible） |
.sr-only | 仅屏幕阅读器可见 |
.d-none | 不显示 |
.d-block | 块级显示 |
.d-flex | Flex 布局显示 |
.d-sm-none | 在 sm 断点及以上不显示 |
.d-sm-block | 在 sm 断点及以上块级显示 |
.d-sm-flex | 在 sm 断点及以上 Flex 显示 |
| ... | 类似的 md/lg/xl/xxl 前缀类 |
使用示例：
\<!-- 在移动端显示，在桌面端隐藏 -->
\<div class="d-block d-lg-none">仅移动端可见\</div>
\<!-- 在桌面端显示，在移动端隐藏 -->
\<div class="d-none d-lg-block">仅桌面端可见\</div>5.2 布局工具
Flex 布局工具
| 类名 | 说明 |
|---|---|
.flex | 启用 Flex 布局 |
.inline-flex | 启用内联 Flex 布局 |
.flex-row | 水平方向排列（默认） |
.flex-row-reverse | 水平反向排列 |
.flex-col | 垂直方向排列 |
.flex-col-reverse | 垂直反向排列 |
.flex-wrap | 允许换行 |
.flex-nowrap | 不允许换行 |
.justify-start | 主轴起点对齐 |
.justify-end | 主轴终点对齐 |
.justify-center | 主轴居中对齐 |
.justify-between | 主轴两端对齐 |
.justify-around | 主轴均匀分布 |
.items-start | 交叉轴起点对齐 |
.items-end | 交叉轴终点对齐 |
.items-center | 交叉轴居中对齐 |
.items-baseline | 交叉轴基线对齐 |
.items-stretch | 交叉轴拉伸对齐 |
.flex-1 | Flex 项目占满剩余空间 |
.flex-auto | Flex 项目自动调整 |
.flex-none | Flex 项目不伸缩 |
使用示例：
\<!-- 水平居中对齐的Flex容器 -->
\<div class="flex justify-center items-center">
  \<div>项目1\</div>
  \<div>项目2\</div>
\</div>
\<!-- 垂直排列的Flex容器 -->
\<div class="flex flex-col">
  \<div>顶部项目\</div>
  \<div class="flex-1">中间填充\</div>
  \<div>底部项目\</div>
\</div>Grid 布局工具
| 类名 | 说明 |
|---|---|
.grid | 启用 Grid 布局 |
.grid-cols-2 | 2 列网格 |
.grid-cols-3 | 3 列网格 |
.grid-cols-4 | 4 列网格 |
.grid-cols-auto | 自动列数 |
.gap-0 至 .gap-2xl | 网格间距 |
使用示例：
\<!-- 3列网格，间距为md -->
\<div class="grid grid-cols-3 gap-md">
  \<div>项目1\</div>
  \<div>项目2\</div>
  \<div>项目3\</div>
\</div>定位工具
| 类名 | 说明 |
|---|---|
.position-static | 静态定位 |
.position-relative | 相对定位 |
.position-absolute | 绝对定位 |
.position-fixed | 固定定位 |
.position-sticky | 粘性定位 |
.top-0 | 顶部对齐 |
.right-0 | 右侧对齐 |
.bottom-0 | 底部对齐 |
.left-0 | 左侧对齐 |
5.3 间距工具
间距工具类用于快速设置元素的外边距（margin）和内边距（padding），命名规则如下：
- 前缀：
m-（margin）或p-（padding） - 方向：无方向（全方向）、
t（上）、b（下）、l（左）、r（右）、x（左右）、y（上下） - 大小：
0、xxs、xs、sm、md、lg、xl、2xl
常用间距类：
| 类名 | 说明 |
|---|---|
.m-0 | 全方向外边距为 0 |
.p-md | 全方向内边距为 md（10px） |
.mt-sm | 上外边距为 sm（5px） |
.mb-lg | 下外边距为 lg（20px） |
.px-xl | 左右内边距为 xl（25px） |
.py-2xl | 上下内边距为 2xl（32px） |
使用示例：
\<div class="m-lg p-md">
  外边距为lg（20px），内边距为md（10px）
\</div>
\<div class="mt-sm mb-xl px-lg">
  上外边距sm（5px），下外边距xl（25px），左右内边距lg（20px）
\</div>5.4 边框工具
| 类名 | 说明 |
|---|---|
.border | 基础边框 |
.border-0 | 无边框 |
.border-sm | 细边框 |
.border-lg | 粗边框 |
.border-dashed | 虚线边框 |
.border-primary | 主色边框 |
.border-success | 成功色边框 |
.border-warning | 警告色边框 |
.border-danger | 危险色边框 |
.border-t | 上边框 |
.border-r | 右边框 |
.border-b | 下边框 |
.border-l | 左边框 |
.border-t-0 | 无上边框 |
| ... | 类似的 r-0/b-0/l-0 |
圆角工具：
| 类名 | 说明 |
|---|---|
.rounded | 基础圆角 |
.rounded-0 | 无圆角 |
.rounded-sm | 小圆角 |
.rounded-lg | 大圆角化 |
.rounded-xl | 超大圆角 |
.rounded-full | 全圆角（圆形） |
.rounded-t | 上圆角 |
.rounded-r | 右圆角 |
.rounded-b | 下圆角 |
.rounded-l | 左圆角 |
使用示例：
\<!-- 带边框和圆角的卡片 -->
\<div class="border rounded-lg p-md">
  带边框的卡片
\</div>
\<!-- 只有底部边框的分隔线 -->
\<div class="border-b pb-sm">
  下方带边框
\</div>
\<!-- 圆形图片 -->
\<img src="..." class="rounded-full" alt="圆形图片">5.5 文本工具
文本对齐
| 类名 | 说明 |
|---|---|
.text-left | 左对齐 |
.text-center | 居中对齐 |
.text-right | 右对齐 |
.text-justify | 两端对齐 |
文本颜色
| 类名 | 说明 |
|---|---|
.text-primary | 主色文本 |
.text-secondary | 辅助色文本 |
.text-text | 主要文本色 |
.text-text-light | 浅色文本 |
.text-muted | 次要文本 |
.text-disabled | 禁用文本色 |
.text-inverse | 反色文本（用于深色背景） |
.text-success | 成功色文本 |
.text-warning | 警告色文本 |
.text-danger | 危险色文本 |
.text-info | 信息色文本 |
文本大小
| 类名 | 说明 | 对应变量 |
|---|---|---|
.text-xs | 超小文本 | --font-size-xs (10px) |
.text-sm | 小文本 | --font-size-sm (12px) |
.text-md | 中等文本 | --font-size-md (13px) |
.text-lg | 大文本 | --font-size-lg (14px) |
.text-xl | 超大文本 | --font-size-xl (16px) |
.text-2xl 至 .text-5xl | 更大文本 | 对应变量逐步增大 |
字体权重
| 类名 | 说明 | 对应变量 |
|---|---|---|
.font-light | 轻量 | --font-weight-light (300) |
.font-normal | 正常 | --font-weight-normal (400) |
.font-medium | 中等 | --font-weight-medium (500) |
.font-semibold | 半粗体 | --font-weight-semibold (600) |
.font-bold | 粗体 | --font-weight-bold (700) |
.font-extrabold | 特粗体 | --font-weight-extrabold (800) |
其他文本工具
| 类名 | 说明 |
|---|---|
.text-underline | 下划线 |
.text-underline-hover | hover 时显示下划线 |
.text-no-underline | 无下划线 |
.text-uppercase | 大写 |
.text-lowercase | 小写 |
.text-capitalize | 首字母大写 |
使用示例：
\<h1 class="text-2xl font-bold text-primary mb-md">
  主标题
\</h1>
\<p class="text-md text-text-light">
  这是一段次要文本，字体大小为md，颜色较浅
\</p>
\<a href="#" class="text-primary text-underline-hover">
  悬停时下划线的链接
\</a>5.6 背景工具
背景工具类用于快速设置元素的背景色，命名规则为.bg-[颜色名称]。
常用背景类：
| 类名 | 说明 |
|---|---|
.bg-primary | 主色背景 |
.bg-primary-light | 主色浅色背景 |
.bg-background | 主要背景色 |
.bg-background-alt | 交替背景色 |
.bg-background-hover | 悬停背景色 |
.bg-success | 成功色背景 |
.bg-success-bg | 成功色浅色背景 |
.bg-warning | 警告色背景 |
.bg-warning-bg | 警告色浅色背景 |
.bg-danger | 危险色背景 |
.bg-danger-bg | 危险色浅色背景 |
.bg-neutral-[n] | 中性色背景（n 为 50-900） |
使用示例：
\<div class="bg-background-alt p-lg rounded">
  交替背景色的容器
\</div>
\<div class="bg-success-bg text-success p-md">
  成功状态提示
\</div>
\<div class="bg-neutral-100 p-sm">
  浅灰色背景
\</div>5.7 过渡与动画工具
过渡工具
| 类名 | 说明 |
|---|---|
.transition | 基础过渡效果 |
.transition-none | 无过渡 |
.transition-fast | 快速过渡（150ms） |
.transition-normal | 正常过渡（300ms） |
.transition-slow | 慢速过渡（500ms） |
.transition-color | 仅颜色过渡 |
.transition-bg | 仅背景色过渡 |
.transition-border | 仅边框过渡 |
.transition-transform | 仅变换过渡 |
.transition-shadow | 仅阴影过渡 |
动画工具
| 类名 | 说明 |
|---|---|
.animate-fade-in | 淡入动画 |
.animate-fade-out | 淡出动画 |
.animate-slide-up | 上滑动画 |
.animate-slide-down | 下滑动画 |
.animate-slide-left | 左滑动画 |
.animate-slide-right | 右滑动画 |
.animate-bounce | 弹跳动画 |
.animate-pulse | 脉冲动画 |
.animate-shake | 抖动动画 |
.animate-spin | 旋转动画 |
.animate-zoom-in | 放大动画 |
.animate-zoom-out | 缩小动画 |
使用示例：
\<!-- 带悬停效果的按钮 -->
\<button class="bg-primary text-inverse p-md rounded transition-all hover:bg-primary-dark">
  悬停变色按钮
\</button>
\<!-- 加载中动画 -->
\<div class="animate-spin">
  \<svg>...\</svg> \<!-- 旋转的图标 -->
\</div>
\<!-- 进入页面时淡入的元素 -->
\<div class="animate-fade-in">
  页面加载后淡入
\</div>5.8 其他工具
| 类名 | 说明 |
|---|---|
.shadow | 基础阴影 |
.shadow-sm | 小阴影 |
.shadow-lg | 大阴影 |
.shadow-xl | 超大阴影 |
.shadow-primary | 主色阴影 |
.shadow-hover | hover 时显示更大阴影 |
.w-100 | 宽度 100% |
.h-100 | 高度 100% |
.w-auto | 宽度自动 |
.h-auto | 高度自动 |
.max-w-100 | 最大宽度 100% |
.overflow-hidden | 溢出隐藏 |
.overflow-auto | 溢出自动滚动 |
.cursor-pointer | 鼠标指针为手型 |
.cursor-not-allowed | 鼠标指针为禁止 |
.opacity-0 | 透明度 0 |
.opacity-50 | 透明度 50% |
.opacity-100 | 透明度 100% |
.zoom-hover | hover 时轻微放大 |
使用示例：
\<!-- 带阴影的卡片 -->
\<div class="bg-background-card rounded-lg shadow p-lg">
  带阴影的卡片
\</div>
\<!-- 图片自适应 -->
\<img src="..." class="max-w-100 h-auto" alt="自适应图片">
\<!-- 悬停放大效果 -->
\<div class="zoom-hover bg-primary p-md rounded">
  悬停时放大
\</div>6. 示例
6.1 基础布局示例
\<div class="container">
  \<!-- 头部 -->
  \<header class="py-lg border-b">
  \<div class="flex justify-between items-center">
  \<h1 class="text-2xl font-bold text-primary">网站标题\</h1>
  \<nav>
  \<ul class="flex gap-md">
  \<li>\<a href="#" class="text-text hover:text-primary transition-color">首页\</a>\</li>
  \<li>\<a href="#" class="text-text hover:text-primary transition-color">产品\</a>\</li>
  \<li>\<a href="#" class="text-text hover:text-primary transition-color">关于\</a>\</li>
  \<li>\<a href="#" class="text-text hover:text-primary transition-color">联系\</a>\</li>
  \</ul>
  \</nav>
  \</div>
  \</header>
  \<!-- 主要内容区 -->
  \<main class="py-xl">
  \<div class="row">
  \<!-- 侧边栏 - 占3列 -->
  \<aside class="col-md-3 mb-lg md:mb-0">
  \<div class="bg-background-alt p-lg rounded-lg">
  \<h2 class="text-xl font-semibold mb-md">侧边栏\</h2>
  \<ul class="space-y-sm">
  \<li>\<a href="#" class="block py-sm hover:bg-background-hover px-sm rounded transition-bg">菜单项1\</a>\</li>
  \<li>\<a href="#" class="block py-sm hover:bg-background-hover px-sm rounded transition-bg">菜单项2\</a>\</li>
  \<li>\<a href="#" class="block py-sm hover:bg-background-hover px-sm rounded transition-bg">菜单项3\</a>\</li>
  \</ul>
  \</div>
  \</aside>
  \<!-- 内容区 - 占9列 -->
  \<div class="col-md-9">
  \<h2 class="text-2xl font-bold mb-lg">主要内容\</h2>
   
  \<!-- 内容卡片 -->
  \<div class="bg-background-card border rounded-lg p-lg mb-lg shadow-hover">
  \<h3 class="text-xl font-semibold mb-md">文章标题\</h3>
  \<p class="text-text-light mb-md">
  这是一段文章内容，使用了text-text-light类设置为浅色文本，提高阅读舒适度。
  \</p>
  \<a href="#" class="text-primary text-underline-hover">阅读更多\</a>
  \</div>
   
  \<!-- 图片展示 -->
  \<div class="grid grid-cols-2 md:grid-cols-3 gap-md">
  \<img src="..." alt="图片1" class="rounded w-100 h-auto">
  \<img src="..." alt="图片2" class="rounded w-100 h-auto">
  \<img src="..." alt="图片3" class="rounded w-100 h-auto">
  \</div>
  \</div>
  \</div>
  \</main>
  \<!-- 页脚 -->
  \<footer class="py-lg bg-neutral-100 mt-xl">
  \<div class="text-center text-text-lighter">
  \<p>\© 2023 网站名称. 保留所有权利.\</p>
  \</div>
  \</footer>
\</div>6.2 响应式布局示例
\<div class="container-fluid">
  \<div class="row">
  \<!-- 在移动端占12列，平板占6列，桌面占4列 -->
  \<div class="col-12 col-sm-6 col-lg-4 mb-lg">
  \<div class="border rounded-lg p-md h-100">
  \<h3 class="text-lg font-semibold mb-sm">卡片1\</h3>
  \<p>在不同屏幕尺寸下自动调整宽度\</p>
  \</div>
  \</div>
   
  \<div class="col-12 col-sm-6 col-lg-4 mb-lg">
  \<div class="border rounded-lg p-md h-100">
  \<h3 class="text-lg font-semibold mb-sm">卡片2\</h3>
  \<p>在不同屏幕尺寸下自动调整宽度\</p>
  \</div>
  \</div>
   
  \<div class="col-12 col-sm-6 col-lg-4 mb-lg">
  \<div class="border rounded-lg p-md h-100">
  \<h3 class="text-lg font-semibold mb-sm">卡片3\</h3>
  \<p>在不同屏幕尺寸下自动调整宽度\</p>
  \</div>
  \</div>
  \</div>
  
  \<!-- 移动端和桌面端布局不同的内容 -->
  \<div class="row mt-xl">
  \<!-- 在移动端先显示，桌面端后显示 -->
  \<div class="col-12 col-lg-8 order-1 order-lg-2">
  \<div class="bg-background-alt p-lg rounded-lg">
  \<h3 class="text-xl font-semibold mb-md">主要内容\</h3>
  \<p>在移动端优先显示，在桌面端显示在右侧\</p>
  \</div>
  \</div>
   
  \<!-- 在移动端后显示，桌面端先显示 -->
  \<div class="col-12 col-lg-4 order-2 order-lg-1 mb-lg lg:mb-0">
  \<div class="bg-primary-transparent p-lg rounded-lg">
  \<h3 class="text-xl font-semibold mb-md">侧边内容\</h3>
  \<p>在移动端后显示，在桌面端显示在左侧\</p>
  \</div>
  \</div>
  \</div>
\</div>6.3 组件样式示例
按钮组件
\<!-- 不同样式的按钮 -->
\<button class="bg-primary text-inverse px-lg py-sm rounded transition-all hover:bg-primary-dark mr-md">
  主按钮
\</button>
\<button class="bg-background border border-primary text-primary px-lg py-sm rounded transition-all hover:bg-primary-transparent mr-md">
  次要按钮
\</button>
\<button class="bg-success text-inverse px-lg py-sm rounded transition-all hover:bg-success-dark mr-md">
  成功按钮
\</button>
\<button class="bg-danger text-inverse px-lg py-sm rounded transition-all hover:bg-danger-dark">
  危险按钮
\</button>表单组件
\<form class="bg-background-card p-lg rounded-lg border">
  \<div class="mb-md">
  \<label for="name" class="block text-text mb-sm">姓名\</label>
  \<input type="text" id="name" class="w-100 px-md py-sm border rounded transition-border focus:border-primary focus:outline-none">
  \</div>
  
  \<div class="mb-md">
  \<label for="email" class="block text-text mb-sm">邮箱\</label>
  \<input type="email" id="email" class="w-100 px-md py-sm border rounded transition-border focus:border-primary focus:outline-none">
  \</div>
  
  \<div class="mb-md">
  \<label for="message" class="block text-text mb-sm">留言\</label>
  \<textarea id="message" rows="4" class="w-100 px-md py-sm border rounded transition-border focus:border-primary focus:outline-none">\</textarea>
  \</div>
  
  \<div class="flex justify-end">
  \<button type="submit" class="bg-primary text-inverse px-lg py-sm rounded transition-all hover:bg-primary-dark">
  提交
  \</button>
  \</div>
\</form>提示框组件
\<!-- 不同状态的提示框 -->
\<div class="bg-success-bg border border-success p-md rounded-lg mb-md">
  \<div class="flex items-start">
  \<div class="text-success mr-md">✓\</div>
  \<div>
  \<h4 class="font-semibold text-success">成功提示\</h4>
  \<p class="text-text-light">操作成功完成的提示信息\</p>
  \</div>
  \</div>
\</div>
\<div class="bg-warning-bg border border-warning p-md rounded-lg mb-md">
  \<div class="flex items-start">
  \<div class="text-warning mr-md">!\</div>
  \<div>
  \<h4 class="font-semibold text-warning">警告提示\</h4>
  \<p class="text-text-light">需要注意的警告信息\</p>
  \</div>
  \</div>
\</div>
\<div class="bg-danger-bg border border-danger p-md rounded-lg">
  \<div class="flex items-start">
  \<div class="text-danger mr-md">×\</div>
  \<div>
  \<h4 class="font-semibold text-danger">错误提示\</h4>
  \<p class="text-text-light">操作失败的错误信息\</p>
  \</div>
  \</div>
\</div>以上就是增强版 CSS 框架的详细使用文档。通过灵活运用框架提供的网格系统和工具类，可以快速构建出美观、一致且响应式的网页界面。如需进一步定制，可以通过修改全局变量来调整主题样式，无需修改工具类代码。
（注：文档部分内容可能由 AI 生成）
标签：无