为什么Bootstrap的表单元素在Struts2-Boostrap-Plugin中表现得非常糟糕? [英] Why are Bootstrap's form elements rendered terribly with Struts2-Boostrap-Plugin?
问题描述
当我添加struts标签时,格式化会消失。我该怎么办?
这是我的代码:
< ; div class =panel-bodystyle =background-color:;>
< div align =center>
< font size = 3> < s:form id =FormAddUsername =FormAddUser
action =AddUsermethod =postclass =form-horizontal>
< div class =rowalign =center>
< div class =col-sm-6>
< div class =col-sm-4align =right>
< label>用户ID< / label>
< / div>
< / div>
< / div>
< br>
< div class =rowalign =center>
< div class =col-sm-6>
< div class =col-sm-4align =right>
< label>名称< / label>
< / div>
< / div>
< / div>
< br>
< div class =rowalign =center>
< div class =col-sm-6>
< div class =col-sm-4align =right>
< label>地址< / label>
< / div>
< / div>
< / div>
< br>
< div class =rowalign =center>
< div class =col-sm-6>
< div class =col-sm-4align =right>
< label>出生日期< / label>
< / div>
< / div>
< / div>
< br>
< div class =rowalign =center>
< div class =col-sm-6>
< div class =col-sm-4align =right>
< label>密码< / label>
< / div>
< / div>
< / div>
< br>
< div class =rowalign =center>
< div class =col-sm-6>
< div class =col-sm-4align =right>
< label>电子邮件ID< / label>
< / div>
placeholder =firstname.lastname@iiitb.org>< / s:textfield>
< / div>
< / div>
< br>
< div class =rowalign =center>
< div class =col-sm-6>
< div class =col-sm-4align =right>
< label>专业化< / label>
< / div>
< / s:textfield>< / s:textfield>
< / div>
< / div>
< br>
< div class =rowalign =center>
< div class =col-sm-6>
< div class =col-sm-4align =right>
< label>专业化< / label>
< / div>
label =选择要改变照片的文件enctype = 多部分/格式数据 >< /秒:文件>
< / div>
< / div>
< br>
< div class =rowalign =center>
< div class =col-sm-7>
< a href =admin.jspclass =btn btn-primary btn-md> < span
class =glyphicon glyphicon-repeat>< / span>返回
< / a>
< / div>
< / div>
< / s:form>
< / font>
< / div>
< / div>
< / div>
这是它呈现的方式。问题在于struts标签。我已经包含了struts-bootstrap jar。可能的错误是什么?
Struts2使用主题从标签生成HTML:选择不同的主题,输出不同的HTML。
默认主题是 XHTML ,它生成< td>
,< label>
和其他你的元素。
通常,我建议使用简单主题,该主题几乎不会生成其他代码,会使您的代码正常工作 。把这个常量放到struts.xml中去检查它:
$ b
< constant name =struts .ui.themevalue =simple/>
但就你而言,既然你说过你已经包含了 Struts2-bootstrap-plugin 在你的项目中,然后......简单地使用它!您没有在代码中使用它......只包括JAR是不够的,您需要将 bootstrap 主题设置为默认主题:
< pre class =lang-xml prettyprint-override>
< constant name =struts.ui.themevalue =bootstrap/>
并声明struts-bootstrap taglib使用< sb:head />
标记,如官方文档:
$ b
<%@ taglib前缀=suri =/ struts-tags%>
<%@ taglib prefix =sburi =/ struts-bootstrap-tags%>
<!DOCTYPE html>
< html lang =en>
< head>
...
<! - Le HTML5 shim,用于支持HTML元素的IE6-8 - >
<! - [if lt IE 9]>
< script src =http://html5shim.googlecode.com/svn/trunk/html5.js>< / script>
<![endif] - >
< sb:head />
< / head>
< body>
...
< / body>
< / html>
然后删除您手动编写的所有HTML,然后开始使用该插件。
When I add struts tags, the formatting disappears. What do I do?
This is my code:
<div class="panel-body" style="background-color:;">
<div align="center">
<font size=3> <s:form id="FormAddUser" name="FormAddUser"
action="AddUser" method="post" class="form-horizontal">
<div class="row" align="center">
<div class="col-sm-6">
<div class="col-sm-4" align="right">
<label>User ID</label>
</div>
<s:textfield name="UserId" class="form-control"></s:textfield>
</div>
</div>
<br>
<div class="row" align="center">
<div class="col-sm-6">
<div class="col-sm-4" align="right">
<label>Name</label>
</div>
<s:textfield name="Name" class="form-control"></s:textfield>
</div>
</div>
<br>
<div class="row" align="center">
<div class="col-sm-6">
<div class="col-sm-4" align="right">
<label>Address</label>
</div>
<s:textarea name="Address" class="form-control"></s:textarea>
</div>
</div>
<br>
<div class="row" align="center">
<div class="col-sm-6">
<div class="col-sm-4" align="right">
<label>Birth date</label>
</div>
<s:textfield name="DOB" class="form-control" placeholder="dd/mm/yy"></s:textfield>
</div>
</div>
<br>
<div class="row" align="center">
<div class="col-sm-6">
<div class="col-sm-4" align="right">
<label>Password</label>
</div>
<s:password name="Password" class="form-control"></s:password>
</div>
</div>
<br>
<div class="row" align="center">
<div class="col-sm-6">
<div class="col-sm-4" align="right">
<label>Email Id</label>
</div>
<s:textfield name="EmailId" class="form-control"
placeholder="firstname.lastname@iiitb.org"></s:textfield>
</div>
</div>
<br>
<div class="row" align="center">
<div class="col-sm-6">
<div class="col-sm-4" align="right">
<label>Specialization</label>
</div>
<s:textfield name="Specialization" class="form-control"
placeholder="CS/DS/NC/SE"></s:textfield>
</div>
</div>
<br>
<div class="row" align="center">
<div class="col-sm-6">
<div class="col-sm-4" align="right">
<label>Specialization</label>
</div>
<s:file name="Image" class="form-control" id="Image" key="Image"
label="Select a File to change photo" enctype="multipart/form-data"></s:file>
</div>
</div>
<br>
<div class="row" align="center">
<div class="col-sm-7">
<s:submit class="btn btn-primary" label="Add" onclick="check()" />
<a href="admin.jsp" class="btn btn-primary btn-md"> <span
class="glyphicon glyphicon-repeat"></span> Back
</a>
</div>
</div>
</s:form>
</font>
</div>
</div>
</div>
This is how it renders. The problem is because of the struts tags. I have included the struts-bootstrap jar. What could be the possible error?
Struts2 uses Themes to generate HTML from Tags: a different theme chosen, a different HTML in output.
The default theme is XHTML, that generates <td>
, <label>
and other stuff around your elements.
Usually, I recommend to use the simple theme, that generates almost no additional code, and that would make your code work as-is. Put this constant in struts.xml to check it out:
<constant name="struts.ui.theme" value="simple" />
But in your case, since you said you've included the Struts2-bootstrap-plugin in your project, then... simply use it ! You are NOT using it in your code... including the JAR is not enough, you need to set the bootstrap theme as the default one:
<constant name="struts.ui.theme" value="bootstrap" />
and declare the struts-bootstrap taglib to use the <sb:head/>
tag, as described in the official documentation:
<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ taglib prefix="sb" uri="/struts-bootstrap-tags" %>
<!DOCTYPE html>
<html lang="en">
<head>
...
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<sb:head/>
</head>
<body>
...
</body>
</html>
Then remove all the HTML that you've written manually, and start using the plugin.
这篇关于为什么Bootstrap的表单元素在Struts2-Boostrap-Plugin中表现得非常糟糕?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!