我有一个简单的 Spring MVC 4.x(磁贴)场景。然而,在响应 URI 的地方显示了一个表单,Bootstrap 样式没有启动:
JSP:
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<br/><br/><br/>
<form:form modelAttribute="car" method="post">
<div class="form-group">
<label for="title">Make</label>
<form:input path="make"/>
</div>
<div class="form-group">
<label for="isbn">Model (Long Label)</label>
<form:input path="model"/>
</div>
<div class="form-group">
<label for="isbn">Color</label>
<form:input path="color"/>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form:form>
呈现的 HTML:
<body>
<div class="container">
<div class="row">
<div class="header">
</div>
<div id="main-content-container">
<!-- main body -->
<br/><br/><br/>
<form id="car" action="/libms/carsx" method="post">
<div class="form-group">
<label for="title">Make</label>
<input id="make" name="make" type="text" value=""/>
</div>
<div class="form-group">
<label for="isbn">Model (Long Label)</label>
<input id="model" name="model" type="text" value=""/>
</div>
<div class="form-group">
<label for="isbn">Color</label>
<input id="color" name="color" type="text" value=""/>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<div class="footer">
</div>
</div>
</div>
</body>
在屏幕上看起来像这样:
我已经验证了 Spring 的 form:form 是否被删除并且 <form>
被使用,样式开始。
最佳答案
您需要在页面上包含 jquery 和 bootstrap。例如:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>
您可能还想使用其他一些 Bootstrap 元素,例如 cssClass。
例如:
<form:form modelAttribute="car" method="post">
...可以更改为:
<form:form modelAttribute="car" cssClass="form-horizontal" method="post">
和:
<label for="title">Make</label>
...可以更改为:
<label for="title" class="col-sm-2 control-label">Make</label>
和:
<form:input path="make"/>
...可以更改为:
<div class="col-sm-2">
<form:input path="make" cssClass="form-control"/>
</div>
正如您提到的,Spring 表单功能也会启动,因为您也包含了 Spring 表单标签库。
关于css - Bootstrap 3.2 不会设计 Spring MVC 形式 :form,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28747291/