面板 Panel

示例

基本形式

Content

Header

Content

Header

Content

Footer

<div class="g-row">
    <div class="g-col g-col-4">
        <div class="m-panel">
            <div class="panel_bd">Content</div>
        </div>
    </div>
    <div class="g-col g-col-4">
        <div class="m-panel">
            <div class="panel_hd">Header</div>
            <div class="panel_bd">Content</div>
        </div>
    </div>
    <div class="g-col g-col-4">
        <div class="m-panel">
            <div class="panel_hd">Header</div>
            <div class="panel_bd">Content</div>
            <div class="panel_ft">Footer</div>
        </div>
    </div>
</div>

颜色扩展

Default

Content

Primary

Content

Info

Content

Success

Content

Warning

Content

Error

Content

<div class="g-row">
    <div class="g-col g-col-4">
        <div class="m-panel">
            <div class="panel_hd">Default</div>
            <div class="panel_bd">Content</div>
        </div>
    </div>
    <div class="g-col g-col-4">
        <div class="m-panel m-panel-primary">
            <div class="panel_hd">Primary</div>
            <div class="panel_bd">Content</div>
        </div>
    </div>
    <div class="g-col g-col-4">
        <div class="m-panel m-panel-info">
            <div class="panel_hd">Info</div>
            <div class="panel_bd">Content</div>
        </div>
    </div>
</div>
<div class="g-row">
    <div class="g-col g-col-4">
        <div class="m-panel m-panel-success">
            <div class="panel_hd">Success</div>
            <div class="panel_bd">Content</div>
        </div>
    </div>
    <div class="g-col g-col-4">
        <div class="m-panel m-panel-warning">
            <div class="panel_hd">Warning</div>
            <div class="panel_bd">Content</div>
        </div>
    </div>
    <div class="g-col g-col-4">
        <div class="m-panel m-panel-error">
            <div class="panel_hd">Error</div>
            <div class="panel_bd">Content</div>
        </div>
    </div>
</div>