Monk.UI
/
index.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Monk.UI - 百签软件（中山）有限公司</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1,minimum-scale=1,user-scalable=no" />
    <link href="monk.ui.min.css" rel="stylesheet" />
</head>
<body>
    <div class="monk-content-10">
        <a href="http://www.baisoft.org" class="monk-input-button turquoise" target="_blank">百签软件</a>

        <a href="https://monksoul.github.io/Monk.UI/" class="monk-input-button peterRiver" target="_blank">开源地址</a>

        <a href="https://github.com/MonkSoul/Monk.UI/releases" class="monk-input-button amethyst" target="_blank">更新日志</a>
        <br />
        <br />
        <!--=============开始=============-->
        <h1>表单</h1>
        <form class="monk-form">
            <h2>普通输入框</h2>
            <div class="monk-form-item">
                <label for="" class="monk-form-label">表单标题</label>
                <div class="monk-form-wrap">
                    <span class="monk-iconfont border-right icon-monk-input"></span>
                    <input type="text" class="monk-form-input min" placeholder="请输入..." value="百小僧" />
                    <span class="monk-iconfont border-left icon-monk-dacha monk-clear-input"></span>
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->
            <div class="monk-form-item">
                <label for="" class="monk-form-label">表单标题</label>
                <div class="monk-form-wrap">
                    <span class="monk-iconfont border-right icon-monk-input"></span>
                    <input type="text" class="monk-form-input middle" placeholder="请输入..." />
                    <span class="monk-iconfont border-left icon-monk-dacha monk-clear-input"></span>
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->
            <div class="monk-form-item">
                <label for="" class="monk-form-label">表单标题</label>
                <div class="monk-form-wrap">
                    <span class="monk-iconfont border-right icon-monk-input"></span>
                    <input type="text" class="monk-form-input normal" placeholder="请输入..." value="百签软件（中山）有限公司" />
                    <span class="monk-iconfont border-left icon-monk-dacha monk-clear-input"></span>
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->
            <div class="monk-form-item">
                <label for="" class="monk-form-label">表单标题</label>
                <div class="monk-form-wrap">
                    <span class="monk-iconfont border-right icon-monk-input"></span>
                    <input type="text" class="monk-form-input large" placeholder="请输入..." />
                    <span class="monk-iconfont border-left icon-monk-dacha monk-clear-input"></span>
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->
            <div class="monk-form-item">
                <label for="" class="monk-form-label">表单标题</label>
                <div class="monk-form-wrap">
                    <span class="monk-iconfont border-right icon-monk-input"></span>
                    <input type="text" class="monk-form-input xlarge" placeholder="请输入..." />
                    <span class="monk-iconfont border-left icon-monk-dacha monk-clear-input"></span>
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->
            <h3>普通输入框，必填</h3>
            <div class="monk-form-item">
                <label for="" class="monk-form-label">表单标题</label>
                <div class="monk-form-wrap">
                    <span class="monk-iconfont border-right icon-monk-input"></span>
                    <input type="text" class="monk-form-input normal" placeholder="请输入..." value="Monk.UI" />
                    <span class="monk-iconfont icon-monk-required"></span>
                    <span class="monk-iconfont border-left icon-monk-dacha monk-clear-input"></span>
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->
            <h3>普通输入框，只读</h3>
            <div class="monk-form-item">
                <label for="" class="monk-form-label">表单标题</label>
                <div class="monk-form-wrap">
                    <span class="monk-iconfont border-right icon-monk-input"></span>
                    <input type="text" class="monk-form-input normal" readonly="readonly" placeholder="请输入..." />
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->
            <h3>普通输入框，禁用</h3>
            <div class="monk-form-item">
                <label for="" class="monk-form-label">表单标题</label>
                <div class="monk-form-wrap">
                    <span class="monk-iconfont border-right icon-monk-input"></span>
                    <input type="text" class="monk-form-input normal" disabled="disabled" placeholder="请输入..." />
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->
            <h2>多行输入框</h2>
            <div class="monk-form-item">
                <label for="" class="monk-form-label">表单标题</label>
                <div class="monk-form-wrap">
                    <span class="monk-iconfont border-right icon-monk-input textarea-icon"></span>
                    <textarea class="monk-form-textarea min" placeholder="请输入..."></textarea>
                    <span class="monk-iconfont border-left icon-monk-dacha monk-clear-input textarea-icon"></span>
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->
            <div class="monk-form-item">
                <label for="" class="monk-form-label">表单标题</label>
                <div class="monk-form-wrap">
                    <span class="monk-iconfont border-right icon-monk-input textarea-icon"></span>
                    <textarea class="monk-form-textarea middle" placeholder="请输入..."></textarea>
                    <span class="monk-iconfont border-left icon-monk-dacha monk-clear-input textarea-icon"></span>
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->
            <div class="monk-form-item">
                <label for="" class="monk-form-label">表单标题</label>
                <div class="monk-form-wrap">
                    <span class="monk-iconfont border-right icon-monk-input textarea-icon"></span>
                    <textarea class="monk-form-textarea normal" placeholder="请输入..."></textarea>
                    <span class="monk-iconfont border-left icon-monk-dacha monk-clear-input textarea-icon"></span>
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->
            <div class="monk-form-item">
                <label for="" class="monk-form-label">表单标题</label>
                <div class="monk-form-wrap">
                    <span class="monk-iconfont border-right icon-monk-input textarea-icon"></span>
                    <textarea class="monk-form-textarea large" placeholder="请输入..."></textarea>
                    <span class="monk-iconfont border-left icon-monk-dacha monk-clear-input textarea-icon"></span>
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->
            <div class="monk-form-item">
                <label for="" class="monk-form-label">表单标题</label>
                <div class="monk-form-wrap">
                    <span class="monk-iconfont border-right icon-monk-input textarea-icon"></span>
                    <textarea class="monk-form-textarea xlarge" placeholder="请输入..."></textarea>
                    <span class="monk-iconfont border-left icon-monk-dacha monk-clear-input textarea-icon"></span>
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->
            <h3>多行输入框，必填</h3>
            <div class="monk-form-item">
                <label for="" class="monk-form-label">表单标题</label>
                <div class="monk-form-wrap">
                    <span class="monk-iconfont border-right icon-monk-input textarea-icon"></span>
                    <textarea class="monk-form-textarea normal" placeholder="请输入..."></textarea>
                    <span class="monk-iconfont icon-monk-required textarea-icon"></span>
                    <span class="monk-iconfont border-left icon-monk-dacha monk-clear-input textarea-icon"></span>
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->
            <h3>多行输入框，只读</h3>
            <div class="monk-form-item">
                <label for="" class="monk-form-label">表单标题</label>
                <div class="monk-form-wrap">
                    <span class="monk-iconfont border-right icon-monk-input textarea-icon"></span>
                    <textarea class="monk-form-textarea normal" placeholder="请输入..." readonly="readonly"></textarea>
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->
            <h3>多行输入框，禁用</h3>
            <div class="monk-form-item">
                <label for="" class="monk-form-label">表单标题</label>
                <div class="monk-form-wrap">
                    <span class="monk-iconfont border-right icon-monk-input textarea-icon"></span>
                    <textarea class="monk-form-textarea normal" placeholder="请输入..." disabled="disabled"></textarea>
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->
            <h2>复选框</h2>
            <div class="monk-form-item">
                <label for="" class="monk-form-label">表单标题</label>
                <div class="monk-form-checkbox-list">
                    <input type="checkbox" name="like" class="monk-checkbox" value="0" text="篮球" />
                    <input type="checkbox" name="like" class="monk-checkbox" value="1" text="足球" />
                    <input type="checkbox" name="like" class="monk-checkbox" value="2" text="百小僧" checked="checked" />
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->
            <h3>复选框，只读</h3>
            <div class="monk-form-item">
                <label for="" class="monk-form-label">表单标题</label>
                <div class="monk-form-checkbox-list">
                    <input type="checkbox" name="like" class="monk-checkbox" value="0" text="篮球" readonly="readonly" />
                    <input type="checkbox" name="like" class="monk-checkbox" value="2" text="百小僧" checked="checked" readonly="readonly" />
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->
            <h3>复选框，禁用</h3>
            <div class="monk-form-item">
                <label for="" class="monk-form-label">表单标题</label>
                <div class="monk-form-checkbox-list">
                    <input type="checkbox" name="like" class="monk-checkbox" value="0" text="篮球" disabled="disabled" />
                    <input type="checkbox" name="like" class="monk-checkbox" value="2" text="百小僧" checked="checked" disabled="disabled" />
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->
            <h2>切换滑块</h2>
            <div class="monk-form-item">
                <label for="" class="monk-form-label">表单标题</label>
                <div class="monk-form-switch-list">
                    <input type="checkbox" name="like" class="monk-switch" value="0" text="启用" />
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->
            <div class="monk-form-item">
                <label for="" class="monk-form-label">表单标题</label>
                <div class="monk-form-switch-list">
                    <input type="checkbox" name="like" class="monk-switch" value="0" checked="checked" text="启用" />
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->
            <h3>切换滑块，只读</h3>
            <div class="monk-form-item">
                <label for="" class="monk-form-label">表单标题</label>
                <div class="monk-form-switch-list">
                    <input type="checkbox" name="like" class="monk-switch" value="0" readonly="readonly" text="启用" />
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->
            <div class="monk-form-item">
                <label for="" class="monk-form-label">表单标题</label>
                <div class="monk-form-switch-list">
                    <input type="checkbox" name="like" class="monk-switch" value="0" readonly="readonly" checked="checked" text="启用" />
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->
            <h3>切换滑块，禁用</h3>
            <div class="monk-form-item">
                <label for="" class="monk-form-label">表单标题</label>
                <div class="monk-form-switch-list">
                    <input type="checkbox" name="like" class="monk-switch" value="0" disabled="disabled" text="启用" />
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->
            <div class="monk-form-item">
                <label for="" class="monk-form-label">表单标题</label>
                <div class="monk-form-switch-list">
                    <input type="checkbox" name="like" class="monk-switch" value="0" disabled="disabled" checked="checked" text="启用" />
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->
            <h2>单选框</h2>
            <div class="monk-form-item">
                <label for="" class="monk-form-label">表单标题</label>
                <div class="monk-form-radio-list">
                    <input type="radio" class="monk-radio" name="sex" value="0" text="男性" />
                    <input type="radio" class="monk-radio" name="sex" value="1" text="女性" checked="checked" />
                    <input type="radio" class="monk-radio" name="sex" value="2" text="人妖" />
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->
            <h3>单选框，只读（男性为只读）</h3>
            <div class="monk-form-item">
                <label for="" class="monk-form-label">表单标题</label>
                <div class="monk-form-radio-list">
                    <input type="radio" class="monk-radio" name="sex1" value="0" text="男性" readonly="readonly" />
                    <input type="radio" class="monk-radio" name="sex1" value="1" text="女性" checked="checked" />
                    <input type="radio" class="monk-radio" name="sex1" value="2" text="人妖" />
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->
            <h3>单选框，禁用（男性，女性为禁用）</h3>
            <div class="monk-form-item">
                <label for="" class="monk-form-label">表单标题</label>
                <div class="monk-form-radio-list">
                    <input type="radio" class="monk-radio" name="sex2" value="0" text="男性" disabled="disabled" />
                    <input type="radio" class="monk-radio" name="sex2" value="1" text="女性" checked="checked" disabled="disabled" />
                    <input type="radio" class="monk-radio" name="sex2" value="2" text="人妖" />
                    <input type="radio" class="monk-radio" name="sex2" value="3" text="保密" />
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->
            <h2>下拉选择框</h2>
            <div class="monk-form-item">
                <label for="" class="monk-form-label">表单标题</label>
                <div class="monk-form-wrap monk-form-select-wrap">
                    <span class="monk-iconfont border-right icon-monk-input"></span>
                    <input type="text" class="monk-form-input middle" placeholder="请输入或选择..." />
                    <span class="monk-iconfont monk-select-arrow icon-monk-arrowdown border-left"></span>
                </div>
                <div class="monk-form-select monk-none">
                    <select class="monk-select">
                        <option value="">请输入或选择...</option>
                        <option value="0">列表项目一</option>
                        <option value="1" selected="selected">列表项目二</option>
                        <option value="2">列表项目三</option>
                        <option value="3">列表项目四</option>
                        <option value="4">列表项目五</option>
                        <option value="5">列表项目六</option>
                        <optgroup label="这里是分类栏目"></optgroup>
                        <option value="6">列表项目七</option>
                        <option value="7">列表项目八</option>
                        <option value="8">列表项目九</option>
                        <option value="9">列表项目十</option>
                    </select>
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->
            <h3>下拉类别，必选</h3>
            <div class="monk-form-item">
                <label for="" class="monk-form-label">表单标题</label>
                <div class="monk-form-wrap monk-form-select-wrap">
                    <span class="monk-iconfont border-right icon-monk-input"></span>
                    <input type="text" class="monk-form-input middle" placeholder="请输入或选择..." />
                    <span class="monk-iconfont icon-monk-required"></span>
                    <span class="monk-iconfont monk-select-arrow icon-monk-arrowdown border-left"></span>
                </div>
                <div class="monk-form-select monk-none">
                    <select class="monk-select">
                        <option value="">请输入或选择...</option>
                        <option value="0">列表项目一</option>
                        <option value="1" selected="selected">列表项目二</option>
                        <option value="2">列表项目三</option>
                        <option value="3">列表项目四</option>
                        <option value="4">列表项目五</option>
                        <option value="5">列表项目六</option>
                        <optgroup label="这里是分类栏目"></optgroup>
                        <option value="6">列表项目七</option>
                        <option value="7">列表项目八</option>
                        <option value="8">列表项目九</option>
                        <option value="9">列表项目十</option>
                    </select>
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->
            <h3>树下拉列表</h3>
            <div class="monk-form-item">
                <label for="" class="monk-form-label">表单标题</label>
                <div class="monk-form-wrap monk-form-select-wrap">
                    <span class="monk-iconfont border-right icon-monk-input"></span>
                    <input type="text" class="monk-form-input middle" placeholder="请输入或选择..." />
                    <span class="monk-iconfont monk-select-arrow icon-monk-arrowdown border-left"></span>
                </div>
                <div class="monk-form-select monk-none">
                    <select class="monk-select">
                        <option value="">请输入或选择...</option>
                        <option value="0">系统模块</option>
                        <option value='1'>├ 站点管理</option>
                        <option value='2'>　├ 站点设置</option>
                        <option value='3'>　├ 内容管理</option>
                        <option value='4' selected="selected">　　├ 类别管理</option>
                        <option value='5'>　　├ 单页管理</option>
                        <option value='6'>　├ 频道管理</option>
                        <option value='7'>　├ 广告管理</option>
                        <option value='8'>　├ 留言板管理</option>
                        <option value='9'>　　├ 留言类别</option>
                        <option value='10'>　├ 碎片管理</option>
                        <option value='11'>　├ 友情链接管理</option>
                        <option value='12'>　　├ 类别管理</option>
                        <option value='13'>├ 微信管理</option>
                        <option value='14'>　├ 基本设置</option>
                        <option value='15'>├ 移动管理</option>
                        <option value='16'>　├ 基本设置</option>
                    </select>
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->
            <h3>下拉选择框，只读</h3>
            <div class="monk-form-item">
                <label for="" class="monk-form-label">表单标题</label>
                <div class="monk-form-wrap monk-form-select-wrap">
                    <span class="monk-iconfont border-right icon-monk-input"></span>
                    <input type="text" class="monk-form-input middle" placeholder="请输入或选择..." readonly="readonly" />
                    <span class="monk-iconfont monk-select-arrow icon-monk-arrowdown border-left"></span>
                </div>
                <div class="monk-form-select monk-none">
                    <select class="monk-select">
                        <option value="">请输入或选择...</option>
                        <option value="0">列表项目一</option>
                        <option value="1">列表项目二</option>
                        <option value="2">列表项目三</option>
                        <option value="3" selected="selected">列表项目四</option>
                        <option value="4">列表项目五</option>
                        <option value="5">列表项目六</option>
                        <optgroup label="这里是分类栏目"></optgroup>
                        <option value="6">列表项目七</option>
                        <option value="7">列表项目八</option>
                        <option value="8">列表项目九</option>
                        <option value="9">列表项目十</option>
                    </select>
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->
            <h3>下拉选择框，禁用</h3>
            <div class="monk-form-item">
                <label for="" class="monk-form-label">表单标题</label>
                <div class="monk-form-wrap monk-form-select-wrap">
                    <span class="monk-iconfont border-right icon-monk-input"></span>
                    <input type="text" class="monk-form-input middle" placeholder="请输入或选择..." disabled="disabled" />
                    <span class="monk-iconfont monk-select-arrow icon-monk-arrowdown border-left"></span>
                </div>
                <div class="monk-form-select monk-none">
                    <select class="monk-select">
                        <option value="">请输入或选择...</option>
                        <option value="0">列表项目一</option>
                        <option value="1">列表项目二</option>
                        <option value="2">列表项目三</option>
                        <option value="3">列表项目四</option>
                        <option value="4">列表项目五</option>
                        <option value="5">列表项目六</option>
                        <optgroup label="这里是分类栏目"></optgroup>
                        <option value="6" selected="selected">列表项目七</option>
                        <option value="7">列表项目八</option>
                        <option value="8">列表项目九</option>
                        <option value="9">列表项目十</option>
                    </select>
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->
            <h2>数字输入框</h2>
            <div class="monk-form-item">
                <label for="" class="monk-form-label">表单标题</label>
                <div class="monk-form-wrap">
                    <span class="monk-iconfont border-right icon-monk-number"></span>
                    <input type="number" class="monk-form-input middle" onkeyup="this.value=this.value.replace(/!^[0-9]*$/g,'')" onafterpaste="this.value=this.value.replace(/!^[0-9]*$/g,'')" placeholder="请输入..." />
                    <span class="monk-iconfont icon-monk-required"></span>
                    <span class="monk-iconfont border-left icon-monk-dacha monk-clear-input"></span>
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->
            <h3>数字输入框，只读</h3>
            <div class="monk-form-item">
                <label for="" class="monk-form-label">表单标题</label>
                <div class="monk-form-wrap">
                    <span class="monk-iconfont border-right icon-monk-number"></span>
                    <input type="number" class="monk-form-input middle" onkeyup="this.value=this.value.replace(/!^[0-9]*$/g,'')" onafterpaste="this.value=this.value.replace(/!^[0-9]*$/g,'')" readonly="readonly" placeholder="请输入..." />
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->
            <h3>数字输入框，禁用</h3>
            <div class="monk-form-item">
                <label for="" class="monk-form-label">表单标题</label>
                <div class="monk-form-wrap">
                    <span class="monk-iconfont border-right icon-monk-number"></span>
                    <input type="number" class="monk-form-input middle" onkeyup="this.value=this.value.replace(/!^[0-9]*$/g,'')" onafterpaste="this.value=this.value.replace(/!^[0-9]*$/g,'')" disabled="disabled" placeholder="请输入..." />
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->

            <h2>时间选择</h2>
            <div class="monk-form-item">
                <label for="" class="monk-form-label">表单标题</label>
                <div class="monk-form-wrap monk-form-time-wrap">
                    <span class="monk-iconfont border-right icon-monk-input"></span>
                    <input type="text" class="monk-form-input middle" placeholder="请选择..." value="01:02:03" />
                    <span class="monk-iconfont border-left icon-monk-time"></span>
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->
            <h2>时间选择，必选</h2>
            <div class="monk-form-item">
                <label for="" class="monk-form-label">表单标题</label>
                <div class="monk-form-wrap monk-form-time-wrap">
                    <span class="monk-iconfont border-right icon-monk-input"></span>
                    <input type="text" class="monk-form-input middle" placeholder="请选择..." value="01:02:03" />
                    <span class="monk-iconfont icon-monk-required"></span>
                    <span class="monk-iconfont border-left icon-monk-time"></span>
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->
            <h2>时间选择，只读</h2>
            <div class="monk-form-item">
                <label for="" class="monk-form-label">表单标题</label>
                <div class="monk-form-wrap monk-form-time-wrap">
                    <span class="monk-iconfont border-right icon-monk-input"></span>
                    <input type="text" class="monk-form-input middle" placeholder="请选择..." value="01:02:03" readonly="readonly" />
                    <span class="monk-iconfont border-left icon-monk-time"></span>
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->
            <h3>时间选择，禁用</h3>
            <div class="monk-form-item">
                <label for="" class="monk-form-label">表单标题</label>
                <div class="monk-form-wrap monk-form-time-wrap">
                    <span class="monk-iconfont border-right icon-monk-input"></span>
                    <input type="text" class="monk-form-input middle" placeholder="请选择..." value="01:02:03" disabled="disabled" />
                    <span class="monk-iconfont border-left icon-monk-time"></span>
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->
            <h2>文件选择</h2>
            <div class="monk-form-item">
                <label for="" class="monk-form-label">表单标题</label>
                <div class="monk-form-wrap">
                    <span class="monk-iconfont border-right icon-monk-input"></span>
                    <input type="text" class="monk-form-input normal" placeholder="请选择..." />
                    <span class="monk-iconfont border-left icon-monk-file"></span>
                </div>
                <div class="monk-form-wrap monk-form-image-wrap">
                    <input type="file" class="monk-file" />
                    <button class="monk-input-button turquoise">选择文件</button>
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->
            <h2>显示文本</h2>
            <div class="monk-form-item">
                <label for="" class="monk-form-label">表单标题</label>
                <div class="monk-form-wrap monk-form-detail-wrap monk-full">
                    百签软件，源于百签。
                </div>
            </div>
            <!--========分割线========-->
            <div class="monk-form-item">
                <label for="" class="monk-form-label">表单标题</label>
                <div class="monk-form-wrap monk-form-detail-wrap monk-full">
                    百签软件（中山）有限公司 是中国一家高科技软件公司，总部位于广东省中山市西区。百签软件（中山）有限公司 主要提供全平台应用程序开发，其中包括移动应用程序（Android，IOS，Windows Phone），桌面应用程序（Windows，Linux，Mac），以及浏览器端应用程序（桌面端，移动端）等开发。
                </div>
            </div>
            <!--========分割线========-->
            <h2>提交按钮</h2>
            <input type="submit" class="monk-input-button turquoise monk-form-submit" value="保存提交" />
            <!--========分割线========-->
            <button class="monk-input-button emerland">普通按钮</button>
            <!--========分割线========-->
            <input type="button" class="monk-input-button peterRiver" value="普通按钮" />
            <!--========分割线========-->
            <input type="reset" class="monk-input-button amethyst" value="重置按钮" />
            <!--========分割线========-->
            <input type="button" class="monk-input-button clouds" value="灰色按钮" />
            <!--========分割线========-->
            <a class="monk-input-button turquoise">链接按钮</a>
            <!--========分割线========-->
            <a class="monk-input-button turquoise"><span class="monk-iconfont icon-monk-time"></span>图标按钮</a>
            <!--========分割线========-->
            <button class="monk-input-button emerland" disabled="disabled">禁用按钮</button>
            <!--========分割线========-->
        </form>
        <!--========分割线========-->
        <h2>代码显示，HTML</h2>
        <div class="monk-form-item">
            <label for="" class="monk-form-label">表单标题</label>
            <div class="monk-form-wrap monk-form-code-wrap monk-full">
                <pre class="monk-code" data-language="HTML"><p>百签软件，源于百签。</p></pre>
            </div>
        </div>
        <!--========分割线========-->
        <h2>代码显示，CSS</h2>
        <div class="monk-form-item">
            <label for="" class="monk-form-label">表单标题</label>
            <div class="monk-form-wrap monk-form-code-wrap monk-full">
                <pre class="monk-code" data-language="CSS">* { box-sizing: border-box; -moz-box-sizing: border-box; }</pre>
            </div>
        </div>
        <!--========分割线========-->
        <h2>代码显示，C#</h2>
        <div class="monk-form-item">
            <label for="" class="monk-form-label">表单标题</label>
            <div class="monk-form-wrap monk-form-code-wrap monk-full">
                <pre class="monk-code" data-language="C#">using Microsoft.Owin;
