轮子UI

布局

上中下布局

预览

header
content
footer

代码

<g-layout style="color:white;margin-bottom:50px;">
    <g-header style="height:50px;background:lightskyblue;">
        header
    </g-header>
    <g-content style="height:100px;background:deepskyblue;">
        content
    </g-content>
    <g-footer style="height:50px;background:lightskyblue">
        footer
    </g-footer>
</g-layout>

中间加侧边栏布局

预览

header
sider
content
footer

代码

<g-layout style="color: white;overflow:hidden;margin-bottom:50px;">
    <g-header style="height: 50px;background:lightskyblue;">
        header
    </g-header>
    <g-layout>
        <g-sider style="height:100px;background:#ddd;width:200px;color:black;">
            sider
        </g-sider>
        <g-content style="height:100px;background:deepskyblue;">
            content
        </g-content>
    </g-layout>
    <g-footer style="height:50px;background:lightskyblue;">
        footer
    </g-footer>
</g-layout>

整体加侧边栏布局

预览

sider
header
content
footer

代码

<g-layout style="color: white; overflow:hidden; margin-bottom:50px;">
    <g-sider style=" background:#ddd; width:200px; color: black;">
        sider
    </g-sider>
    <g-layout>
        <g-header style="height: 50px; background:lightskyblue;">
        header
        </g-header>
        <g-content style="height: 100px; background:deepskyblue;">
        content
        </g-content>
        <g-footer style="height: 50px; background:lightskyblue;">
        footer
        </g-footer>
    </g-layout>
</g-layout>

← Popover - 浮层 →