h+ admin ui框架

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

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

整体效果

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

一、表单:

1)、下面是一个基本表单:

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

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

2.div里面的第二部分先需要用<form></form>标签包裹,里面的每一个红色框都是一个form-group.

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

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

框架大致代码如下:

复制代码

<div>
     <h3>登录</h3>
     <p>欢迎登录本站(⊙o⊙)</p>
     <form role="form">
           <div class="form-group">
                <label>用户名</label>
                <input placeholder="请输入您注册的E-mail" class="form-control" type="email">
           </div>
           <div class="form-group">
                <label>密码</label>
                <input placeholder="请输入密码" class="form-control" type="password">
           </div>
           <div>
                <button class="btn btn-sm btn-primary pull-right m-t-n-xs" type="submit">
              <strong>登 录</strong>
                </button>
                <label>
                       <div>
                <input type="checkbox">
              </div>
              自动登录
          </label>
           </div>
   </form>
</div>

复制代码

2)、下面是一个横向表单:

 

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

复制代码

<div class="form-group">
     <label class="col-sm-3 control-label">用户名:</label>
   <div class="col-sm-8">
          <input placeholder="用户名" class="form-control" type="email"> 
      <span class="help-block m-b-none">请输入您注册时所填的E-mail</span>
     </div>
 </div>

复制代码

相对应的部分重要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都是一些简单样式类,故此处不再赘述。

<div class="text-center">
      <a data-toggle="modal" class="btn btn-primary" href="form_basic.html#modal-form">打开登录窗口</a>
</div>

下面是modal弹出后代码:

复制代码

<div id="modal-form" class="modal fade in" aria-hidden="true" style="display: block; padding-right: 17px;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-sm-6 b-r">
                            <h3 class="m-t-none m-b">登录</h3>
                            <p>欢迎登录本站(⊙o⊙)</p>
                            <form role="form">
                                <div class="form-group">
                                    <label>用户名:</label>
                                    <input placeholder="请输入用户名" class="form-control" type="email">
                                </div>
                                <div class="form-group">
                                    <label>密码:</label>
                                    <input placeholder="请输入密码" class="form-control" type="password">
                                </div>
                                <div>
                                    <button class="btn btn-sm btn-primary pull-right m-t-n-xs" type="submit"><strong>登录</strong>
                                    </button>
                                    <label class="">
                                        <div class="icheckbox_square-green" style="position: relative;"><input class="i-checks" style="position: absolute; opacity: 0;" type="checkbox"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 0px none; opacity: 0;"></ins></div>自动登录</label>
                                </div>
                            </form>
                        </div>
                        <div class="col-sm-6">
                            <h4>还不是会员?</h4>
                            <p>您可以注册一个账户</p>
                            <p class="text-center">
                                <a href="form_basic.html"><i class="fa fa-sign-in big-icon"></i></a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

复制代码

modal框css:

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

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

发布了7 篇原创文章 · 获赞 2 · 访问量 1万+
展开阅读全文
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 数字20 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览