为什么使用 Struts2-Boostrap-Plugin 会严重渲染 Bootstrap 的表单元素?-前端问题

Why are Bootstrap#39;s form elements rendered terribly with Struts2-Boostrap-Plugin?(为什么使用 Struts2-Boostrap-Plugin 会严重渲染 Bootstrap 的表单元素?)

本文介绍了为什么使用 Struts2-Boostrap-Plugin 会严重渲染 Bootstrap 的表单元素?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

这是我的代码:

 <div class="panel-body" style="background-color:;"><div对齐=中心"><字体大小=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>用户 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"><标签>名称</标签></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>地址</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>出生日期</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>密码</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>电子邮件 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>专业化</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>专业化</label></div><s:file name="Image" class="form-control" id="Image" key="Image"label="选择要更改照片的文件" 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"><跨度class="glyphicon glyphicon-repeat"></span>后退</a></div></div></s:form></字体></div></div></div>

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

解决方案

Struts2 使用 Themes 从标签生成 HTML:一个不同的选择的主题，输出中的不同 HTML.

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

通常，我推荐使用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/> 标记，如官方文档:

<%@ taglib prefix="s" uri="/struts-tags" %><%@ taglib 前缀="sb" uri="/struts-bootstrap-tags" %><!DOCTYPE html><html lang="zh"><头>...<!-- Le HTML5 shim，用于 IE6-8 对 HTML 元素的支持 --><!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--><sb:head/></头><身体>...</身体></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.

这篇关于为什么使用 Struts2-Boostrap-Plugin 会严重渲染 Bootstrap 的表单元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！