跳到主要内容

文档

简介

了解 UIkit 的基本设置与整体概况。

首先,你需要下载 UIkit。其他安装包以及 CDN 链接请查看安装指南了解更多。

下载 UIkit


包内容

Zip 文件中包含编译好的 CSS 和 JavaScript 文件,这就是你开始使用所需的全部内容。之后,你可能会想自己安装并编译 UIkit,以及创建自己的 UIkit 主题。

文件夹 描述
/css 包含 UIkit CSS 文件以及从右到左(RTL)版本。
/js 包含 UIkit JavaScript 文件以及图标库 JavaScript 文件。

HTML 标记

将编译并压缩后的 CSS 和 JavaScript 添加到 HTML5 文档的 <head> 元素中,同时引入 UIkit 图标库。作为基础设置,这样就足够了。

<!DOCTYPE html>
<html>
    <head>
        <title>Title</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="css/uikit.min.css" />
        <script src="js/uikit.min.js"></script>
        <script src="js/uikit-icons.min.js"></script>
    </head>
    <body>
    </body>
</html>

在文档中引入 UIkit 之后,就可以查看可用的组件,并在页面的 <body> 元素内编写自己的标记。


编辑器中的 UIkit 自动补全

如果你有一个强大的代码编辑器,使用 UIkit 的体验会更好,例如 Sublime Text 或 Atom。为了更高效,我们建议你为你常用的 IDE 或代码编辑器安装其中一个自动补全插件。这能节省大量时间,因为你不必再查阅并手动输入所有 UIkit 类和标记。


浏览器支持

下表列出了 UIkit 经过测试的版本。"最新版"表示它在该浏览器的所有近期版本上都能正常工作。随着许多浏览器转向滚动发布策略,近几年要把浏览器支持固定到某个具体版本已变得有些棘手。简而言之:UIkit 几乎可以在任何现代浏览器上工作。

Firefox

最新版

Safari

最新版

Chrome

最新版

Edge

最新版

Opera

最新版