您的位置：首页 > 产品设计 > UI/UE

前端开发框架1--uikit

2014-03-25 19:54 441 查看


中文项目地址：http://www.getuikit.net/docs/documentation_get-started.html

学习,Demo下载： http://files.cnblogs.com/zhougaojun/uikitdemo.zip

index.html

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="uikit.min.css" />
<link rel="stylesheet" type="text/css" href="uikit.almost-flat.min.css">
<script src="jquery-1.7.2.min.js"></script>
<script src="uikit.min.js"></script>
<style type="text/css">
body{
margin: 10px 10px;
}
</style>
</head>
<body>
<a class="uk-button" href="">Button</a>
<button class="uk-button uk-button-primary" type="button">Button2</button>
<button class="uk-button uk-button-success" type="button">Button2</button>
<hr>
<table class="uk-table">
<caption>Desc</caption>
<thead>
<tr>
<th>item1</th>
<th>item2</th>
<th>item3</th>
</tr>
</thead>
<tbody>
<tr>
<td>item1</td>
<td>item2</td>
<td>item3</td>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
<td>item3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>item1</td>
<td>item2</td>
<td>item3</td>
</tr>
</tfoot>
</table>
<div class="uk-alert">Message</div>
<hr>
<ul class="uk-tab">
<li><a href="">aaa</a></li>

<!-- This is the container enabling the JavaScript -->
<li data-uk-dropdown="{mode:'click'}">

<!-- This is the menu item toggling the dropdown -->
<a href="">bbb</a>

<!-- This is the dropdown -->
<div class="uk-dropdown uk-dropdown-small">
<ul class="uk-nav uk-nav-dropdown">
<li><a href="">ccc</a></li>
</ul>
</div>
</li>
</ul>
<br>
<div class="uk-grid" data-uk-grid-margin>
<div class="uk-width-1-3">
<div class="uk-panel uk-panel-box uk-panel-box-primary">
<div class="uk-panel-badge uk-badge">AAA</div>
<h3 class="uk-panel-title">bbb</h3>
CCC
</div>

</div>
<div class="uk-width-1-3">
<div class="uk-panel uk-panel-box uk-panel-box-primary">
<div class="uk-panel-badge uk-badge">AAA</div>
<h3 class="uk-panel-title">bbb</h3>
CCC
</div>

</div>
<div class="uk-width-1-3">
<div class="uk-panel uk-panel-box">
<div class="uk-panel-badge uk-badge">AAA</div>
<h3 class="uk-panel-title">bbb</h3>
CCC
</div>

</div>
<div class="uk-width-2-3">
<div class="uk-panel uk-panel-box uk-panel-box-success">
<div class="uk-panel-badge uk-badge">AAAB</div>
<h3 class="uk-panel-title">bbb</h3>
CCC
</div>

</div>
<div class="uk-width-1-3">
<div class="uk-panel uk-panel-box uk-panel-box-primary">
<div class="uk-panel-badge uk-badge">AAA</div>
<h3 class="uk-panel-title">bbb</h3>
CCC
</div>

</div>
</div>
<hr>
<article class="uk-article">
<h1 class="uk-article-title">Article title</h1>
<p class="uk-article-meta">2014/02/17 12:15:24</p>
<p class="uk-article-lead">This is a message</p>
aaaaaaaaaaaaaaaaaaaa.nmnfndkfkdkfm,fd,gfgfgfgf
<hr class="uk-article-divider">
</article>
</body>
</html>


运行效果:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航