项目中,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 中
- 模版
- 前言
- 项目架构
- 项目规范
- HTML
- CSS
- Javascript
- PHP
- MySQL
- 注意规范
- 开发版本管理
- 开发流程
- 系统配置
- 阿里云服务器配置
- 计划任务配置说明
- 开发示例
- Page分页
- Search_param搜索结果赋值
- Add新增
- Edit编辑
- Ajax表单验证
- Ajax二级联动
- Excel 导出数据首位不去0的方法
- POS总部控制
- 下载CSV格式的模板
- 订单唯一码表和订单SKU表实收金额生成
- 快捷日期选择
- JS函数
- ajax_send
- ajax_result
- createQrCodes
- createBarCodes
- printTpl
- JS插件
- BootstrapValidator表单验证插件
- Address省市区插件
- Bootstrap-datepicker日期插件
- Bootstrap-select多选框插件
- Toastr消息提示插件
- PalyAudit扫描声音提示插件
- WebUploader多图片上传插件
- Ueditor富文本编辑器插件
- Function
- alert
- object_to_array
- array_to_object
- get_address
- set_param_url
- get_shops_name
- get_user_name
- get_warehouse
- get_cheapest_sku
- print_attr(新)
- print_img(新)
- get_spu_no(新)
- get_type_name(新)
- get_brand_en(新)
- get_cat_name(新)
- get_attr_name(新)
- spu_cat_info(新)
- get_time_event_price
- get_vendors
- check_total_reduce
- check_total_discount
- get_inventory
- get_delivery
- get_sale_inventory
- get_customer_name
- phone_protection
- get_order_no
- get_event_name
- get_order_status
- get_item_status
- get_ditch_name
- get_card_no
- get_shop_sales
- get_pay_name
- get_season
- amt_format
- get_cat_parent
- print_attr_id
- round_bcadd
- round_bcsub
- round_bcmul
- round_bcdiv
- get_account_name
- Controller
- Common_BaseController
- check_membership_card
- get_menu_list
- importErrorMassage
- Wpos_IndexController
- get_customer_vip_card
- get_shops_id
- calculate_active_integral
- check_numbers_active
- check_goods_active
- Woms_IndexController
- Model
- View
- category
- cycle_date.html
- shop_select门店多选搜索框
- 品牌A-Z排序多选brand_mc.html
- 供应商代码A-Z排序vendor_no_mc.html
- Lib
- BuyerLib
- WarehouseLib
- EventLib
- getTimeEventPrice
- getVipType
- getEvent
- orderTotalEvent
- orderTimeEvent
- getTotalReduce
- getTotalDiscount
- SaleLib
- CustomerLib
- addCustomerService
- GiftcardLib
- WechatLib
- wxRefund
- OrdersLib
- orderLog
- calculatePayinAmount
- calculateSubtotal
- correctPayinAmount
- saveOrderAddress
- getOrderAddress
- setDeliveryNo
- SyncLib
- updateOuterStock
- UserLib
- createCommission
- FlowLib
- orderList
- addOrder
- addLog
- orderInfo
- checkSku
- orderSave
- orderStop
- orderExecute
- skuEdit
- orderPrinta
- scanGoods
- boxClose
- orderOut
- take
- bview
- check
- deliveryStatus
- checkGoods
- GoodsLib
- createGoodsNo
- createNewGoodsNo
- getSystemStyleNo
- getDim
- MallLib
- smsLog
- GoodsBaseLib
- getBrandInfo
- getBrandsInfo
- getAttrIdArray
- getPrintAttr
- getMustAttr
- getCatIdInfo
- valTypeId
- valsTypeId
- getCatNoInfo
- getCatInfo
- getAttrArr
- getAttrInfo
- getValInfo
- getAttrId
- getValId
- getAttrSeaon
- getValueId
- PointsLog
- pointsIn
- pointsUp
- EcGoodsLib
- getSkuInventory
- Tools
- CsvTools
- csvImport
- csvExport
- ExcelTools
- importExcel
- exportExcel
- exportHeadExcel
- MailTools
- SmsTools
- sendMessage
- UploadTools
- ExportTools
- exportData
- TaobaoTools
- getOnsaleItems
- getSkusItems
- PicturesTools
- uploadPicture
- Plugins
- WxBase
- Taobao
- 问题反馈