0

grails 3 带有 bootstrap 3。我想基于 grails 4 创建自己的 main.gsp 布局，即将默认的 main.gsp 替换为以下内容：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <asset:link rel="icon" href="favicon.ico" type="image/x-ico" />
    <title><g:layoutTitle default="DAM"/></title>
    <g:layoutHead/>
</head>
<body>
<g:layoutBody/>
<div class="footer" role="contentinfo"></div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

默认 main.gsp 的底部是这样的：

<div id="spinner" class="spinner" style="display:none;">
    <g:message code="spinner.alt" default="Loading&hellip;"/>
</div>

<asset:javascript src="application.js"/>

问题是，我应该包括这些吗？在我使用 grails 的这些年里，我从未见过 UI 中出现微调器，所以不确定这是否真的有效？

我猜我不想要application.js？

也不确定这是做什么用的，因为它没有内容：

<div class="footer" role="contentinfo"></div>
4

1 回答 1

1

问题是，我应该包括这些吗？

仅当您想要显示微调器时。默认main.css定义微调器的样式：

.spinner {
    background: url(../images/spinner.gif) 50% 50% no-repeat transparent;
    height: 16px;
    width: 16px;
    padding: 0.5em;
    position: absolute;
    right: 0;
    top: 0;
    text-indent: -9999px;
}

调整你认为合适的。

默认的站点网格布局包含div具有该样式的 a 并display设置为，none因此不会显示。

<div id="spinner" class="spinner" style="display:none;">
    <g:message code="spinner.alt" default="Loading&hellip;"/>
</div>

一个典型的用法是，如果您有一些 Javascript 执行某个操作，以便您希望在该操作发生时显示微调器，那么 Javascript 可以设置该display属性，这将导致显示微调器，直到某些东西将该属性设置回到none.

在我使用 grails 的这些年里，我从未见过 UI 中出现微调器，所以不确定这是否真的有效？

除非您进行了一些可能会干扰它的更改，否则它会这样做。

我猜我不想要application.js？

很难说你是否愿意。这实际上取决于您的应用程序在做什么。application.js3.3.9 应用程序的默认设置会引入其他几个.js文件...

// This is a manifest file that'll be compiled into application.js.
//
// Any JavaScript file within this directory can be referenced here using a relative path.
//
// You're free to add application-wide JavaScript to this file, but it's generally better
// to create separate JavaScript files as needed.
//
//= require jquery-3.3.1.min
//= require bootstrap
//= require popper.min
//= require_self

如果您不希望那些被拉进来，那么您可能不想要application.js. 当然，您可以编辑application.js以包含您想要加入的任何内容。

也不确定这是做什么用的，因为它没有内容：

<div class="footer" role="contentinfo"></div>

该元素作为占位符，供您呈现常见的页脚元素。

于 2019-04-07T16:06:38.447 回答