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

<div id="cnblogs_post_body" class="blogpost-body">本篇文章是对H+这种框架进行整理，顺便了解一下标准的代码规范的写法。 1、表单： 1）、下面是一个基本表单： <img src="https://images2015.cnblogs.com/blog/1055766/201704/1055766-20170407095129644-525659583.png" alt=""> 如今来看这个表单的结构： 1.整个表单的外框结构是一个div,至于padding和margin,则须要你们根据实际项目的状况来设定。 <img src="https://images2015.cnblogs.com/blog/1055766/201704/1055766-20170407102634128-1002696269.png" alt=""> 2.div里面的第二部分先须要用<form></form>标签包裹，里面的每个红色框都是一个form-group. <img src="https://images2015.cnblogs.com/blog/1055766/201704/1055766-20170407103001285-961994313.png" alt=""> 3.在每个form-group里面，用label标签将标签头如“用户名，密码”等包裹起来。 <img src="https://images2015.cnblogs.com/blog/1055766/201704/1055766-20170407104148738-783424062.png" alt=""> 4.自动登陆和登陆按钮的那里，一个左浮，一个右浮，对于自动登陆。外面用label套住整个。而后是div里面装有input，而后是自动登陆文字。 <img src="https://images2015.cnblogs.com/blog/1055766/201704/1055766-20170407105348582-1397217081.png" alt=""> 框架大体代码以下： <div class="cnblogs_code"><div class="cnblogs_code_toolbar"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></div> <pre><div> <h3>登陆</h3> 欢迎登陆本站(⊙o⊙) <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"> 　　　　　　　　　　　　　　登录 </button> <label> <div> 　　　　　　　　　　　　　　　　<input type="checkbox"> 　　　　　　　　　　　　　 </div> 　　　　　　　　　　　　　自动登陆 　　　　　　　　　　</label> </div> 　　</form> </div></pre> <div class="cnblogs_code_toolbar"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></div></div> 2）、下面是一个横向表单：  <img src="https://images2015.cnblogs.com/blog/1055766/201704/1055766-20170407111014300-1471563540.png" alt=""> 下面是横向表单的部分代码： <div class="cnblogs_code"><div class="cnblogs_code_toolbar"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></div> <pre><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></pre> <div class="cnblogs_code_toolbar"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></div></div> 相对应的部分重要css以下: <div class="cnblogs_code"><div class="cnblogs_code_toolbar"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></div> <pre>.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;</pre> <div class="cnblogs_code_toolbar"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></div></div> 3）、下面是一个弹出表单： 这是按钮以及弹出后的效果： 按钮：  <img src="https://images2015.cnblogs.com/blog/1055766/201704/1055766-20170407112705628-243875104.png" alt=""> 效果： <img src="https://images2015.cnblogs.com/blog/1055766/201704/1055766-20170407112829238-547007376.png" alt=""> 下面是按钮代码:因为按钮的css都是一些简单样式类，故此处再也不赘述。 <div class="cnblogs_code"> <pre><div class="text-center"> <a data-toggle="modal" class="btn btn-primary" href="form_basic.html#modal-form">打开登陆窗口</a> </div></pre> </div> 下面是modal弹出后代码： <div class="cnblogs_code"><div class="cnblogs_code_toolbar"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></div> <pre><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></pre> <div class="cnblogs_code_toolbar"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></div></div> modal框css： 一、#modal-form 的css，能够看到，几乎都是系统自带： <img src="https://images2015.cnblogs.com/blog/1055766/201704/1055766-20170407113622410-120582232.png" alt=""> 二、.modal-dialog样式：能够看到，也几乎都是系统自带： <img src="https://images2015.cnblogs.com/blog/1055766/201704/1055766-20170407113741878-775192798.png" alt="">  </div>javascript