介绍

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

首先，您需要下载UIkit。有关其他软件包和CDN的链接，安装指南 了解更多信息。(最后翻译成中文md版本到2021年11月5日，UIkit版本3.8.0)

下载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> 元素内部写入你需要的 HTML 标签吧。

代码编辑器中 UIkit 自动完成

如果你有一款可靠的代码编辑器, 例如 Sublime Text 或 Atom. 就可以很好地使用 UIkit，我们建议您为自己喜欢的IDE或代码编辑器安装一个自动完成插件。这将节省大量时间，因为您不必再去查找和手动输入所有的Uikit的class和HTML标签。

浏览器支持情况

下方列出的是经过我们测试过的支持UIkit的浏览器版本。“最新”意味着它在该浏览器的所有最新版本上都可以正常工作。随着许多浏览器采用滚动发布策略，将浏览器支持固定到特定版本在现在来说变得有些麻烦。简单的说来就是：UIkit几乎可以在当前的任何浏览器上正常运行。

Chrome

最新

Firefox

最新

Edge

最新

IE

11+

Safari

9.1+

Opera

最新

下一篇： Installation

introduction.md

# 介绍

<p class="uk-text-lead">熟悉UIkit的基本设置和概述。</p>

首先，您需要下载UIkit。有关其他软件包和CDN的链接，[安装指南](installation.md) 了解更多信息。(最后翻译成中文md版本到2021年11月5日，UIkit版本3.8.0)

<a class="uk-button uk-button-primary" href="https://getuikit.com/download">下载UIkit</a>

***

## Package contents-包含的内容

Zip文件内包含已经编译好的CSS和JavaScript文件，这是您入门所需的一切。以后，您可能想要自己[安装和编译UIkit](installation.md)或者[创建你自己的Uikit主题](less.md)。

| 文件夹 | 描述                                                    |
|:-------|:---------------------------------------------------------------|
| `/css` | 包含 UIkit 的 CSS 文件及其压缩版本。            |
| `/js`  | 包含UIkit JavaScript和图标库用到的JavaScript |

***

## HTML markup-HTML 示例

将经过编译和缩小的CSS和JavaScript添加到您HTML5文档的 `<head>` 标记中，包括UIkit图标库。像如下所示这样就可以了。

```html
<!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>` 元素内部写入你需要的 HTML 标签吧。

***

## UIkit autocomplete for your editor-代码编辑器中 UIkit 自动完成

如果你有一款可靠的代码编辑器, 例如 [Sublime Text](https://www.sublimetext.com/) 或 [Atom](https://atom.io/). 就可以很好地使用 UIkit，我们建议您为自己喜欢的IDE或代码编辑器安装一个自动完成插件。这将节省大量时间，因为您不必再去查找和手动输入所有的Uikit的class和HTML标签。

- [Sublime Text 3的自动完成插件](https://github.com/uikit/uikit-sublime)
- [Atom的自动完成插件](https://atom.io/packages/uikit-atom)
- [Visual Studio代码片段](https://marketplace.visualstudio.com/items?itemName=Keno.uikit-3-snippets)

***

## Browser support-浏览器支持情况

下方列出的是经过我们测试过的支持UIkit的浏览器版本。“最新”意味着它在该浏览器的所有最新版本上都可以正常工作。随着许多浏览器采用滚动发布策略，将浏览器支持固定到特定版本在现在来说变得有些麻烦。简单的说来就是：UIkit几乎可以在当前的任何浏览器上正常运行。

<div class="uk-child-width-1-3 uk-child-width-expand@s uk-text-center" uk-grid uk-height-match="> * > div">
    <div>
        <div class="uk-flex uk-flex-center uk-flex-middle">
            <img src="images/chrome.svg?sanitize=true" width="50" alt="Chrome">
        </div>
        <p>最新</p>
    </div>
    <div>
        <div class="uk-flex uk-flex-center uk-flex-middle">
            <img src="images/firefox.svg?sanitize=true" width="50" alt="Firefox">
        </div>
        <p>最新</p>
    </div>
    <div>
        <div class="uk-flex uk-flex-center uk-flex-middle">
            <img src="images/edge.svg?sanitize=true" width="50" alt="Edge">
        </div>
        <p>最新</p>
    </div>
    <div>
        <div class="uk-flex uk-flex-center uk-flex-middle">
            <img src="images/internet-explorer_9-11.svg?sanitize=true" width="50" alt="IE">
        </div>
        <p>11+</p>
    </div>
    <div>
        <div class="uk-flex uk-flex-center uk-flex-middle">
            <img src="images/safari-ios.svg?sanitize=true" width="50" alt="Safari">
        </div>
        <p>9.1+</p>
    </div>
    <div>
        <div class="uk-flex uk-flex-center uk-flex-middle">
            <img src="images/opera.svg?sanitize=true" width="50" alt="Opera">
        </div>
        <p>最新</p>
    </div>
</div>