基本问题:引导模板显示错误

我对Grails/Bootstrap/HTML和一般的web编程都很陌生。我不是it人员，但我必须为一个研究项目实现一个小的监测网站。我很确定我的问题有一个简单的解决方案——如果有人能帮助我，我将非常感激!

我正在使用IntelliJ与Grails 3，我正试图将SB Admin2 Bootstrap模板从Start Bootstrap集成到我的项目。

我的问题是，网站没有显示，因为它应该。首先，我试着遵循这个教程http://grails.asia/how-to-apply-a-commercial-bootstrap-theme-to-your-grails-application/，但它不适合我-不知道我在哪里失败了。然后我将index.html内容复制到我的gsp文件中。首先只有文本显示，然后我从这个帖子引导模板没有得到显示的答案，并添加了一个链接到BootstrapCDN -它工作了。但事实并非如此。截图

现在我的布局gsp文件的头看起来如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>SB Admin 2 -Bootstrap Admin Template</title>
    <!-- Bootstrap Core CSS -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- MetisMenu CSS -->
    <link href="../vendor/metisMenu/metisMenu.min.css" rel="stylesheet">
    <!-- Custom CSS -->
    <link href="../dist/css/sb-admin-2.css" rel="stylesheet">
    <!-- Morris Charts CSS -->
    <link href="../vendor/morrisjs/morris.css" rel="stylesheet">
    <!-- Custom Fonts -->
    <link href="../vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

希望有人能帮助我!提前感谢!

edit1:如果我在html文件中使用IntelliJ预览，它会完美地工作。

首先，我看到你在javascript等的链接中使用了相对路径。

    <link href="../dist/css/sb-admin-2.css" rel="stylesheet">

我更喜欢用绝对的

    <link href="${request.contextPath}/css/sb-admin-2.css" rel="stylesheet">

我在不同的Grails应用程序中使用了一些Bootstrap-Layouts(在一个应用程序中甚至是sb-admin)。顺便说一句，让我试着解释一下我的方法。似乎它几乎与你的第一个链接相同，但另一个描述可能会有所帮助)…:

复制index.html到views->layout->main.gsp
将例如g:layoutBody放置在主界面的适当位置。GSP页面并删除对应用程序无用的元素。
```
<div id="page-wrapper">
    <g:layoutBody/>
</div>

```
复制javascript，图像等到web-app目录，并检查主目录中的引用。GSP布局，他们引用javascript等通过
```
<script src="${request.contextPath}/js/bootstrap.min.js"></script>
```

之后，您的视图可能看起来像这样:

<%@ page import="urlaub.Employee" %>
<!DOCTYPE html>
<html>
    <head>
        <meta name="layout" content="main">
        <g:set var="entityName" value="${message(code: 'employee.label', default: 'Employee')}" />
        <title><g:message code="default.list.label" args="[entityName]" /></title>
    </head>
    <body>
        <g:if test="${session.user.admin}">
            <div class="row">
                <g:link class="btn btn-primary btn-flat" action="create"><g:message code="default.new.label" args="[entityName]" /></g:link>
            </div>
        </g:if>
        <g:render template="/flash_message" bean="${flash}" />
        <div class="row">
            <h1><g:message code="default.list.label" args="[entityName]" /></h1>
            <hr>
        </div>

Grails 3附带了资产管道插件来管理静态资产，最小化它们，等等。检查它的文档。在你的情况下，你应该把你的资源移动到相应的资源文件夹(javascript，样式表，图像)到de assets文件夹。

例如，要包含放置在assets/stylesheets/bootstrap/bootstrap.min.css中的css，你必须在你的gsp中包含以下内容:

<asset:stylesheet href="bootstrap/bootstrap.min.css"/>

javascript和assetPath的另一个例子:

<script type="text/javascript" src="${assetPath(src:'register.js')}"></script>

相关内容

最新更新

热门标签：