MXBEUI - 后台管理系统UI

MXBEUI使用

第一步：引入MXBEUI样式文件：

<link rel="stylesheet" type="text/css" href="../css/mxbeui.css">

第二步：使用MXBEUI定制的HTML结构，例如简单布局结构：

<div class="card">
    <div class="card-header">示例代码</div>
    <div class="card-block">内容</div>
</div>

引入 iconfont 图标字体

<link rel="stylesheet" type="text/css" href="../fonts/iconfont.css">

HTML结构

结构都是HTML代码片段，通过特定 class 来组合使用。

一、布局结构

主体结构

<div class="wrap">
    <div class="sidebar">
        ..
    </div>
    <div class="main">
        <ol class="breadcrumb">
            ..
        </ol>
        <div class="content">
            <div class="card">
                内容1
            </div>

            <div class="card">
                内容2
            </div>
        </div>
    </div>
</div>

菜单结构

<div class="sidebar">
    <nav class="sidebar-nav">
        <ul class="nav">
            <li class="nav-title">
                类别1
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#"><i class="iconfont icon-menu"></i>菜单1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link active" href="#"><i class="iconfont icon-menu"></i>菜单2</a>
            </li>
            <li class="nav-item">
                ..
            </li>
            <li class="nav-title">
                类别2
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#"><i class="iconfont icon-menu"></i>菜单3</a>
            </li>
        </ul>
    </nav>
</div>

二级菜单结构

<div class="sidebar">
    <nav class="sidebar-nav">
        <ul class="nav">
            <li class="nav-title">MENUS</li>
            <li class="nav-subtitle">
                <a class="nav-subtitle-menu"><i class="iconfont icon-menu"></i>收起菜单</a>
                <ul class="nav-dropdown-items">
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="iconfont icon-menu"></i>菜单1</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="iconfont icon-menu"></i>菜单2</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="iconfont icon-menu"></i>菜单3</a>
                    </li>
                </ul>
            </li>
            <li class="nav-subtitle">
                <a class="nav-subtitle-menu"><i class="iconfont icon-menu"></i>展开菜单</a>
                <ul class="nav-dropdown-items open">
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="iconfont icon-menu"></i>菜单3</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="#"><i class="iconfont icon-menu"></i>菜单4</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="iconfont icon-menu"></i>菜单5</a>
                    </li>
                </ul>
            </li>
        </ul>
    </nav>
</div>

面包屑结构

<ol class="breadcrumb">
    <li class="breadcrumb-item">Home</li>
    <li class="breadcrumb-item">
        <a href="#">Main</a>
    </li>
    <li class="breadcrumb-item active">首页</li>
</ol>

单栏布局

<div class="card">
    <div class="card-header">普通布局</div>
    <div class="card-block">
        ..
    </div>
</div>

标题和段落

<div class="card-block">
    <h1>H1标签</h1>
    <h2>H2标签</h2>
    <h3>H3标签</h3>
    <h4>H4标签</h4>
    <h5>H5标签</h5>
    <p>普通p标签</p>
</div>

两栏布局

<div class="card-row2">
    <div class="card">
        <div class="card-header">左栏</div>
        <div class="card-block">
            ..
        </div>
    </div>
    <div class="card">
        <div class="card-header">右栏</div>
        <div class="card-block">
            ..
        </div>
    </div>
</div>

其他多栏布局参考上面代码，修改 .card-row2 为 .card-row3 .card-row4 .card-row5等，同时里面对应card个数，最多支持5栏布局。

Tab布局

<div class="card-tabs">
    <ul class="tabs-nav">
        <li class="nav-item active">Tab1</li>
        <li class="nav-item">Tab2</li>
    </ul>
    <div class="tabs-content">
        <div class="tab-pane active">
            ..
        </div>
        <div class="tab-pane">
            ..
        </div>
    </div>
</div>

二、按钮结构

<!--基本结构-->
<a class="btn">按钮</a>

