本文介绍了如何使用Bootstrap框架来构建适应微信环境的开发页面，包括行长度的调整、Modal模态框的应用以及具体的实战案例展示。
1. 行长度：
<div class="col-md-12"> </div>2.modal
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">出库信息</h4><br>
</div>
<div class="modal-body">
<spring:form id="outMaterialForm" action="" class="form-horizontal" modelAttribute="outMaterialDto">
<spring:hidden path="mId"/>
<div class="form-group">
<label class="col-sm-2 control-label">出库时间：</label>
<div class="col-sm-4">
<spring:input class="form-control" path="outDate" readonly="true" placeholder="请选择时间"
data-bv-notempty="true" data-bv-notempty-message="不能为空"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">出库数量：</label>
<div class="col-sm-4">
<div id="1" class="input-group input-group-option quantity-wrapper">
<span class="input-group-addon input-group-addon-remove quantity-remove btn">
<span class="glyphicon glyphicon-minus"></span>
</span>
<spring:input id="1inp" value="6" path="outQuantity" name="option[]" class="form-control quantity-count" placeholder="1" />
<span class="input-group-addon input-group-addon-remove quantity-add btn">
<span class="glyphicon glyphicon-plus"></span>
</span>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">出库人：</label>
<div class="col-sm-4">
<spring:input class="form-control" path="outLeader"/>
</div>
</div>
</spring:form>
</div>
<div class="modal-footer" style="text-align: center;">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" id="saveOutMaterialBtn">保存</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+"/";
%>
<head>
<meta name="viewport" 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 rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link href="<%=basePath%>/page/pf/base/bootstrap/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<link href="<%=basePath%>/page/pf/base/bootstrap/table/bootstrap-table.css" rel="stylesheet"/>
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap-table/1.9.1/bootstrap-table.min.js"></script>
<script src="http://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="<%=basePath%>/page/project/wechat/m600material/js/material_view.js"></script>
<title>物料</title>
</head>
<body class="container">
<h4 class="page-header">详细</h4>
<div style="text-align: right;">
<button type="button" id="outQuantityBtn" class="btn btn-primary">出库</button>
</div>
<spring:form id="defaultForm" class="form-horizontal" modelAttribute="materialDto">
<input type="hidden" id="id" value="${materialDto.id }"/>
<div class="form-group">
<label class="col-sm-2 control-label">项目名称：</label>${materialDto.projectName }
</div>
<div class="form-group">
<label class="col-sm-2 control-label">物料名称：</label>${materialDto.name }
</div>
<div class="form-group">
<label class="col-sm-2 control-label">入库时间：</label>${materialDto.inDate }
</div>
<div class="form-group">
<label class="col-sm-2 control-label">物料数量：</label>${materialDto.inQuantity }
</div>
<div class="form-group">
<label class="col-sm-2 control-label">入库负责人：</label>${materialDto.inLeader }
</div>
<table class="table table-hover table-bordered" id="outMaterialTable" 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 class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">出库信息</h4><br>
</div>
<div class="modal-body">
<spring:form id="outMaterialForm" action="" class="form-horizontal" modelAttribute="outMaterialDto">
<spring:hidden path="mId"/>
<div class="form-group">
<label class="col-sm-2 control-label">出库时间：</label>
<div class="col-sm-4">
<spring:input class="form-control" path="outDate" readonly="true" placeholder="请选择时间"
data-bv-notempty="true" data-bv-notempty-message="不能为空"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">出库数量：</label>
<div class="col-sm-4">
<div id="1" class="input-group input-group-option quantity-wrapper">
<span class="input-group-addon input-group-addon-remove quantity-remove btn">
<span class="glyphicon glyphicon-minus"></span>
</span>
<spring:input id="1inp" value="6" path="outQuantity" name="option[]" class="form-control quantity-count" placeholder="1" />
<span class="input-group-addon input-group-addon-remove quantity-add btn">
<span class="glyphicon glyphicon-plus"></span>
</span>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">出库人：</label>
<div class="col-sm-4">
<spring:input class="form-control" path="outLeader"/>
</div>
</div>
</spring:form>
</div>
<div class="modal-footer" style="text-align: center;">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" id="saveOutMaterialBtn">保存</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="loadingModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">
<a href="#" class="thumbnail">
正在保存，请稍后...
</a>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
<div class="modal fade" id="alertModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">
<a href="#" class="thumbnail">
保存成功。
</a>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</body>
</html>4. js文件
var MaterialManager = {};
$(document).ready(function() {
MaterialManager.query = function(){
$('#outMaterialTable').bootstrapTable('destroy');
//初始化表格,动态从服务器加载数据
$("#outMaterialTable").bootstrapTable({
url:'../../supManage/material/queryOutMaterialList.do',
method: "get", //使用get请求到服务器获取数据
contentType: "application/x-www-form-urlencoded",
striped: true, //表格显示条纹
pageSize: 10, //每页显示的记录数
pageNumber:1, //当前第几页
pageList: [5, 10, 15, 20, 25], //记录数可选列表
sidePagination: "server", //表示服务端请求
//设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
//设置为limit可以获取limit, offset, search, sort, order
queryParamsType : "undefined",
queryParams: function queryParams(params) { //设置查询参数
var param = {
currentPage: param
最低0.47元/天 解锁文章
3327
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
