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

H+后台主题UI框架---整理的更多相关文章

  1. H+后台主题UI框架---整理(二)

    本篇文章是针对H+后台主题UI框架的整理的第二部分.主要只有一个point.如下: 其代码如下: <div class="ibox float-e-margins"> ...

  2. H+后台主题UI框架---整理(三)

    这里面介绍下H+后台主题UI框架里面插件的应用,不过都是最最简单最初级的功能.主要有日历插件,input单选多选(icheck)插件,input下拉搜索(chosen)插件. 一.日历插件 有如下几种 ...

  3. H+后台主题UI框架---整理(一)

    本篇文章是对H+这种框架进行整理,顺便了解一下标准的代码规范的写法. 一.表单: 1).下面是一个基本表单: 现在来看这个表单的结构: 1.整个表单的外框结构是一个div,至于padding和marg ...

  4. H+ 后台主题UI框架

    十年河东,十年河西,莫欺少年穷 学无止境,精益求精 今天得到了一个非常完美的后端管理系统框架:H+ 后台主题UI框架 H+ 后台主题UI框架 H+是一个完全响应式,基于Bootstrap3.3.6最新 ...

  5. 中小后台系统UI框架--EasyUI

    后台开发人员不擅长前端UI界面,而小型软件公司没有专职美工岗位,开发人员只能借助开源UI框架,复用已有组件,完成用户操作界面.EasyUI是基于jQuery的UI插件集合体,可帮助开发者轻松构建网页. ...

  6. 基于jquery开发的UI框架整理分析

    根据调查得知,现在市场中的UI框架差不多40个左右,不知大家都习惯性的用哪个框架,现在市场中有几款UI框架稍微的成熟一些,也是大家比较喜欢的一种UI框架,那应该是jQuery,有部分UI框架都是根据j ...

  7. 前端UI框架整理

    JQuery Jquery官网:http://jquery.com/ jQuery是一个快速,小巧,且功能丰富的JavaScript库. Jquery-1.11.3.min.js 压缩版:http:/ ...

  8. ASP.NET MVC搭建项目后台UI框架—1、后台主框架

    目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...

  9. ASP.NET MVC搭建项目后台UI框架—4、tab多页签支持

    目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...

随机推荐

  1. Android 进程常驻(0)----MarsDaemon使用说明

    版权声明:本文为博主原创文章,未经博主允许不得转载. 这是一个轻量级的库,配置几行代码,就可以实现在Android上实现进程常驻,也就是在系统强杀下,以及360获取root权限下,clean mast ...

  2. CodeWars for JavaScript

    SubClass https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes Sub classing with ...

  3. 将一个文件夹纳入library或者移除remove

    https://support.microsoft.com/en-us/help/4026298/windows-show-libraries-in-file-explorer To show lib ...

  4. 前端到后台ThinkPHP开发整站--php开发案例

    前端到后台ThinkPHP开发整站--php开发案例 总结 还是需要做几个案例,一天一个为佳,那样才能做得快. 从需求分析着手,任务体系要构建好,这样才能非常高效. 转自: 前端到后台ThinkPHP ...

  5. matplotlib 可视化 —— 定制画布风格 Customizing plots with style sheets(plt.style)

    Customizing plots with style sheets - Matplotlib 1.5.1 documentation 1. 使用和显示其他画布风格 >> import ...

  6. reverse(两种反向生成url django原生形式和rest_framework中版本的形式)

    reverse(两种反向生成url django原生形式和rest_framework中版本的形式) views.py from django.shortcuts import render,Http ...

  7. DSU

    DSU stands for ‘decorate, sort, undecorate’ and refers to a pattern that is often useful for sorting ...

  8. BZOJ 1001 平面图与对偶图的转化 最短路Or最大流

    思路: 1.按照题意求最小割 转换成最大流用Dinic解 2. 转换成对偶图 求最短路 Dinic: //By SiriusRen #include <queue> #include &l ...

  9. Unity 如何将apk放到Android系统的system里

    有时我们需要用unity开发一款Android的系统软件,很坑,步骤如下: 1.用unity打包出来,签名. 2.用解压工具打开签过名的apk. 3.将lib里面的.so文件复制出来. 4.adb r ...

  10. zookeeper 性能测试

    zookeeper压力测试:性能对比(3个节点,5个节点,7个节点 创建节点.删除节点.设置节点数据.读取节点数据性能及并发性能) 测试结果如下: 五次测试三节点结果: 创建100W节点用时:15.0 ...