创意工作者的优质导航
UIkit
732

UIkit是一个轻量级、模块化的前端框架，提供90+组件（如Accordion、Slideshow、Sticky、Parallax），通过Less/Sass源码支持深度主题定制，适合需要快速搭建且希望保留样式控制权的Web项目。

收费 核心框架免费，UIkit Pro为付费扩展包
平台 Web
中文 文档为英文，无官方中文版
用途 快速构建Web界面

核心特性与组件体系

框架以模块化设计为核心，每个组件可独立引入。官网列出90+组件，覆盖布局（Grid、Flex、Container）、导航（Navbar、Dropdown、Off-canvas）、交互（Slider、Slideshow、Parallax、Sortable）及工具（SVG、Spinner、Sticky）。组件均提供HTML类名驱动，无需JavaScript配置。

  • 轻量级: 压缩后CSS约40KB，JS约30KB（含图标库）
  • 图标库: 内置Icon Library，通过`<span uk-icon="icon: heart"></span>`调用
  • RTL支持: 提供独立CSS文件（uikit.rtl.css），适配从右至左语言
  • Accessibility: 组件内置ARIA属性，文档有专门的无障碍指南章节

主题定制与构建方式

UIkit样式基于Less编写，同时官方提供Sass版本（位于/src/scss）。用户可通过导入变量文件（variables-theme.scss）和混入文件（mixins-theme.scss）覆盖默认值，无需手动覆写CSS。支持两种工作流：在项目中直接编译Less/Sass源码，或使用UIkit自带的构建脚本（需Node.js环境）。

  • Less主题: 核心文件为uikit.theme.less，可导入后添加自定义变量和混入
  • Sass版本: 使用SCSS语法，导入顺序为变量混入核心（uikit-theme.scss）
  • Webpack集成: 文档提供专门指南，支持通过webpack打包源码
  • CDN使用: 通过jsDelivr加载预编译版本，支持SRI哈希校验

安装与项目集成

提供三种安装方式：直接下载ZIP包（含编译后的CSS/JS）、通过pnpm安装（推荐用于典型Web项目，命令`pnpm add uikit`）、克隆GitHub仓库（`git clone git@github.com:uikit/uikit.git`）以获取完整源码和构建脚本。ZIP包内/css文件夹包含标准版和RTL版CSS，/js文件夹包含核心JS和图标库JS。

  • HTML模板: 需在<head>中引入uikit.min.css，在<body>前引入uikit.min.js和uikit-icons.min.js
  • 编辑器插件: 推荐安装Sublime Text或Atom的UIkit类名自动补全插件
  • 测试文件: GitHub仓库的/tests目录包含所有组件的HTML测试示例

常见问题

Q1：UIkit的Pro版本与免费版有什么区别？

A1：Pro是付费扩展包（官网有独立页面），提供额外组件和高级功能，但具体组件列表和价格未在免费文档中公开。免费版已包含90+组件，足以构建多数界面。

Q2：UIkit支持哪些构建工具？

A2：官方文档提供Less、Sass、Webpack三种构建指南。Less是原生样式语言，Sass版本位于/src/scss目录（使用SCSS语法），Webpack集成有专门章节说明如何配置loader。

Q3：如何在不编译源码的情况下使用UIkit？

A3：直接下载最新ZIP包（含预编译的uikit.min.css和uikit.min.js），或通过jsDelivr CDN加载：`<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.25.20/dist/css/uikit.min.css">`，同时引入JS和图标库JS即可。

更多同类工具与网站,可在其他框架分类继续挑选。

信息核实于 2026年7月,具体以官网为准。

评论

暂无评论

发表评论

  • 您的邮箱地址不会被公开。
评论