using Owin;
[assembly: OwinStartup(typeof(Monk.App_Start.Startup))]
namespace Monk.App_Start
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            app.MapSignalR();
        }
    }
}</pre>
            </div>
        </div>
        <!--========分割线========-->
        <h2>代码显示，PHP</h2>
        <div class="monk-form-item">
            <label for="" class="monk-form-label">表单标题</label>
            <div class="monk-form-wrap monk-form-code-wrap monk-full">
                <pre class="monk-code" data-language="PHP">namespace app\index\controller;
class Index
{
    public function index()
    {
        return 'index';
    }
}</pre>
            </div>
        </div>
        <!--========分割线========-->
        <h2>代码显示，JAVA</h2>
        <div class="monk-form-item">
            <label for="" class="monk-form-label">表单标题</label>
            <div class="monk-form-wrap monk-form-code-wrap monk-full">
                <pre class="monk-code" data-language="JAVA">public static void insertionSort(int[] data) {
    for (int index = 1; index < data.length; index++) {
        int key = data[index];
        int position = index;
        // shift larger values to the right
        while (position > 0 && data[position - 1] > key) {
            data[position] = data[position - 1];
            position--;
        }
        data[position] = key;
    }
}</pre>
            </div>
        </div>
        <!--========分割线========-->
        <h2>代码显示，SQL</h2>
        <div class="monk-form-item">
            <label for="" class="monk-form-label">表单标题</label>
            <div class="monk-form-wrap monk-form-code-wrap monk-full">
                <pre class="monk-code" data-language="SQL">select * from web where site='http://www.baisoft.org/'</pre>
            </div>
        </div>
        <!--========分割线========-->
        <h1>模板引擎</h1>
        <h2>定义模板</h2>
        <div class="monk-form-item">
            <div class="monk-form-wrap monk-form-code-wrap monk-full">
                <pre class="monk-code" data-language="HTML"><!--定义模板，<% %> 包裹Javascript代码，<%= %> 输出变量 -->
<script type="text/html" id="tppl">
    <% for(var i=0; i < list.length;i++){ %>
                <li>名称：<%=list[i].name %></li>
    <%} %>
</script></pre>
            </div>
        </div>
        <!--========分割线========-->
        <h2>渲染模板</h2>
        <div class="monk-form-item">
            <div class="monk-form-wrap monk-form-code-wrap monk-full">
                <pre class="monk-code" data-language="HTML"><!--使用-->
<script type="text/javascript">
    // 定义数据集合，必须是json类型
    var data = {
        list: [
            {
                name: "百签软件",
                autor: "百小僧",
                age: 23
            }
        ]
    };
    // 调用hui.tppl(tpl,data); 返回渲染之后的HTML，不能重复渲染多个数据集合
    var html = monk.tppl(document.getElementById("tppl").innerHTML, data);

    // 同时也可以这样调用
    var render = monk.tppl(document.getElementById("tppl").innerHTML);
    var html = render(data); // 可以载入不同的数据渲染同一套模板
    var html2 = render({ list: [{ name: "Monk 2.x", autor: "百小僧" }] });
</script></pre>
            </div>
        </div>
        <!--========分割线========-->
        <script src="monk.ui.min.js"></script>
</body>
</html>