這是一款基於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>