Основные проблемы: шаблоны Bootstrap отображаются неправильно Grails 3

Я довольно новичок в Grails / Bootstrap / HTML и веб-программировании в целом. Я не IT-парень, но я должен реализовать небольшой веб-сайт мониторинга для исследовательского проекта. Я уверен, что есть простое решение моей проблемы - я был бы очень признателен, если бы кто-то мог мне помочь!

Я использую IntelliJ с Grails 3, и я пытаюсь интегрировать шаблон SBAdmin Bootstrap из Start Bootstrap в мой проект.

Моя проблема заключается в том, что Веб-сайт не отображается так, как должен. Сначала я попытался следовать этому учебнику http://grails.asia/how-to-apply-a-commercial-bootstrap-theme-to-your-grails-application/, но это не сработало для меня - не знаю где я потерпел неудачу. Затем я просто скопировал содержимое index.html в файл gsp. Сначала был показан только текст, затем я последовал за ответом из этого сообщения. Шаблон Bootstrap не отображался и добавил ссылку на 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: Если я использую предварительный просмотр IntelliJ в html-файле, он отлично работает.

html,css,twitter-bootstrap,grails,grails-3.0,

0

Ответов: 2


0

Прежде всего, я видел, что вы используете относительные пути в ваших ссылках на javascripts и т. Д.

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

Я бы предпочел использовать абсолютные

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

Я использую несколько шаблонов Bootstrap в разных приложениях Grails (в одном приложении даже sb-admin). Позвольте мне попытаться объяснить мой способ (кстати, похоже, что это почти то же самое, что и ваша первая ссылка, но другое описание может немного помочь) ...:

  • скопируйте index.html в views-> layout-> main.gsp

  • поместите, например, g: layoutBody в соответствующие места на странице main.gsp, и удалите элементы, которые не полезны для вашего приложения.

    <div id="page-wrapper">
        <g:layoutBody/>
    </div>
    <!-- /#page-wrapper -->
  • копировать javascripts, изображения и т. д. в каталог веб-приложений и проверять ссылки в макете main.gsp, которые они ссылаются на javascripts и т. д. через

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

0

Grails 3 поставляется с плагином конвейера Asset для управления статическими активами, минимизацией их и т. Д., ... Проверьте его документацию . В вашем случае вы должны перенести свои активы в соответствующую папку активов (javascripts, stylesheets, images) в папку с активами.

Например, для включения css, помещенного в assets / stylesheets / bootstrap / bootstrap.min.css, вы должны включить в него gsp следующее:

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

Другой пример с javascript и assetPath:

<script type="text/javascript" src="${assetPath(src:'register.js')}"></script>
HTML, CSS, твиттер-самозагрузки, Grails, Grails-3,0,
Похожие вопросы