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樣式：可以看到，也幾乎都是系統自帶：