跳到主要内容

文档

简介

熟悉 UIkit 的基本设置和概述。

首先,你需要下载 UIkit。有关其他软件包和 CDN 链接,请访问安装指南以了解更多信息。

下载 UIkit


软件包内容

Zip 文件包含已编译的 CSS 和 JavaScript 文件,这是您入门所需的一切。稍后,您可能希望自己安装和编译 UIkit,并创建您自己的 UIkit 主题

文件夹 描述
/css 包含 UIkit CSS 和从右到左的版本。
/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 自动完成

如果您有一个可靠的代码编辑器,例如 Sublime TextAtom,则使用 UIkit 的效果最佳。为了更有效率,我们建议您为自己喜欢的 IDE 或代码编辑器安装一个自动完成插件。这可以节省大量时间,因为您不必查找和键入所有 UIkit 类和标记。


浏览器支持

下表列出了 UIkit 在其上进行测试的版本。“最新”表示它在所有最近版本的浏览器上都能正常工作。随着许多浏览器转向滚动发布策略,近年来将浏览器支持固定到特定版本变得有点棘手。长话短说:UIkit 可以在几乎所有现代浏览器上运行。

Firefox

最新

Safari

最新

Chrome

最新

Edge

最新

Opera

最新