• H+后台主题UI框架---整理


    本篇文章是对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;  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样式:可以看到,也几乎都是系统自带:

  • 相关阅读:
    初始面向对象
    python之路——迭代器和生成器
    函数进阶
    python之路——初识函数
    实现css两端对齐
    http
    background-size
    call和apply的区别
    js兼容性
    面试题
  • 原文地址:https://www.cnblogs.com/jpfss/p/9253467.html
Copyright © 2020-2023  润新知