前端开发框架1--uikit
中文项目地址：http://www.getuikit.net/docs/documentation_get-started.html
学习,Demo下载： https://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>
运行效果:
