我们在之前的文章中已经在SpringMVC基础框架的基础上应用了BootStrap的后台框架，在此基础上记录 新建示例。
应用bootstrap模板
基础项目源码下载地址为:
SpringMVC+Shiro+MongoDB+BootStrap基础框架
我们在基础项目中已经做好了首页index的访问。
现在就在index.jsp页面和index的路由Controller上做修改，实现 新建示例 的格式布局。
Index.jsp代码如下:
<%@ include file="./include/header.jsp"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!-- 去除number的箭头 -->
<style>
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
input[type="number"]{
-moz-appearance: textfield;
}
</style>
<!-- 去除safari自带的input样式 -->
<style>
input::-webkit-contacts-auto-fill-button {
visibility: hidden;
display: none !important;
pointer-events: none;
position: absolute;
right: 0;
}
</style>
<script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.all.min.js"></script>
<div id="page-wrapper">
<div id="page-inner">
<div class="row">
<div class="col-md-12">
<h1 class="page-header">
新增 <small>示例</small>
</h1>
</div>
</div>
<!-- /. ROW -->
<div class="col-md-10 col-sm-10 col-xs-12 " style="margin-top: 30px">
<form class="form-horizontal" id="referenceDocument" action="/add">
<input type="text" value="${referenceDocument.id}" id="id" name="id" hidden/>
<div class="form-group">
<label for="name" class="col-sm-2 control-label">编号:</label>
<div class="col-sm-10">
<input type="text" readonly="readonly" class="form-control" id="code" name="code" value="NB1234" >
</div>
</div>
<div class="form-group">
<label for="name" class="col-sm-2 control-label">作者:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" name="name" value="${referenceDocument.name}"
placeholder="期刊名">
</div>
</div>
<div class="form-group">
<label for="name" class="col-sm-2 control-label">期刊名:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="author" name="author"
value="${referenceDocument.author}"
placeholder="期刊名">
</div>
</div>
<div class="form-group">
<label for="name" class="col-sm-2 control-label">期刊名(中文):</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="cnName" name="cnName"
value="${referenceDocument.cnName}" placeholder="期刊名(中文)">
</div>
</div>
<div class="form-group">
<label for="name" class="col-sm-2 control-label">标题:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="title" name="title"
value="${referenceDocument.title}" placeholder="标题">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">摘要:</label>
<div class="col-sm-10">
<textarea id="summary" name="summary" class="form-control"
rows="8">${referenceDocument.summary}</textarea>
</div>
</div>
<div class="form-group">
<label for="name" class="col-sm-2 control-label">链接:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="link" name="link" value="${referenceDocument.link}"
placeholder="链接">
</div>
</div>
<div class="form-group">
<label for="name" class="col-sm-2 control-label">价格:</label>
<div class="col-sm-10">
<input type="number" class="form-control" id="price" name="price" value="${referenceDocument.price}"
placeholder="0">
</div>
</div>
<div class="form-group">
<label for="name" class="col-sm-2 control-label">板块:</label>
<div class="col-sm-10">
<select class="form-control" id="plate" name="plate">
<option value="0" ${referenceDocument.plate==0?'selected':''}>所有</option>
<option value="1" ${referenceDocument.plate==1?'selected':''}>汉语</option>
<option value="2" ${referenceDocument.plate==2?'selected':''}>法语</option>
<option value="3" ${referenceDocument.plate==3?'selected':''}>日语</option>
<option value="4" ${referenceDocument.plate==4?'selected':''}>英语</option>
<option value="5" ${referenceDocument.plate==5?'selected':''}>韩语</option>
</select>
</div>
</div>
<div class="form-group">
<label for="icon" class="col-sm-2 control-label">前台隐藏</label>
<div class="col-sm-10">
<label class="radio-inline">
<input type="checkbox" id="hidden" name="hidden" ${basicEntity.hidden?'checked':''}>
</label>
</div>
</div>
<div class="form-group">
<label for="icon" class="col-sm-2 control-label">算法类型</label>
<div class="col-sm-10">
<label class="radio-inline">
<input type="radio" name="algorithmType" id="algorithmType"
value="1" ${basicEntity.algorithmType==1?'checked':''} />
特征型
</label>
<label class="radio-inline">
<input type="radio" name="algorithmType" id="algorithmType"
value="2" ${basicEntity.algorithmType==2?'checked':''}/>
风险型
</label>
</div>
</div>
<div class="form-group">
<div class="col-sm-6 col-sm-offset-2">
<button type="button" class="btn btn-default cancel"
data-dismiss="modal">取消
</button>
<button type="button" class="btn btn-primary save"
data-loading-text="Saving...">确认
</button>
</div>
</div>
</form>
</div>
<!-- /. ROW -->
</div>
<!-- /. PAGE INNER -->
</div>
<!-- /. PAGE WRAPPER -->
<%@ include file="./include/footer.jsp"%>
<script type="text/javascript">
</script>
</body>
</html>
效果如图:
需要注意的是这里使用了 两段样式:
<!-- 去除number的箭头 -->
<style>
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
input[type="number"]{
-moz-appearance: textfield;
}
</style>
用于去除num类型的input的 上下箭头，因为有上下箭头 滑轮滚动时 数值会变 容易误操作，所以一般会去掉。
<!-- 去除safari自带的input样式 -->
<style>
input::-webkit-contacts-auto-fill-button {
visibility: hidden;
display: none !important;
pointer-events: none;
position: absolute;
right: 0;
}
</style>
用于去除 safari自定义的input样式，我们的input在safari浏览器使用时，safari会自动给它加上 联系人等功能，占位置。
所以要去掉。