css - 样式化 Grails g :form and g:submit

标签 css twitter-bootstrap grails styling gsp

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

当用户点击“登录”按钮时,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 样式?

最佳答案

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

例如:

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

以上将包括两个附加属性 roleclass正如他们出现的那样。这适用于 Grails 中几乎所有(如果不是全部)标准标记。

如果你想看看这在 outputAttributes 中是如何实际实现的,您可以查看内置表单标签库的源代码。

关于css - 样式化 Grails g :form and g:submit,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27022386/

相关文章:

grails - 如何在Grails 3中创建自定义命令?

javascript - div宽度未调整大小

javascript - 将顶部的 td 元素与动态添加的元素对齐

jquery - 当用户滚动到某个部分时突出显示导航项

javascript - 我如何以可重用的方式创建这个 jquery?

javascript - 使用 Javascript 更改嵌套跨度类

css - 多行虚线文本下划线

css - 网页的响应能力在所有设备中

Grails Controller 的 Java 时间转换

grails - Grails:如何在日历插件中禁用日期