開發環境
- SpringSource Tool Suite 3.1.0
- Grails2.1.1
環境搭建
- 直接用STS新建一個example-bootstrap的grails項目，或者>$grails create-app exampl-bootstrap
- 將bootstrap插件添加到項目中，在官方文檔上也可以看到，添加插件有兩種方式：
- >$grails install-plugin
twitter-bootstrap
- 打開項目中conf/BuildConfig，在runtime中增加[runtime ":twitter-bootstrap:2.2.2"]插件依賴，>$grails compile
修改主頁樣式
- 引入bootstrap,打開views/layouts/main.gsp,在頁頭加入<r:require modules="bootstrap"/>
1 <!DOCTYPE html>
2 <!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
3 <!--[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]-->
4 <!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]-->
5 <!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]-->
6 <!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"><!--<![endif]-->
7 <head>
8 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
9 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
10 <title><g:layoutTitle default="Grails"/></title>
11 <meta name="viewport" content="width=device-width, initial-scale=1.0">
12 <link rel="shortcut icon" href="${resource(dir: 'images', file: 'favicon.ico')}" type="image/x-icon">
13 <link rel="apple-touch-icon" href="${resource(dir: 'images', file: 'apple-touch-icon.png')}">
14 <link rel="apple-touch-icon" sizes="114x114" href="${resource(dir: 'images', file: 'apple-touch-icon-retina.png')}">
15 <link rel="stylesheet" href="${resource(dir: 'css', file: 'main.css')}" type="text/css">
16 <link rel="stylesheet" href="${resource(dir: 'css', file: 'mobile.css')}" type="text/css">
17
18 <r:require modules="bootstrap"/>
19 <g:layoutHead/>
20 <r:layoutResources />
21 </head>
......
- >$grails run-app，可以看到bootstrap的引用已經加入了
- 修改main.gsp，達到如下效果，因菜單、子菜單和頁腳都是以後每個頁面都需要使用的，所以，都放置在main.gsp view中，只有工作區的內容隨菜單的變化而變化
![]()
1 <body>
2 <nav class="navbar navbar-fixed-top">
3 <div class="navbar-inner">
4 <div class="container-fluid">
5 <a class="brand" href="${createLink(uri: '/')}">Grails Twitter Bootstrap</a>
6
7 <div class="nav-collapse">
8 <p class="navbar-text pull-right">Logged in as <a href="#" class="navbar-link">Username</a></p>
9 <ul class="nav">
10 <li<%= request.forwardURI == "${createLink(uri: '/')}" ? ' class="active"' : '' %>>
11 <a href="${createLink(uri: '/')}">Home</a>
12 </li>
13 <g:each var="c" in="${grailsApplication.controllerClasses.sort { it.fullName } }">
14 <li class="controller">
15 <g:link controller="${c.logicalPropertyName}">${c.fullName}</g:link>
16 </li>
17 </g:each>
18 </ul>
19 </div>
20 </div>
21 </div>
22 </nav>
23
24 ......
25 </body>
1 ......
2 <div id="push"></div>
3 <hr/>
4 <div id="footer">
5 <div class="container-fluid">
6 <p>© Company 2013</p>
7 </div>
8 </div>
9
10 <r:layoutResources />
11 </body>
12 </html>
1 ......
2 <div id="wrap" class="container-fluid">
3 <div id="row" class="row-fluid">
4 <div class="span3">
5 <div class="well sidebar-nav">
6 <ul class="nav nav-list">
7 <li class="nav-header">Application Status</li>
8 <li>App version: <g:meta name="app.version"/></li>
9 <li>Grails version: <g:meta name="app.grails.version"/></li>
10 <li>Groovy version: ${org.codehaus.groovy.runtime.InvokerHelper.getVersion()}</li>
11 <li>JVM version: ${System.getProperty('java.version')}</li>
12 <li>Reloading active: ${grails.util.Environment.reloadingAgentEnabled}</li>
13 <li>Controllers: ${grailsApplication.controllerClasses.size()}</li>
14 <li>Domains: ${grailsApplication.domainClasses.size()}</li>
15 <li>Services: ${grailsApplication.serviceClasses.size()}</li>
16 <li>Tag Libraries: ${grailsApplication.tagLibClasses.size()}</li>
17 </ul>
18 <ul class="nav nav-list">
19 <li class="nav-header">Plugins List</li>
20 <g:each var="plugin" in="${applicationContext.getBean('pluginManager').allPlugins}">
21 <li>${plugin.name} - ${plugin.version}</li>
22 </g:each>
23 </ul>
24 </div>
25 </div>
26 <div class="span9">
27 <g:layoutBody/>
28 </div>
29 </div>
30 </div>
31 ......
- 因把views/index.gsp一些顯示內容移到了main.gsp，所以，打開index.gsp刪除重複內容，修改完的index.gsp如下
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta name="layout" content="main"/>
5 <title>Welcome to Grails</title>
6 </head>
7 <body>
8 <div id="page-body" role="main">
9 <h1>Welcome to Grails</h1>
10 <p>Congratulations, you have successfully started your first Grails application! At the moment
11 this is the default page, feel free to modify it to either redirect to a controller or display whatever
12 content you may choose. Below is a list of controllers that are currently deployed in this application,
13 click on each to execute its default action:</p>
14 </div>
15 </body>
16 </html>
1 <style type="text/css">
2 /*將頁腳壓低*/
3 #wrap {
4 min-height: 100%;
5 height: auto !important;
6 height: 100%;
7 /* Negative indent footer by it's height */
8 margin: 0 auto -60px;
9 }
10
11 #row {
12 padding-top: 60px;
13 }
14
15 @media (max-width: 767px) {
16 #row {
17 padding-top:0px;
18 }
19 }
20
21 #push {
22 padding-top:40px;
23 }
24 </style>
<link rel="stylesheet" href="${resource(dir: 'css', file: 'main.css')}" type="text/css">
<link rel="stylesheet" href="${resource(dir: 'css', file: 'mobile.css')}" type="text/css">
