css - Bootstrap 3.2 不会设计 Spring MVC 形式 :form

标签 css spring twitter-bootstrap spring-mvc

我有一个简单的 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>

在屏幕上看起来像这样: enter image description here

我已经验证了 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/

相关文章:

html - rails : How can I define the size of an image in table data?

css - Font awesome 的精简版无法通过 CDN 链接获得

java - 缩写词 "Spitter"代表什么?

spring - 自定义错误页面 + spring security 3 + hasPermission

css - 如何针对特定缩放级别调整 CSS?

css - 在 rmd/rmarkdown 中格式化 h1、h2

html - 两个元素之间的空间来自哪里?

java - 如何使用spring批处理将数据库结果集转换为xml文件

javascript - Twitter Bootstrap Transition Conflict prototypejs

javascript - 在 Chrome 扩展的 iframe 中使用 Twitter Bootstrap JS