SSM框架实战系列之十三_H-ui框架之一

　　SSM框架实战系列之十三_H-ui框架之一

　　对于很多Java程序员来说，让他们写代码是没问题，但要他们做出一个相对好看的页面，那是相当地困难。

　　那么一些快速开发框架对于Java程序员来说无疑是一个福音了。

　　H-ui框架就是这样的一个快速开发框架，它是由国人开发的，基于Bootstrap框架并整合了一些常用Web组件的一个快速开发框架。

　　使用H-ui框架，不需要程序员写界面样式，就能开发出很漂亮的界面了。

　　我们来欣赏几张图：

　　在后续的章节中，我们会使用H-ui陆续开发一些模块，逐步深入地了解H-ui框架的细节。

　　在本节中，主要探讨H-ui框架的登录页。

　　一、H-ui框架的下载

　　进H-ui的官网：http://www.h-ui.net/H-ui.admin.shtml，即可下载。

　　下载后，解压文件，可以看到如下的目录结构：

　　其中，static目录为H-ui框架的核心组件，lib目录为H-ui框架整合的一些其它Web组件，temp目录为临时目录，其余文件都是纯HTML页面，是演示用的，我们做页面时，可以从演示页面找到相似的界面并进行模仿。

　　二、在Eclipse中应用H-ui框架

　　将static、lib、temp目录全部复制到Eclilpse项目的Web目录之下，即可使用H-ui框架，目录结构如下图：

　　三、登录页代码解析

　　下面我们来制作登录页。

　　这时，只需将H-ui框架中自带的login.html中的所有代码复制到login.jsp中即可。

　　我们来分析一下login.html中的代码：

  

    

      

        
        

          
        
      
      

        
        

          
        
      
      

        

          
           看不清，换一张 
      
      

        

          
            
            使我保持登录状态
        
      
      

        

          
          
        
      
    
  

Copyright 你的公司名称 by H-ui.admin v3.1
 




 
  

 
  
　　假如IE版本低于9，则引入另外两个脚本，以便在低版本IE上实现HTML5和响应式设计。
 
  

 
  
　　4、界面样式
 
  
　　观察以下的HTML代码：
 
  
 
  
    

      

        
        

          
        
      
      ......
 
  
 
  

 　　(1) 表单通常添加类样式：form。还有一个类样式form-horizontal，表示水平表单，即表单元素是水平排列的。通常Bootstrap的表单元素是垂直排列的。 
  
　　(2) 每一行表单元素都放在一个div中，类样式为：row cl。row样式说明这是一行，它使用浮动让内部元素水平排成一行。cl表示clearfix，它使用了清除浮动，做到了左右清除浮动并重新计算盒子高度。
 
  
　　(3) 标题使用form-label样式，输入框使用formControls样式，form-label样式使得标签右对齐，formControls样式使得表单元素的宽度充满容器。要了解详情，可以打开static/h-ui/css/H-ui.css，使用文字查找，根据样式名找到样式的定义，进行详细了解。
 
  
　　(4) 栅格系统，col-xs-3与col-x-8，这两个样式都是Bootstrap的栅格系统样式。Bootstrap栅格系统将页面分成十二等分，如果你想让一个元素占用1/12页面，可以设置样式col-xs-1，占用2/12页面，设置样式col-xs-2，......。然后Bootstrap还可以针对不同尺寸的设备进行定制，它总共有4种设备尺寸：xs（extra small，超小）、sm（small，小）、md（middle，中等）、bg（big，大），例如你想在手机上一行显示2张图片，而在较大设备上一行显示4张图片，你就可以对一个列设置样式：col-xs-6 col-bg-3，这个样式表示此列在超小设备上，占用6/12，在大设备上，占用3/12。如果只指定一种尺寸类型例如xs，那么其它类型的设备沿用这个比例。
 
  
　　还有一个样式col-xs-offset-3，这个样式表示该元素缩进3个栅格显示。在不使用表格布局时，为了对齐，应该善用Bootstrap的栅格系统。
 
  

 
  
　　至此，我们大致了解了H-ui框架的登录页的页面构成，在后面一讲中，我们将会编写后台代码，以实现登录功能。