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