`
lijingzhi
  • 浏览: 44244 次
  • 性别: Icon_minigender_1
  • 来自: 珠海
社区版块
存档分类
最新评论

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

 
阅读更多

开发环境

  • SpringSource Tool Suite 3.1.0
  • Grails2.1.1

环境搭建

  • 直接用STS新建一个example-bootstrap的grails项目，或者>$grails create-app exampl-bootstrap
  • 将bootstrap插件添加到项目中，在官方文档上也可以看到，添加插件有两种方式：
    • >$grails install-plugintwitter-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">
  • 好像差不多了
分享到：
| 页面布局范例-固定header、footer
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    twitter-bootstrap

    Twitter Bootstrap 可以与 Grails 结合，通过 Grails 插件 `twitter-bootstrap-grails-plugin`，方便地在 Grails 应用中使用 Bootstrap。该插件将Bootstrap资源（CSS、JS 文件）自动引入项目，同时提供Grails标签库...

    grails-core源码

    `PluginManager`负责管理插件，通过`PluginMetaClass`动态扩展Grails应用的功能。每个插件都有自己的生命周期方法，可以在特定的生命周期阶段执行自定义操作。 四、依赖注入（Dependency Injection） Grails采用...

    grails-quartz-0.4.1

    而在Groovy和Grails的世界里，Grails Quartz插件为开发者提供了一个无缝集成Quartz的功能，使得在Grails应用中实现定时任务变得简单易行。本文将深入探讨Grails Quartz 0.4.1版本的特性和使用方法。 一、Grails ...

    grails-sb-admin2-template:模板Grails的可配置模板SB-Admin2（http

    通过以上知识点，我们可以了解到如何在Grails项目中利用Grails-SB-Admin2-Template插件快速构建美观且功能强大的后台管理界面，同时也了解到了Grails框架和SB-Admin2模板的基本特性和使用方法。

    grails-scaffold-extjs

    Grails 插件，用于使用 ExtJS 前端和 REST 后端生成工作演示。 创建演示 需要覆盖脚手架配置：添加到 Config.groovy grails.plugin.scaffold.core.folders = ['backend':'', 'frontendExtjs':'extjs/'] 命令：...

    Grails中集成GWT中文资料

    通过命令`grails create-app GwtTutorial`创建一个新的Grails应用，然后使用`grails install-plugin gwt`安装GWT插件。本教程使用的Grails版本为1.0.3，GWT为1.4，GWT插件为0.2.4，但这些版本可能随时间更新。 2. *...

    GWTGrailsTutorial 实面gwt和grails groovy集成

    现在你已经设置了Grails和GWT的集成，接下来可以使用GWT的强类型、面向对象的API来创建用户界面。GWT允许你在Java中编写客户端代码，然后编译为高效的JavaScript，可在浏览器中运行。在Grails应用中，GWT模块通常...

Magicbox
Global site tag (gtag.js) - Google Analytics