Bootstrap登錄樣式

樣式1

<!--bs中所有的均應該包裹在其中。-->
<div class="container">
    <!-- row是珊欄系統的包裹容器-->
    <div class="row">
        <!-- col-md-x 表示此珊欄占據幾個格子，offset-x 是偏移x格子-->
        <div class="col-md-4 col-md-offset-4">
            <!-- panel分為3個部分，heading,body,footer其中heading部分的顏色來自於panel-default的顏色-->
            <div class="panel panel-default">
                <!-- panel-headeing是有顏色的，此顏色來自於panel-default-->
                <div class="panel-heading">登錄信息</div>
                <div class="panel-body">
                    <form action="#">
                        <!-- form-group設置了距離上下部分div的距離，更美觀。-->
                        <div class="form-group">
                            <!-- form-control 設置了邊框有弧度圓角以及其中輸入字體的pading以及margin,placeholder為默認的問題-->
                            <input type="text" class="form-control" name="username" placeholder="用戶名">
                        </div>
                        <div class="form-group">
                            <input type="password" class="form-control" name="password" placeholder="密碼">
                        </div>
                        <!-- checkbox 效果同form-group-->
                        <div class="checkbox">
                            <!-- 此處用label包裹checkbox 的原因是為了點擊記住密碼也能對復選框進行選擇。-->
                            <label>
                                <input type="checkbox" name="remeber">記住密碼
                            </label>
                        </div>
                        <!-- button的btn-block 可以占滿當前珊欄而不用自適應。-->
                        <button type="button" class="btn btn-success btn-block btn-lg">登錄</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

 

樣式2:有背景的圖片

<!--bs中所有的均應該包裹在其中。-->
<div class="container">
    <!-- row是珊欄系統的包裹容器-->
    <div class="row">
        <!-- col-md-x 表示此珊欄占據幾個格子，offset-x 是偏移x格子-->
        <div class="col-md-4 col-md-offset-4">
            <!-- panel分為3個部分，heading,body,footer其中heading部分的顏色來自於panel-default的顏色-->
            <div class="panel panel-default">
                <!-- panel-headeing是有顏色的，此顏色來自於panel-default-->
                <div class="panel-heading">登錄信息</div>
                <div class="panel-body">
                    <form action="#">
                        <!--
                             1. form-group設置了距離上下部分div的距離，更美觀。
                             2. 對於form-group 設置了has-feedback可以使其有背景圖
                        -->
                        <div class="form-group has-feedback">
                            <!-- form-control 設置了邊框有弧度圓角以及其中輸入字體的pading以及margin,placeholder為默認的問題-->
                            <input type="text" class="form-control" name="username"
                                   placeholder="用戶名">
                            <!-- 此項如果要顯示必須在form-group的class上添加has-feedback且還要添加一個span-->
                            <!-- glyphicon是添加圖片，form-control-feedback是指示這個是一個樣式，同時設置其在右邊-->
                            <span class="glyphicon  glyphicon-user form-control-feedback"></span>
                        </div>
                        <div class="form-group has-feedback">
                            <input type="password" class="form-control" name="password"
                                   placeholder="密碼">
                            <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                        </div>

                        <div class="form-group">
                            <div class="checkbox">
                                <!-- 此處用label包裹checkbox 的原因是為了點擊記住密碼也能對復選框進行選擇。-->
                                <label>
                                    <input type="checkbox" name="remeber">記住密碼
                                </label>
                            </div>
                        </div>
                        <!-- button的btn-block 可以占滿當前珊欄而不用自適應。-->
                        <button type="button" class="btn btn-success btn-block btn-lg">登錄</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>