轻量级的前端UI开发框架 - UIkit

小咪咪 2021-11-27 01:52 446阅读 0赞

日期：2013-8-1  来源：[GBin1.com][]

![轻量级的前端UI开发框架 - UIkit][UI_ - UIkit]

UIkit是YOOtheme团队开发的开源的前端UI界面框架，可以帮助你快速的开发和创建前端UI界面。

基于下列开源项目：

*  LESS
 *  jQuery
 *  normalize.css
 *  FontAwesome

## 主要特性 ##

*  支持LESS
 *  模块化
 *  支持自定义主题
 *  支持响应式设计

## 如何使用？ ##

使用UIkit非常简单，下载后，请参考如下的框架代码：

<!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>

然后，请参考UI组件相关的文档：

[![1.jpg][]][1.jpg 1]

UI组件包含如下几个不同的UI组件类型：

*  缺省
 *  布局
 *  导航
 *  元素
 *  常用
 *  Javascript

针对Javascript的设计，你可以不使用任何JS代码，而使用典型的data-ui-\*方式来生成UI元素，如下：

<button data-uk-button>My Button</button>

当然，也可以使用jQuery API方式，如下：

$(".button").uk("button");

## 自定义主题 ##

你可以方便的使用自定义工具来定义或者扩展你需要的主题，如下：

[![2.jpg][]][2.jpg 1]

>  网站地址：[http://www.getuikit.com/index.html][http_www.getuikit.com_index.html]

via [ 极客标签][Link 1]

### 来源：[轻量级的前端UI开发框架 - UIkit][GBin1.com] ###

[GBin1.com]: http://www.gbin1.com/technology/css/20130801-ui-frameworks-uikit/
[UI_ - UIkit]: http://www.gbin1.com/technology/css/20130801-ui-frameworks-uikit/title.jpg
[1.jpg]: http://www.gbin1.com/technology/css/20130801-ui-frameworks-uikit/1.jpg
[1.jpg 1]: http://www.gbtags.com/gb/networks/uploadimg/c209be1d-f1f3-4d69-a370-8b8016ae9543.jpg
[2.jpg]: http://www.gbin1.com/technology/css/20130801-ui-frameworks-uikit/2.jpg
[2.jpg 1]: http://www.gbtags.com/gb/networks/uploadimg/03963174-e0cd-4a31-bbb6-660a6c43f024.jpg
[http_www.getuikit.com_index.html]: http://www.getuikit.com/index.html
[Link 1]: http://www.gbtags.com/gb/share/1603.htm