为什么使用 Struts2-Boostrap-Plugin 会严重渲染 Bootstrap 的表单元素？答案

【问题标题】：Why are Bootstrap's form elements rendered terribly with Struts2-Boostrap-Plugin?为什么使用 Struts2-Boostrap-Plugin 会严重渲染 Bootstrap 的表单元素？
【发布时间】：2015-06-18 17:17:40
【问题描述】：

当我添加 struts 标签时，格式消失了。我该怎么办？

这是我的代码：

    <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>

这是它的渲染方式。问题是由于struts标签。我已经包含了 struts-bootstrap jar。可能的错误是什么？

【问题讨论】：

标签： html twitter-bootstrap jsp struts2 struts2-bootstrap-plugin

【解决方案1】：

Struts2 使用Themes 从标签生成 HTML：选择不同的主题，输出不同的 HTML。

默认主题是 XHTML，它会在您的元素周围生成 <td>、<label> 和其他内容。

通常，I recommend 使用 simple 主题，该主题几乎不会生成额外的代码，并且将使您的代码按原样运行强>。把这个常量放到struts.xml中查看一下：

<constant name="struts.ui.theme" value="simple" />

但是在你的情况下，既然你说你已经在你的项目中包含了Struts2-bootstrap-plugin，那么......只需使用它！您没有在代码中使用它...包括 JAR 是不够的，您需要将 bootstrap 主题设置为默认主题：

<constant name="struts.ui.theme" value="bootstrap" />

并声明 struts-bootstrap 标记库以使用<sb:head/> 标记，如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>

然后删除您手动编写的所有 HTML，并开始使用该插件。

【讨论】：

你能告诉我如何使用插件而不是编写手动代码吗？
只需在表单或项目中使用 struts 标签，并激活引导主题。他们会为你生成代码，这就是插件的目标