前端开发框架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>

运行效果:

posted @ 2014-03-25 19:54  telzhou  阅读(451)  评论(0编辑  收藏  举报