Bootstrap框架----新建示例--各种input

我们在之前的文章中已经在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>  

<!-- 去除safari自带的input样式 -->
<style>
input::-webkit-contacts-auto-fill-button {
? visibility: hidden;
? display: none !important;
? pointer-events: none;
? position: absolute;
? right: 0;
}
</style>?

所以要去掉。