20130121-使用Grails Bootstrap Plugin实现界面美化

来源:互联网 发布:ip网络广播系统破解版 编辑:程序博客网 时间:2024/05/16 18:02

开发环境

  • 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 moment11                this is the default page, feel free to modify it to either redirect to a controller or display whatever12                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">
  • 好像差不多了
原创粉丝点击