<!--按钮颜色-->
<a class="btn btn-default">白底灰边</a>
<a class="btn btn-primary">蓝色</a>
<a class="btn btn-success">绿色</a>
<a class="btn btn-warning">黄色</a>
<a class="btn btn-danger">红色</a>

<!--大号按钮-->
<a class="btn btn-big btn-primary">蓝色大号按钮</a>

<!--长按钮-->
<a class="btn btn-long btn-primary">蓝色长按钮</a>

<!--禁用按钮-->
<a class="btn btn-primary" disabled>蓝色禁用按钮</a>

.btn 是按钮基础 class ，都需要带上。按钮需要禁用直接机上 disabled 属性。

三、列表结构

<table class="table">
    <thead>
        <tr>
            <th>..</th>
            <th>..</th>
            <th>..</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>..</td>
            <td>..</td>
            <td>..</td>
        </tr>
        <tr>
            ..
        </tr>
    </tbody>
</table>

列表无数据：

<table class="table">
    <thead>
        <tr>
            <th>..</th>
            <th>..</th>
            <th>..</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="no-data" colspan="3">暂无数据</td>
        </tr>
    </tbody>
</table>

列表需要在 table 上加同名类 .table

四、搜索结构

<div class="card-search">
    <div class="search-label">
        <strong>字段名1</strong>
        <input type="text" class="search-input">
    </div>
    <div class="search-label">
        <strong>字段名2</strong>
        <select class="search-select">
            <option value="男">男</option>
            <option value="女">女</option>
        </select>
    </div>
    <a class="btn btn-primary search-btn">搜索</a>
    <a class="btn btn-default search-btn">重置</a>
</div>

五、分页结构

<div class="pagination-wrap">
    <ul class="pagination">
        <li class="first disabled" jp-role="first" jp-data="1"><a>首页</a></li>
        <li class="prev disabled" jp-role="prev" jp-data="0"><a>上一页</a></li>
        <li class="page active" jp-role="page" jp-data="1"><a>1</a></li>
        <li class="page" jp-role="page" jp-data="2"><a>2</a></li>
        <li class="page" jp-role="page" jp-data="3"><a>3</a></li>
        <li class="page" jp-role="page" jp-data="4"><a>4</a></li>
        <li class="next" jp-role="next" jp-data="2"><a>下一页</a></li>
        <li class="last" jp-role="last" jp-data="18"><a>末页</a></li>
        <li>
            <span>共x条记录 共x页，跳转到第</span>
            <input type="text" class="go-input" />
            <span>页</span>
            <a class="go">确定</a>
        </li>
    </ul>
</div>

分页结构建议封装成函数。

六、表单结构

基本结构：

<form class="form">
    <div class="row">
        ...
    </div>
    <div class="row">
        <a class="btn btn-primary">保存</a>
    </div>
</form>

1、Input 输入框

<div class="form-group">
    <label for="name"><i class="redtip">*</i>字段名：</label>
    <input type="text" class="form-control">
    <span class="tip">提示消息！</span>
</div>

2、Radio 单选框

<div class="row">
    <div class="form-group">
        <label><i class="redtip">*</i>字段名：</label>
        <label class="label-radio"><input type="radio" class="form-radio" checked>值A</label>
        <label class="label-radio"><input type="radio" class="form-radio">值B</label>
    </div>
</div>

3、Checkbox 复选框

<div class="row">
    <div class="form-group">
        <label>字段名：</label>
        <label class="label-checkbox"><input type="checkbox" class="form-checkbox">值A</label>
        <label class="label-checkbox"><input type="checkbox" class="form-checkbox">值B</label>
        <label class="label-checkbox"><input type="checkbox" class="form-checkbox">值C</label>
        ..
    </div>
</div>

4、Select 下拉选择框

<div class="row">
    <div class="form-group">
        <label>字段名：</label>
        <select class="form-control form-select">
            <option value="-1" >请选择</option>
            <option value="">值A</option>
            <option value="">值B</option>
        </select>
    </div>
