本篇文章是对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. 用html语言写一个功课表

    今天在网上看了一个关于html的教程,主要是讲表格,看完之后认为有必要上机试试.于是就写了以下的一段代码. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvb ...

  2. HDU4622:Reincarnation(后缀数组,求区间内不同子串的个数)

    Problem Description Now you are back,and have a task to do: Given you a string s consist of lower-ca ...

  3. 3.c语言结构体成员内存对齐详解

    一.关键一点 最关键的一点:结构体在内存中是一个矩形,而不是一个不规则形状 二.编程实战 #include <stdlib.h> #include <stdio.h> stru ...

  4. POJ 2248 搜索

    剪枝: 1.从后向前枚举 2.迭代加深 然后就0msAC了 //By SiriusRen #include <cstdio> using namespace std; int n,T,s[ ...

  5. C语言基础-第五章

    流程控制 1.顺序结构 顺序结构是指程序将按照书写的顺序一步步执行程序. 2.选择结构 2.1但分支结构语句 if(表达式){语句} 2.2双分支结构 if(表达式){}else if{} else{ ...

  6. 我的Spring MVC第一个应用

    Product package com.mstf.bean; import java.io.Serializable; /** * Product类,封装了一些信息,包含三个属性 * @author ...

  7. selenium自动化框架介绍------unittest版本

    首先说下unittest的两个问题:1.未实现失败重跑 2.未实现远程的分布式(即多线程呼起多台远程计算机,并行进行用例的执行), 为什么要使用框架:  比较方便,只需要写用例就行,而不用考虑结构.还 ...

  8. WHU 1538 Stones II 动态规划

    赛后写的,动态规划,学长和题解,提供了两种状态设计的思路,都写了下……结果在写第二种的时候,不小心把下标的起点写错了,导致WA了无数发…… 无奈啊……每次都是这种错误…… 题意: 大概就是有n块石头, ...

  9. Project Euler:Problem 58 Spiral primes

    Starting with 1 and spiralling anticlockwise in the following way, a square spiral with side length ...

  10. 网页载入进度条中的javascript

    demo地址:http://output.jsbin.com/buquyedosa 思路例如以下:代码都有凝视,就不一一介绍了. <!DOCTYPE html> <html> ...