Question

My Grails（2.4.2）应用程序在其中一个GSP上有一个简单的表单，它使用Bootstrap进行样式化：

<!DOCTYPE html>
<html>
<head>
    <!-- Head omitted for brevity. -->
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-8 text-center">
                <h1 class="strong-primary">Sign in to continue to MyApp.</h1>
            </div>
            <div class="col-md-4 text-center">
                <form role="form">
                    <div class="form-group">
                        <input type="email" class="form-control" id="signin-email" placeholder="Your email">
                    </div>
                    <div class="form-group">
                        <input type="password" class="form-control" id="signin-password" placeholder="Password">
                    </div>
                    <button type="submit" class="btn form-control btn-lg btn-success">Sign in</button>
                    <div class="form-group" style="text-align: left;"><a href="#">Need help?</a></div>
                </form>
            </div>
        </div>
    </div>
</body>
</html>

当用户点击＆＃34; 登录＆＃34;按钮，应执行FizzController#signin()操作。我很想将GSP表格更改为：

<g:form controller="fizz" action="signin">
    <div class="form-group">
        <input type="email" class="form-control" id="signin-email" placeholder="Your email">
    </div>
    <div class="form-group">
        <input type="password" class="form-control" id="signin-password" placeholder="Password">
    </div>
    <g:submitButton name="submit" value="Sign in" />
    <div class="form-group" style="text-align: left;"><a href="#">Need help?</a></div>
</g:form>

但是我在按钮上丢失了form role="form"声明和样式（btn form-control btn-lg btn-success）类。

如何将<g:form>和<g:submitButton>与我的Bootstrap样式合并？

Answer 1

没有什么可以阻止您向标准<g:>标记库的输出添加其他属性和值。

例如：

<g:form controller="fizz" action="signin" role="form" class="someClass">

以上内容将包括出现的两个附加属性role和class。这适用于Grails中几乎所有（如果不是全部）标准标签。

如果您想查看outputAttributes中实际实现的方式，可以查看内置表单标记库的源代码。

Answer 2

将样式应用于动态生成的页面可能很难通过样式化静态HTML页面来实现。我遇到的一个问题是正确地将样式应用于Grails中的渲染模板。如果您的项目使用呈现的模板来显示表单，请记住将Bootstrap .form类应用于父视图的<g:form>标记，如@Joshua Moore的回答中所述。

样式看起来类似于：

<g:form id='myId' class='form-horizontal'> <g:render template='myFormTemplate' model='yourModelInformationHere'/> </g:form>

通过这种方式，可以在基础模板上使用.form-group类，并且由于已经声明了.form-horizontal类，因此呈现的页面将是正确的。

造型Grails g：form和g：提交

2 个答案: