开始使用 · UIkit 中文文档

# 开始使用熟悉 UIkit 的基本组织结构。注意文档中的示例代码不具备可操作性，请随时右键查看源代码，以参考实例真实代码。 UIkit 兼容 IE9 以上现代浏览器。在 IE8 及其以下版本中，所有JavaScript 都会失效。首先，你需要下载 UIkit。在 [GitHub](https://github.com/uikit/uikit) 上，你可以找到整个项目的所有源文件。 [下载 UIkit](../download/uikit-2.25.0.zip) [下载离线文档](../download/uikit-doc-2.25.0.zip) * * * ## 文件结构在你下载的 ZIP 压缩包中，你可以找到准备在你的项目中使用的所有的CSS、JavaScript和字体文件。UIKit 的核心框架`uikit.css` 或 `uikit.min.css`几乎没有任何样式，这样做是为了保持它的苗条。因此我们提供两个额外的风格样式，一个渐变样式和一个扁平化样式。每个风格样式提供单独的CSS文件以及压缩后的版本。 | 文件夹 | 描述 | | --- | --- | | `/css` | 包含 UIkit 所有的CSS文件和压缩后的版本。 | | `/fonts` | 包含 UIKit 中使用的字体文件。 | | `/js` | 包含 UIkit 所有的JavaScript文件和压缩后的版本。 | ``` /css  uikit.css uikit.min.css  uikit.gradient.css uikit.gradient.min.css  uikit.almost-flat.css uikit.almost-flat.min.css  /components /fonts  fontawesome-webfont.eot fontawesome-webfont.ttf fontawesome-webfont.woff FontAwesome.otf /js  uikit.js uikit.min.js  /components  /core ``` * * * ## HTML页面代码首先，确保你有一个可靠的代码编辑器，比如 [Sublime Text 2](http://www.sublimetext.com/2)。你需要在你的HTML5的文档头部添加编译后的UIKit CSS和JavaScript文件，最好是压缩后的版本。别忘了添加 [jQuery](http://jquery.com/)。就是这样！ ### Example ``` <!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 组件](core.html) 并从中获取相关介绍吧。 * * * ## UIkit on BootCDN 所有版本的 UIkit 都被托管在 BootCDN 上，就是 Bootstrap 中文网那个 BootCDN 。在这里可以找到 UIkit ： [www.bootcdn.cn](http://www.bootcdn.cn/uikit/) 。 ### Example ``` <link rel="stylesheet" href="//cdn.bootcss.com/uikit/2.25.0/css/uikit.css" /> <script src="//cdn.bootcss.com/uikit/2.25.0/js/uikit.js"></script> ``` * * * ## IDE 上的 UIkit 自动完成为了更高效地工作，我们建议你为你喜欢的 IDE 或代码编辑器安装一个自动完成插件。这样可以节省很多时间，因为你不必查找再输入所有UIkit的class 和 HTML 标记。 * [Sublime 上的自动完成](https://sublime.wbond.net/packages/UIkit%20autocomplete) - 通过 Sublime 的 Package Control 来安装。 * [PHPstorm 上的自动完成](https://plugins.jetbrains.com/plugin/7791?pr=) - 通过 PHPsorm 的插件设置进行安装。 * [Atom 上的自动完成](https://atom.io/packages/atom-uikit) - 在 Atom 的 package manager 里寻找它。