基于 HTML 的界面原型庫:Shireframe

pdkie1 9年前發布 | 24K 次閱讀 前端技術 Shireframe

Shireframe 可通過 HTML 實現界面原型的繪制。基于 AngularJS 和 jQuery 驅動,使用 RequireJS 進行模塊加載,使用 Bootstrap 進行展示

基于 HTML 的界面原型庫:Shireframe

示例代碼:
<!DOCTYPE html>
<html>
    <head>
        <script src="http://rawgit.com/tsx/shireframe/master/shireframe-r.js"></script>
        <title>Doodle</title>
    </head>
    <body>
        <browser-chrome>
            <div class="container-fluid">
                <div class="text-right vertical-margin">
                    <a>~Me</a>
                    <a>Mail</a>
                    <a>Pictures</a>
                    <glyphicon th></glyphicon>
                    <glyphicon user></glyphicon>
                </div>
                <div class="vertical-margin">
                    <row>
                        <col-6 col-offset-3>
                            <h1 class="text-title text-center"></h1>
                            <box class="width-100 vertical-margin">|</box>
                        </col-6>
                    </row>
                    <row>
                        <col-3 col-offset-3>
                            <button class="btn btn-default width-100">Doodle search</button>
                        </col-3>
                        <col-3>
                            <button class="btn btn-default width-100">I'm feeling doodley</button>
                        </col-3>
                    </row>
                </div>
                <footer class="vertical-margin">
                    &copy; <text-url></text-url> 2015
                </footer>
            </div>
        </browser-chrome>
    </body>
</html>

項目主頁:http://www.baiduhome.net/lib/view/home/1428905542689

 本文由用戶 pdkie1 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!