使用Bootstrap实现的登录对话框模板 - 踏得网

Basic User Login Form using Bootstrap

bootstrap, login, form, template

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 4422
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<script src="https://wow.techbrood.com/libs/jquery/jquery-1.11.1.min.js"></script>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'>
  
<div class="container login-form">
    <h2 class="login-title">- Please Login -</h2>
    <div class="panel panel-default">
        <div class="panel-body">
            <form>
                <div class="input-group login-userinput">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
                    <input id="txtUser" type="text" class="form-control" name="username" placeholder="Username">
                </div>
                <div class="input-group">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
                    <input id="txtPassword" type="password" class="form-control" name="password" placeholder="Password">
                    <span id="showPassword" class="input-group-btn">
            <button class="btn btn-default reveal" type="button"><i class="glyphicon glyphicon-eye-open"></i></button>
          </span>
                </div>
                <button class="btn btn-primary btn-block login-button" type="submit"><i class="fa fa-sign-in"></i> Login</button>
                <div class="checkbox login-options">
                    <label>
                        <input type="checkbox" /> Remember Me</label>
                    <a href="#" class="login-forgot">Forgot Username/Password?</a>
                </div>
            </form>
        </div>
    </div>
</div>