</div>

5、Textarea 文本域

<div class="row">
    <div class="form-group">
        <label class="label-top"><i class="redtip">*</i>字段名：</label>
        <textarea class="form-control form-textarea"></textarea>
        <span class="tip">提示信息！</span>
    </div>
</div>

6、File 文件上传

<!--单图上传-->
<div class="row">
    <div class="form-group form-upload">
        <label><i class="redtip">*</i>字段名：</label>
        <a class="btn btn-primary btn-upload">上传</a>
        <input type="file" class="form-control form-file">
        <span class="filename">xxx.jpg</span>
        <div class="progress">
            <div class="progress-bar" style="width: 30%;"></div>
        </div>
        <span class="help">可上传图片类型：.jpg .jpeg .png，宽高130*130px，30KB以内，上传图片前请先压缩图片</span>
        <span class="tip">提示消息！</span>
        <ul class="imglist imgsingle clearfix">
            <li><img src="xxx"><span class="imgname">xxx.jpg</span><i class="close" title="删除"></i></li>
        </ul>
    </div>
</div>

<!--多图上传-->
        <ul class="imglist clearfix">
            <li><img src="xxx"><span class="imgname">xxx.jpg</span><i class="close" title="删除"></i></li>
            <li><img src="xxx"><span class="imgname">xxx.jpg</span><i class="close" title="删除"></i></li>
        </ul>

需要在 .form-group 上添加类 .form-upload ，才会正常显示上传相关界面

.btn-upload 和 .form-file 必需，其他显示文件名、进度条、缩略图、上传提示等可选。

单图和多图显示样式有区别，通过 .imgsingle 来区分。

7、Editor 文本编辑器

<div class="row">
    <div class="form-group">
        <label class="label-top"><i class="redtip">*</i>字段名：</label>
        <div class="editor-wrap">
            <div id="editor"></div>
        </div>
        <span class="tip">提示消息！</span>
    </div>
</div>

A、验证不通过

<div class="form-group error">
    ..
</div>

验证不通过需要在 .form-group 上添加类 .error ，即显示验证不通过样式。

B、验证通过

<div class="form-group success">
    ..
</div>

验证通过可在 .form-group 上添加类 .success ，即显示验证通过样式。

行内显示

<div class="form-group form-inline-group">
    ..
</div>

可在 .form-group 上添加类 .form-inline-group ，可将单列转换为多列布局（建议2列）。

日期控件

<div class="form-group form-date">
    ..
</div>

可在 .form-group 上添加类 .form-date ，可显示日期相关样式。

短输入框

<input type="text" class="form-control sm-input" />

可在 .form-control 上添加类 .sm-input ，变短输入框。

显示必填星号

<i class="redtip">*</i>

字段名顶部对齐

<label class="label-top"></label>

七、弹窗结构

Toast 提示信息

<div class="mask-toast">提示消息</div>

Toast 建议封装成JS函数，注意 z-index 层级为当前最高。

Alert 消息框

<div class="mask">
    <section class="mask-alert">
        <div class="alert-title">系统消息<a class="alert-close"></a></div>
        <div class="alert-content">这是提示消息！</div>
        <div class="alert-btns">
            <a class="btn btn-confirm">确定</a>
        </div>
    </section>
</div>

Alert 建议封装成JS函数，注意 z-index 层级为当前最高。

Confirm 确认框

<div class="mask">
    <section class="mask-confirm">
        <div class="alert-title">系统消息<a class="alert-close"></a></div>
        <div class="alert-content">确认提示内容？</div>
        <div class="alert-btns">
            <a class="btn btn-cancel">取消</a>
            <a class="btn btn-confirm">确定</a>
        </div>
    </section>
</div>

Confirm 建议封装成JS函数，注意 z-index 层级为当前最高。

bigImage 查看大图

<div class="mask">
    <section class="mask-bigImg">
        <img src="xx">
    </section>
</div>

建议封装成JS函数，注意 z-index 层级为当前最高。