基于Bootstrap的登录表单界面
何问起 hovertree.com
这是一款基于Bootstrap的登录表单，表单的外观自然不用说，沿用了Bootstrap的风格，非常漂亮。这款登录表单有一个经过CSS3处理过的头像图片，同时还有HTML5表单字段的简单验证，CSS3的使用，让整个登录表单的投影显得更加立体。
效果体验：http://hovertree.com/texiao/html5/12/
下载
HTML代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基于Bootstrap的登录表单 - 何问起</title><base target="_blank" />
<style>.hvtholder {
margin: 0px auto;
width: 789px;
text-align: center;
}
a {
color: blue;
}</style>
<link href="http://hovertree.com/texiao/html5/12/css/bootstrap.min.css" rel="stylesheet">
<link href="http://hovertree.com/texiao/html5/12/css/signin.css" rel="stylesheet">
</head>
<body>
<div class="hvtholder">
<h2>基于Bootstrap的登录表单</h2>
<a href="http://hovertree.com">首页</a> <a href="http://hovertree.com/texiao/">特效</a> <a href="http://hovertree.com/hvtart/bjae/h68p7tfk.htm">原文</a>
</div>
<div class="signin">
<div class="signin-head"><img src="http://hovertree.com/texiao/html5/12/images/test/head_120.png" alt="" class="img-circle"></div>
<form class="form-signin" role="form" target="http://hovertree.com/texiao/html5/12/">
<input type="text" class="form-control" placeholder="用户名" required autofocus />
<input type="password" class="form-control" placeholder="密码" required />
<button class="btn btn-lg btn-warning btn-block" type="submit">登录</button>
<label class="checkbox">
<input type="checkbox" value="remember-me"> 记住我
</label>
</form>
</div>
</body>
</html>
效果体验：http://hovertree.com/texiao/html5/12/
下载
HTML代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基于Bootstrap的登录表单 - 何问起</title><base target="_blank" />
<style>.hvtholder {
margin: 0px auto;
width: 789px;
text-align: center;
}
a {
color: blue;
}</style>
<link href="http://hovertree.com/texiao/html5/12/css/bootstrap.min.css" rel="stylesheet">
<link href="http://hovertree.com/texiao/html5/12/css/signin.css" rel="stylesheet">
</head>
<body>
<div class="hvtholder">
<h2>基于Bootstrap的登录表单</h2>
<a href="http://hovertree.com">首页</a> <a href="http://hovertree.com/texiao/">特效</a> <a href="http://hovertree.com/hvtart/bjae/h68p7tfk.htm">原文</a>
</div>
<div class="signin">
<div class="signin-head"><img src="http://hovertree.com/texiao/html5/12/images/test/head_120.png" alt="" class="img-circle"></div>
<form class="form-signin" role="form" target="http://hovertree.com/texiao/html5/12/">
<input type="text" class="form-control" placeholder="用户名" required autofocus />
<input type="password" class="form-control" placeholder="密码" required />
<button class="btn btn-lg btn-warning btn-block" type="submit">登录</button>
<label class="checkbox">
<input type="checkbox" value="remember-me"> 记住我
</label>
</form>
</div>
</body>
</html>
评论：
微信二维码: