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; 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框架---整理的更多相关文章
- H+后台主题UI框架---整理(二)
本篇文章是针对H+后台主题UI框架的整理的第二部分.主要只有一个point.如下: 其代码如下: <div class="ibox float-e-margins"> ...
- H+后台主题UI框架---整理(三)
这里面介绍下H+后台主题UI框架里面插件的应用,不过都是最最简单最初级的功能.主要有日历插件,input单选多选(icheck)插件,input下拉搜索(chosen)插件. 一.日历插件 有如下几种 ...
- H+后台主题UI框架---整理(一)
本篇文章是对H+这种框架进行整理,顺便了解一下标准的代码规范的写法. 一.表单: 1).下面是一个基本表单: 现在来看这个表单的结构: 1.整个表单的外框结构是一个div,至于padding和marg ...
- H+ 后台主题UI框架
十年河东,十年河西,莫欺少年穷 学无止境,精益求精 今天得到了一个非常完美的后端管理系统框架:H+ 后台主题UI框架 H+ 后台主题UI框架 H+是一个完全响应式,基于Bootstrap3.3.6最新 ...
- 中小后台系统UI框架--EasyUI
后台开发人员不擅长前端UI界面,而小型软件公司没有专职美工岗位,开发人员只能借助开源UI框架,复用已有组件,完成用户操作界面.EasyUI是基于jQuery的UI插件集合体,可帮助开发者轻松构建网页. ...
- 基于jquery开发的UI框架整理分析
根据调查得知,现在市场中的UI框架差不多40个左右,不知大家都习惯性的用哪个框架,现在市场中有几款UI框架稍微的成熟一些,也是大家比较喜欢的一种UI框架,那应该是jQuery,有部分UI框架都是根据j ...
- 前端UI框架整理
JQuery Jquery官网:http://jquery.com/ jQuery是一个快速,小巧,且功能丰富的JavaScript库. Jquery-1.11.3.min.js 压缩版:http:/ ...
- ASP.NET MVC搭建项目后台UI框架—1、后台主框架
目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...
- ASP.NET MVC搭建项目后台UI框架—4、tab多页签支持
目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...
随机推荐
- 用html语言写一个功课表
今天在网上看了一个关于html的教程,主要是讲表格,看完之后认为有必要上机试试.于是就写了以下的一段代码. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvb ...
- HDU4622:Reincarnation(后缀数组,求区间内不同子串的个数)
Problem Description Now you are back,and have a task to do: Given you a string s consist of lower-ca ...
- 3.c语言结构体成员内存对齐详解
一.关键一点 最关键的一点:结构体在内存中是一个矩形,而不是一个不规则形状 二.编程实战 #include <stdlib.h> #include <stdio.h> stru ...
- POJ 2248 搜索
剪枝: 1.从后向前枚举 2.迭代加深 然后就0msAC了 //By SiriusRen #include <cstdio> using namespace std; int n,T,s[ ...
- C语言基础-第五章
流程控制 1.顺序结构 顺序结构是指程序将按照书写的顺序一步步执行程序. 2.选择结构 2.1但分支结构语句 if(表达式){语句} 2.2双分支结构 if(表达式){}else if{} else{ ...
- 我的Spring MVC第一个应用
Product package com.mstf.bean; import java.io.Serializable; /** * Product类,封装了一些信息,包含三个属性 * @author ...
- selenium自动化框架介绍------unittest版本
首先说下unittest的两个问题:1.未实现失败重跑 2.未实现远程的分布式(即多线程呼起多台远程计算机,并行进行用例的执行), 为什么要使用框架: 比较方便,只需要写用例就行,而不用考虑结构.还 ...
- WHU 1538 Stones II 动态规划
赛后写的,动态规划,学长和题解,提供了两种状态设计的思路,都写了下……结果在写第二种的时候,不小心把下标的起点写错了,导致WA了无数发…… 无奈啊……每次都是这种错误…… 题意: 大概就是有n块石头, ...
- Project Euler:Problem 58 Spiral primes
Starting with 1 and spiralling anticlockwise in the following way, a square spiral with side length ...
- 网页载入进度条中的javascript
demo地址:http://output.jsbin.com/buquyedosa 思路例如以下:代码都有凝视,就不一一介绍了. <!DOCTYPE html> <html> ...