使用Grails Bootstrap Plugin实现界面美化（作者：NEO）

最新推荐文章于 2018-09-08 14:51:53 发布

转载最新推荐文章于 2018-09-08 14:51:53 发布 · 2.8k 阅读

编程专栏收录该内容

26 篇文章

订阅专栏

本文详细介绍了如何使用Grails框架和Bootstrap库快速搭建一个Web应用，包括环境搭建、引入Bootstrap样式、修改主页样式、增加菜单、页脚和工作区域信息，并通过实例展示了最终效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

开发环境

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>&copy; 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>

修改main.gsp，增加样式信息，调整一下位置

 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>

删除grails原来的样式信息

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