1. 行长度：
<div> </div>
2.modal
<div tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div> <div> <div> <button type="button" data-dismiss="modal" aria-hidden="true">×</button> <h4>出库信息</h4><br> </div> <div> <spring:form action="" modelAttribute="outMaterialDto"> <spring:hidden path="mId"/> <div> <label>出库时间：</label> <div> <spring:input path="outDate" readonly="true" placeholder="请选择时间" data-bv-notempty="true" data-bv-notempty-message="不能为空"/> </div> </div> <div> <label>出库数量：</label> <div> <div> <span> <span></span> </span> <spring:input value="6" path="outQuantity" placeholder="1" /> <span> <span></span> </span> </div> </div> </div> <div> <label>出库人：</label> <div> <spring:input path="outLeader"/> </div> </div> </spring:form> </div> <div> <button type="button" data-dismiss="modal">取消</button> <button type="button">保存</button> </div> </div> </div> </div>
3. 事例
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags/form" %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <html> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"https://www.jb51.net/"; %> <head> <meta content="user-scalable=no, width=device-width, initial-scale=1.0" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <!-- 新 Bootstrap 核心 CSS 文件 --> <link href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- 可选的Bootstrap主题文件（一般不用引入） --> <link href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <link href="https://www.jb51.net/<%=basePath%>/page/pf/base/bootstrap/css/bootstrap-datetimepicker.min.css"/> <link href="https://www.jb51.net/<%=basePath%>/page/pf/base/bootstrap/table/bootstrap-table.css"/> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="https://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap-table/1.9.1/bootstrap-table.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap-table/1.9.1/locale/bootstrap-table-zh-CN.min.js"></script> <script type="text/javascript" src="<%=basePath%>/page/pf/base/bootstrap/bootstrap-datetimepicker.min.js?version=09092200010"></script> <script type="text/javascript" src="<%=basePath%>/page/pf/base/bootstrap/bootstrap-datetimepicker.fr.js?version=09092200010"></script> <script type="text/javascript" src="<%=basePath%>/page/pf/base/bootstrap/bootstrap-datetimepicker.zh-CN.js?version=09092200010"></script> <style type="text/css"> .quantity-remove, .quantity-add { cursor: pointer; } .quantity-add.glyphicon, .quantity-remove.glyphicon { display: block; cursor: pointer; } </style> <script src="https://www.jb51.net/<%=basePath%>/page/project/wechat/m600material/js/material_view.js"></script> <title>物料</title> </head> <body> <h4>详细</h4> <div> <button type="button">出库</button> </div> <spring:form modelAttribute="materialDto"> <input type="hidden" value="${materialDto.id }"/> <div> <label>项目名称：</label>${materialDto.projectName } </div> <div> <label>物料名称：</label>${materialDto.name } </div> <div> <label>入库时间：</label>${materialDto.inDate } </div> <div> <label>物料数量：</label>${materialDto.inQuantity } </div> <div> <label>入库负责人：</label>${materialDto.inLeader } </div> <table data-pagination="false" data-search="false" data-show-refresh="false" data-toggle="card" data-card-view = "true" data-show-toggle="false" data-show-columns="false" data-page-list="[10,20,50,100]"> <caption>出库列表</caption> <thead> <thead> <tr> <th data-field="outDate" data-halign="center">出库时间：</th> <th data-field="outQuantity" data-halign="center">出库数量：</th> <th data-field="outLeader" data-halign="center">出库人：</th> </tr> </thead> <tbody> </tbody> </table> </spring:form> <div tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div> <div> <div> <button type="button" data-dismiss="modal" aria-hidden="true">×</button> <h4>出库信息</h4><br> </div> <div> <spring:form action="" modelAttribute="outMaterialDto"> <spring:hidden path="mId"/> <div> <label>出库时间：</label> <div> <spring:input path="outDate" readonly="true" placeholder="请选择时间" data-bv-notempty="true" data-bv-notempty-message="不能为空"/> </div> </div> <div> <label>出库数量：</label> <div> <div> <span> <span></span> </span> <spring:input value="6" path="outQuantity" placeholder="1" /> <span> <span></span> </span> </div> </div> </div> <div> <label>出库人：</label> <div> <spring:input path="outLeader"/> </div> </div> </spring:form> </div> <div> <button type="button" data-dismiss="modal">取消</button> <button type="button">保存</button> </div> </div> </div> </div> <div tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div> <div> <div> </div> <div> <a href="#"> 正在保存，请稍后... </a> </div> <div> </div> </div> </div> </div> <div tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div> <div> <div> </div> <div> <a href="#"> 保存成功。 </a> </div> <div> </div> </div> </div> </div> </body> </html>
4. js文件