开始使用

熟悉 UIkit 的基本设置和结构。

首先，您需要下载 UIkit。您可以在 GitHub 上找到整个项目和所有源文件。

文件结构

在 ZIP 文件中，您将找到所有 CSS、JavaScript 和字体文件，可直接用于您的项目。UIkit 的核心框架几乎没有任何样式，以保持其精简。因此，我们提供了两个额外的发行版，分别带有渐变样式和几乎扁平化的样式。每种样式都作为一个单独的 CSS 文件以及一个缩小版本提供。

文件夹	描述
`/css`	包含所有 UIkit CSS 文件和缩小版本。
`/fonts`	包含 UIkit 中使用的字体。
`/js`	包含所有 UIkit JavaScript 文件和缩小版本。

/css
    <!-- UIkit with the basic style -->
    uikit.css
    uikit.min.css

    <!-- UIkit with Gradient style -->
    uikit.gradient.css
    uikit.gradient.min.css

    <!-- UIkit with Almost flat style -->
    uikit.almost-flat.css
    uikit.almost-flat.min.css

    <!-- Advanced components -->
    /components

/fonts
    <!-- FontAwesome webfont -->
    fontawesome-webfont.ttf
    fontawesome-webfont.woff
    fontawesome-webfont.woff2
    FontAwesome.otf

/js
    <!-- JavaScript and minified version -->
    uikit.js
    uikit.min.js

    <!-- Advanced components -->
    /components

    <!-- Core components -->
    /core

HTML 页面标记

首先，请确保您有一个可靠的代码编辑器，例如 Sublime Text。您需要将编译好的，最好是缩小版本的 UIkit CSS 和 JavaScript 添加到您的 HTML5 文档的头部。jQuery 也是必需的。就是这样！

示例

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <link rel="stylesheet" href="uikit.min.css" />
        <script src="jquery.js"></script>
        <script src="uikit.min.js"></script>
    </head>
    <body>
    </body>
</html>

一旦您完成在网页中实现 UIkit，请查看 UIkit 组件，并了解 UIkit 提供了什么。

cdnjs.com 上的 UIkit

所有版本的 UIkit 都通过 cdnjs.com 托管在 Cloudflare 内容分发网络上。

示例


    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.xx.x/css/uikit.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.xx.x/js/uikit.min.js"></script>

IDE 的 UIkit 自动完成

为了更高效地工作，我们建议您为自己喜欢的 IDE 或代码编辑器安装一个自动完成插件。这将节省大量时间，因为您不必查找和输入所有 UIkit 类和标记。

Sublime 的 UIkit 自动完成。通过 Sublime Package Control 安装。
PHPstorm 的 UIkit 自动完成。通过 PHPstorm 插件设置安装。
Atom 的 UIkit 支持。在 Atom 包管理器中查找 atom-uikit。