使用Grails Bootstrap Plugin实现界面美化

作者: java田园
发布时间:2015-07-02 17:26:54

开发环境

  • 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" > <![endif]-->   3 <!--[if IE 7 ]>    <html lang="en" > <![endif]-->   4 <!--[if IE 8 ]>    <html lang="en" > <![endif]-->   5 <!--[if IE 9 ]>    <html lang="en" > <![endif]-->   6 <!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" ><!--<![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"  images', file: 'favicon.ico')}" type="image/x-icon">  13         <link rel="apple-touch-icon"  images', file: 'apple-touch-icon.png')}">  14         <link rel="apple-touch-icon" sizes="114x114"  images', file: 'apple-touch-icon-retina.png')}">  15         <link rel="stylesheet"  css', file: 'main.css')}" type="text/css">  16         <link rel="stylesheet"  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 >   3             <div >   4                 <div >   5                     <a   /')}">Grails Twitter Bootstrap</a>   6                        7                     <div >   8                         <p >Logged in as <a   >Username</a></p>   9                         <ul >  10                             <li<%= request.forwardURI == "${createLink(uri: '/')}" ? ' ' : '' %>>  11                                 <a  /')}">Home</a>  12                             </li>  13                             <g:each var="c"    in="${grailsApplication.controllerClasses.sort { it.fullName } }">  14                                 <li >  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 >   6                 <p>&copy; Company 2013</p>   7             </div>   8         </div>   9           10         <r:layoutResources />  11     </body>  12 </html>
复制代码
  • 增加主要工作区域信息
复制代码
 1 ......   2         <div id="wrap" >   3             <div id="row" >   4                 <div >   5                     <div >   6                         <ul >   7                             <li >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 >  19                             <li >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 >  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"  css', file: 'main.css')}" type="text/css">          <link rel="stylesheet"  css', file: 'mobile.css')}" type="text/css">
  • 好像差不多了

标签: Bootstrap Rails
来源:http://www.cnblogs.com/javatianyuan/articles/3796821.html

推荐: