Javascript 无法将Twitter引导添加到grails项目-初学者_Javascript_Html_Twitter Bootstrap_Grails

Javascript 无法将Twitter引导添加到grails项目-初学者

javascript html twitter-bootstrap grails

Javascript 无法将Twitter引导添加到grails项目-初学者,javascript,html,twitter-bootstrap,grails,Javascript,Html,Twitter Bootstrap,Grails,在BuildCOnfig.groovy下，我添加了以下内容 plugins { ... runtime ":twitter-bootstrap:3.0.3" ... } 此后，我编辑了我的index.html代码，如下所示（我从bootstrap本身中找到了这个代码示例）引导程序的封面模板掩蔽盖上你的书页。封面是一个单页的建筑模板简单和美丽的主页。下载、编辑文本并添加您自己的全屏背景照片，使其成为您自己的盖模板，通过首先，您应

在

BuildCOnfig.groovy

下，我添加了以下内容

plugins {
     ...
     runtime ":twitter-bootstrap:3.0.3"
     ...
}

此后，我编辑了我的

index.html

代码，如下所示（我从

bootstrap

本身中找到了这个代码示例）


引导程序的封面模板
掩蔽





盖上你的书页。
封面是一个单页的建筑模板
简单和美丽的主页。下载、编辑文本并添加
您自己的全屏背景照片，使其成为您自己的



盖模板，
通过

首先，您应该将插件版本升级到3.1.1：

plugins {
     ...
     compile ":twitter-bootstrap:3.1.1"
     ...
}

其次，由于您使用的是Grails引导插件，因此需要使用资源模块来包含它。此外，您不需要手动包含jQuery，因为它将被插件包含。下面是一个简单的入门模板示例，它是为bootstrap插件和Grails正确设置的

<!DOCTYPE html>
<html>
  <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>My example bootstrap page</title>

    <r:require modules="bootstrap"/>
    <r:layoutResources/>

    <link rel="shortcut icon" href="${resource(dir: 'images', file: 'favicon.ico'}">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[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>

  <body>
    <div class="container">
      <p>My fantastic site goes here.</p>
    </div>

    <r:layoutResources/>
  </body>
</html>


我的示例引导页面
我的精彩网站就在这里

我强烈建议您阅读有关的内容，以了解如何包含CSS之类的资产。还值得注意的是，插件的说明解释了上述所有内容。

您使用的是哪个版本的grails？您是否使用资产管道插件而不是资源插件？（我很好奇，因为你的favicon指向一个名为“资产”的目录——但这可能是巧合）并且“cover.css”（头部的最后一个链接标记）传递正确吗？我得到了这个警告

模块未找到：org.grails.plugins#twitter bootstrap；3.1.1

更新了答案，使用“编译”而不是“运行时”。您可能还需要清理和刷新依赖项。如何刷新依赖项。我试着清理和重建应用程序。但是没有任何效果。从grails命令行运行“刷新依赖项”或者退出grails命令行并启动它，然后运行“清理”然后“编译”。它说，

grails刷新依赖项

遇到了一个问题。但是当我添加

compile'：twitter引导程序：3.0.3'

时，它就可以工作了

<!DOCTYPE html>
<html>
  <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>My example bootstrap page</title>

    <r:require modules="bootstrap"/>
    <r:layoutResources/>

    <link rel="shortcut icon" href="${resource(dir: 'images', file: 'favicon.ico'}">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[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>

  <body>
    <div class="container">
      <p>My fantastic site goes here.</p>
    </div>

    <r:layoutResources/>
  </body>
</html>