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>

 

转载于:https://my.oschina.net/u/2500703/blog/698768