h+ admin ui框架

H+是一个完全响应式，基于Bootstrap3.3.6最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术，她提供了诸多的强大的可以重新组合的UI组件，并集成了最新的jQuery版本(v2.1.4)，当然，也集成了很多功能强大，用途广泛的jQuery插件，她可以用于所有的Web应用程序，如网站管理后台，网站会员中心，CMS，CRM，OA等等，当然，您也可以对她进行深度定制，以做出更强系统。

h+ 演示地址 http://cn.inspinia.cn/hplus

整体效果

本篇文章是对H+这种框架进行整理，顺便了解一下标准的代码规范的写法。

一、表单：

1）、下面是一个基本表单：

现在来看这个表单的结构：

1.整个表单的外框结构是一个div,至于padding和margin,则需要大家根据实际项目的情况来设定。

2.div里面的第二部分先需要用

标签包裹，里面的每一个红色框都是一个form-group.

3.在每一个form-group里面，用label标签将标签头如“用户名，密码”等包裹起来。

4.自动登录和登录按钮的那里，一个左浮，一个右浮，对于自动登录。外面用label套住整个。然后是div里面装有input，然后是自动登录文字。

框架大致代码如下：

     
登录
     
欢迎登录本站(⊙o⊙)
     

           

                用户名
                
           
           

                密码
                
           
           

                
　　　　　　　　　　　　　　登 录
                
                
                       

　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　 
　　　　　　　　　　　　　 自动登录
　　　　　　　　　　
           
 　　

2）、下面是一个横向表单：

 

下面是横向表单的部分代码：

     用户名：
　　 

           
　　　　　　请输入您注册时所填的E-mail
     
 

相对应的部分重要css如下:

.control-label{
    padding-top: 7px;
    margin-bottom: 0;
    text-align: right;}//这行重要
.form-control{
    background-color: #FFF;
    border: 1px solid #e5e6e7;
    border-radius: 1px;
    display: block;
    padding: 6px 12px;
    transition: border-color 2s ease-in-out 0s,box-shadow .15s ease-in-out 0s;//这行重要
    width: 100%;
    font-size: 14px;}
.help-block {
    display: block;//这行重要
    margin-top: 5px;
    margin-bottom: 10px;
    color: #737373;

3）、下面是一个弹出表单：

这是按钮以及弹出后的效果：

按钮：

 

效果：

下面是按钮代码:由于按钮的css都是一些简单样式类，故此处不再赘述。

      打开登录窗口

下面是modal弹出后代码：

        

            

                

                    

                        

                            
登录
                            
欢迎登录本站(⊙o⊙)
                            

                                

                                    用户名：
                                    
                                
                                

                                    密码：
                                    
                                
                                

                                    登录
                                    
                                    
                                        
自动登录
                                
                            
                        
                        

                            
还不是会员？
                            
您可以注册一个账户
                            

                                
                            
                        
                    
                
            
        
    

modal框css：

1、#modal-form 的css，可以看到，几乎都是系统自带：

2、.modal-dialog样式：可以看到，也几乎都是系统自带：