Question

在BuildCOnfig.groovy下，我添加了以下内容

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

此后，我编辑了我的index.html代码，如下所示（我从bootstrap本身找到了此代码示例）。

<!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="">
<link rel="shortcut icon" href="../../assets/ico/favicon.ico">

<title>Cover Template for Bootstrap</title>
<r:layoutResources/>
<!-- Bootstrap core CSS -->



<!-- Custom styles for this template -->
<link href="cover.css" rel="stylesheet">

<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

<!-- 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>
<r:layoutResources/>
    <div class="site-wrapper">

        <div class="site-wrapper-inner">

            <div class="cover-container">

                <div class="masthead clearfix">
                    <div class="inner">
                        <h3 class="masthead-brand">Cover</h3>
                        <ul class="nav masthead-nav">
                            <li class="active"><a href="#">Home</a></li>
                            <li><a href="#">Features</a></li>
                            <li><a href="#">Contact</a></li>
                        </ul>
                    </div>
                </div>

                <div class="inner cover">
                    <h1 class="cover-heading">Cover your page.</h1>
                    <p class="lead">Cover is a one-page template for building
                        simple and beautiful home pages. Download, edit the text, and add
                        your own fullscreen background photo to make it your own.</p>
                    <p class="lead">
                        <a href="http://google.com" class="btn btn-lg btn-default">Learn more</a>
                    </p>
                </div>

                <div class="mastfoot">
                    <div class="inner">
                        <p>
                            Cover template for <a href="http://getbootstrap.com">Bootstrap</a>,
                            by <a href="https://twitter.com/mdo">@mdo</a>.
                        </p>
                    </div>
                </div>

            </div>

        </div>

    </div>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script
        src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    </body>
</html>

Answer 1

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

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

其次，由于您使用的是Grails的bootstrap插件，因此您需要使用资源模块来包含它。此外，您不需要手动包含jQuery，因为它将包含在插件中。下面是一个初始化模板的简单示例，该模板可以正确设置引导插件和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>

我强烈建议您阅读resource tag以了解如何包含CSS等资源。同样值得注意的是，该插件的documentation解释了上述所有内容。

无法将Twitter-bootstrap添加到grails项目 - 初学者

1 个答案: