Shireframe基于 HTML 的界面原型库

联合创作 · 2023-10-02 00:08

Shireframe 可通过 HTML 实现界面原型的绘制。基于 AngularJS 和 jQuery 驱动，使用 RequireJS 进行模块加载，使用 Bootstrap 进行展示

示例代码：

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