熟悉 UIkit 的基本设置和概述。
首先,你需要下载 UIkit。对于其他包和 CDN 链接,请前往 安装指南 了解更多信息。
Zip 文件包含编译后的 CSS 和 JavaScript 文件,这是您入门所需的一切。稍后,您可能想要 自己安装和编译 UIkit,以及 创建您自己的 UIkit 主题。
文件夹 | 描述 |
---|---|
/css |
包含 UIkit CSS 和一个从右到左的版本。 |
/js |
包含 UIkit JavaScript 和图标库 JavaScript。 |
将编译后的最小化 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>
元素中创建您自己的标记。
如果您有一个可靠的代码编辑器(例如 Sublime Text 或 Atom),使用 UIkit 效果最佳。为了提高效率,我们建议您安装一个适用于您喜欢的 IDE 或代码编辑器的自动补全插件。这可以节省大量时间,因为您不必查找和输入所有 UIkit 类和标记。
下表列出了 UIkit 测试的版本。“最新”表示它在所有最新版本的该浏览器上都能正常工作。随着许多浏览器转向滚动发布策略,近年来将浏览器支持固定到特定版本变得有些棘手。简而言之:UIkit 几乎可以在任何现代浏览器上运行。