开始使用

发布于 2019-05-26 16:28:15 字数 2558 浏览 1154 评论 0 收藏 0

熟悉 UIkit 的基本组织结构。

注意文档中的示例代码不具备可操作性，请随时右键查看源代码，以参考实例真实代码。

UIkit 兼容 IE9 以上现代浏览器。在 IE8 及其以下版本中，所有JavaScript 都会失效。

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

下载 UIkit 下载离线文档

文件结构

在你下载的 ZIP 压缩包中，你可以找到准备在你的项目中使用的所有的CSS、JavaScript和字体文件。UIKit 的核心框架uikit.css 或 uikit.min.css几乎没有任何样式，这样做是为了保持它的苗条。因此我们提供两个额外的风格样式，一个渐变样式和一个扁平化样式。每个风格样式提供单独的CSS文件以及压缩后的版本。

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

/css
    <!-- UIKit的基本样式 -->
    uikit.css
    uikit.min.css
    <!-- UIKit的渐变样式 -->
    uikit.gradient.css
    uikit.gradient.min.css
    <!-- UIKit的扁平化样式 -->
    uikit.almost-flat.css
    uikit.almost-flat.min.css
    <!-- 高级组件 -->
    /components
/fonts
    <!-- FontAwesome网络字体 -->
    fontawesome-webfont.eot
    fontawesome-webfont.ttf
    fontawesome-webfont.woff
    FontAwesome.otf
/js
    <!-- JavaScript和压缩后的版本 -->
    uikit.js
    uikit.min.js
    <!-- 高级组件 -->
    /components
    <!-- 核心组件 -->
    /core

HTML页面代码

首先，确保你有一个可靠的代码编辑器，比如 Sublime Text 2。你需要在你的HTML5的文档头部添加编译后的UIKit CSS和JavaScript文件，最好是压缩后的版本。别忘了添加 jQuery。就是这样！

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 组件并从中获取相关介绍吧。

UIkit on BootCDN

所有版本的 UIkit 都被托管在 BootCDN 上，就是 Bootstrap 中文网那个 BootCDN 。在这里可以找到 UIkit ： www.bootcdn.cn 。

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>