BootStrap轻松实现微信页面开发代码分享

柠檬墨绿色 · 发表于 2016/11/4 15:09

1. 行长度：

　　?

　　1

　　<div class="col-md-12"> </div>

　　2.modal

　　?

　　1

　　2

　　3

　　4

　　5

　　6

　　7

　　8

　　9

　　10

　　11

　　12

　　13

　　14

　　15

　　16

　　17

　　18

　　19

　　20

　　21

　　22

　　23

　　24

　　25

　　26

　　27

　　28

　　29

　　30

　　31

　　32

　　33

　　34

　　35

　　36

　　37

　　38

　　39

　　40

　　41

　　42

　　43

　　44

　　45

　　46

　　<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. 事例

　　?

　　1

　　2

　　3

　　4

　　5

　　6

　　7

　　8

　　9

　　10

　　11

　　12

　　13

　　14

　　15

　　16

　　17

　　18

　　19

　　20

　　21

　　22

　　23

　　24

　　25

　　26

　　27

　　28

　　29

　　30

　　31

　　32

　　33

　　34

　　35

　　36

　　37

　　38

　　39

　　40

　　41

　　42

　　43

　　44

　　45

　　46

　　47

　　48

　　49

　　50

　　51

　　52

　　53

　　54

　　55

　　56

　　57

　　58

　　59

　　60

　　61

　　62

　　63

　　64

　　65

　　66

　　67

　　68

　　69

　　70

　　71

　　72

　　73

　　74

　　75

　　76

　　77

　　78

　　79

　　80

　　81

　　82

　　83

　　84

　　85

　　86

　　87

　　88

　　89

　　90

　　91

　　92

　　93

　　94

　　95

　　96

　　97

　　98

　　99

　　100

　　101

　　102

　　103

　　104

　　105

　　106

　　107

　　108

　　109

　　110

　　111

　　112

　　113

　　114

　　115

　　116

　　117

　　118

　　119

　　120

　　121

　　122

　　123

　　124

　　125

　　126

　　127

　　128

　　129

　　130

　　131

　　132

　　133

　　134

　　135

　　136

　　137

　　138

　　139

　　140

　　141

　　142

　　143

　　144

　　145

　　146

　　147

　　148

　　149

　　150

　　151

　　152

　　153

　　154

　　155

　　156

　　157

　　158

　　159

　　<%@ 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">

　　

　　<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

　　

　　<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"/>

　　

　　<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

　　

　　<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"www.9ask.cn/xiamen/>

　　</div>

　　</div>

　　</div>

　　</div>

　　</body>

　　</html>

帐号		自动登录	找回密码
密码			注册论坛

BootStrap轻松实现微信页面开发代码分享

相关帖子