三、CSS 架构与命名规范
3.1 命名规范
为避免与其他 CSS 框架冲突，所有 UIkit 类都使用 uk- 前缀进行命名。组件分为组件本身、子对象和修饰符，它们的类名始终会拾取组件名称。
命名规则：
CSS 架构的三层结构：
组件（Component）：将网站中重复出现的部分抽象为基于类的模块，如按钮、卡片等
子对象（Child Object）：放置在组件内以增强其功能，如卡片中的头部、身体、页脚
https://amwtm.cn/
修饰符（Modifier）：改变组件及其子对象的样式，如按钮颜色和大小
3.2 Less 变量系统
UIkit 使用 Less 编写，提供了丰富的变量系统。所有变量都定义在 variables.less 文件中，开发者可以通过覆盖这些变量来定制主题。
// 自定义主题变量
// 品牌色
@global-primary-background: #4c6ef5;
@global-success-background: #10b981;
@global-warning-background: #f59e0b;
@global-danger-background: #ef4444;
// 字体
@global-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
@global-font-size: 16px;
@global-line-height: 1.5;
// 圆角
@global-border-radius: 8px;
// 间距
@global-margin: 20px;
@global-small-margin: 10px;
@global-medium-margin: 40px;
@global-large-margin: 60px;
3.3 重写主题
// custom-theme.less
// 1. 覆盖 UIkit 变量
@global-primary-background: #7c3aed;
@global-border-radius: 12px;
// 2. 导入 UIkit 核心样式
@import "uikit/src/less/uikit.theme.less";
// 3. 添加自定义样式
.custom-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
四、栅格系统
UIkit 的栅格系统遵循移动优先方法，最多可容纳 10 个栅格列。它在每个栅格内使用具有预定义类的单元，这些类定义了列宽。
4.1 基础栅格
要创建栅格容器，请将 uk-grid 类添加到父元素。将 uk-width-* 类之一添加到子元素以确定单元格的大小。
<!-- 基础栅格示例 -->
<div class="uk-grid">
<div class="uk-width-1-2">占一半宽度</div>
<div class="uk-width-1-2">占一半宽度</div>
</div>
<div class="uk-grid">
<div class="uk-width-1-3">占 1/3</div>
<div class="uk-width-1-3">占 1/3</div>
<div class="uk-width-1-3">占 1/3</div>
</div>
<div class="uk-grid">
<div class="uk-width-2-5">占 2/5</div>
<div class="uk-width-3-5">占 3/5</div>
</div>
4.2 栅格列宽类
类 描述
uk-width-1-1 填充可用宽度的 100%
uk-width-1-2 将栅格分成两半
uk-width-1-3 到 uk-width-2-3 将栅格分成三份
uk-width-1-4 到 uk-width-3-4 将栅格分成四份
uk-width-1-5 到 uk-width-4-5 将栅格分成五份
uk-width-1-6 到 uk-width-5-6 将栅格分成六份
uk-width-1-10 到 uk-width-9-10 将栅格分成十份
4.3 响应式宽度
UIkit 提供响应式宽度类，前缀决定了断点：
<!-- 响应式栅格：手机全宽，平板半宽，桌面 1/3 -->
<div class="uk-grid">
<div class="uk-width-1-1 uk-width-medium-1-2 uk-width-large-1-3">
响应式内容
</div>
<div class="uk-width-1-1 uk-width-medium-1-2 uk-width-large-1-3">
响应式内容
</div>
<div class="uk-width-1-1 uk-width-medium-1-2 uk-width-large-1-3">
响应式内容
</div>
</div>
4.4 栅格间距
栅格会自动在列之间创建水平间距，在两个连续的栅格之间创建垂直间距。
<!-- 默认间距 -->
<div class="uk-grid">
<div class="uk-width-1-3">...<\/div>
<div class="uk-width-1-3">...<\/div>
</div>
<!-- 大间距 -->
<div class="uk-grid uk-grid-large">
<div class="uk-width-1-3">...<\/div>
<div class="uk-width-1-3">...<\/div>
</div>
<!-- 中等间距 -->
<div class="uk-grid uk-grid-medium">
<div class="uk-width-1-3">...<\/div>
<div class="uk-width-1-3">...<\/div>
</div>
<!-- 小间距 -->
<div class="uk-grid uk-grid-small">
<div class="uk-width-1-3">...<\/div>
<div class="uk-width-1-3">...<\/div>
</div>
<!-- 折叠间距（无间距） -->
<div class="uk-grid uk-grid-collapse">
<div class="uk-width-1-3">...<\/div>
<div class="uk-width-1-3">...<\/div>
</div>
4.5 嵌套栅格
<div class="uk-grid">
<div class="uk-width-1-2">
<!-- 外层列内容 -->
</div>
<div class="uk-width-1-2">
<!-- 嵌套栅格 -->
<div class="uk-grid">
<div class="uk-width-1-2">嵌套列1<\/div>
<div class="uk-width-1-2">嵌套列2<\/div>
</div>
</div>
</div>
4.6 源排序（Push/Pull）
可以更改列的显示顺序，以在源代码中保留特定的列顺序。添加 uk-push- 类向右移动列，添加 uk-pull- 类向左移动列。
<div class="uk-grid">
<!-- 右边的列在源代码中排在前面 -->
<div class="uk-width-medium-1-2 uk-push-1-2">右侧内容<\/div>
<div class="uk-width-medium-1-2 uk-pull-1-2">左侧内容<\/div>
</div>
