🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
项目中,ERP、CRM、POS、OMS都是基于 Bootstrap 3 的基础上进行开发的,因此,每一位开发者必须非常的熟悉 Bootstrap 3 的每一个组件,以及灵活使用; 项目前端 HTML 代码完全遵从 Bootstrap 3 的开发标准。 HTML 规范: 1、闭合标签: 闭合上下对其,内标签以 一个 Tab 向内缩进,保持可阅读 ~~~ <div class="container"> ... </div> ~~~ 2、单标签,单标签不加闭合斜杠 ~~~ <img src="..." class="img-responsive" alt="Responsive image"> ~~~ 3、HTML 注释 在每一个独立的组件区块中,在上下加上说明注释 ~~~ <!-- xx 新增模态框 --> <div class="modal fade" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> ... </div> </div> ~~~ 4、在 HTML 页面 禁止写一切的 CSS 和 JS 代码,CSS 和 JS以引入的方式调用加载 ~~~ <!-- 引入 xx.css --> <link rel="stylesheet" href="xx.css"> <!-- 加载 xx.js --> <script src="xx.js"></script> ~~~ 5、HTML 文件主要写在 MVC 结构的 View 视图层,公共的 HTML 文件,如Header,Footer等 都将写到 Common 的 View目录中,(现在在 Set/View/Public) 6、id 和 class 命名统一格式为 “-”连接,如: col-sm- ~~~ <div class="col-sm-12"></div> ~~~ 7、有验证提交的按钮用 button 标签,加上禁止重复提交,其余按钮用a标签 ~~~ <div class="modal-footer"> <button type="submit" class="btn btn-primary">保存</button> <a class="btn btn-primary">添加</a> </div> ~~~ 8、页面 button 按钮,主要有三种形式 btn,btn-primary,btn-default , btn-erp , btn-pos , btn-crm , btn-ecm , btn-sys ~~~ <a class="btn btn-primary">按钮</a> <a class="btn btn-default">按钮</a> <a class="btn btn-erp">ERP按钮</a> <a class="btn btn-pos">POS按钮</a> <a class="btn btn-crm">CRM按钮</a> <a class="btn btn-ecm">ECM按钮</a> <a class="btn btn-sys">SYS按钮</a> ~~~ **截图:** ![](https://box.kancloud.cn/01e49988084dd9f332694e797012893a_78x44.png) ![](https://box.kancloud.cn/10f0d2664f74fd61ee41e12f5212765d_63x42.png) ![](https://box.kancloud.cn/9665a4a253015a6411e0f0e79915d22d_64x42.png) 9、页面状态标识,用不同的颜色进行区别,成功,失败等 ~~~ <span class="label label-primary">蓝色</span> <span class="label label-success">绿色</span> <span class="label label-info">天蓝</span> <span class="label label-warning">黄色</span> <span class="label label-danger">红色</span> ~~~ ![](https://box.kancloud.cn/4b6569a43ee1688190005315fb7427f6_715x166.png) 10、模态框有三种不同大小形式的使用,具体看 Bootstrap 中