login.html 9.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>登录 - Bootstrap后台管理系统模版Ace下载</title>
  6. <meta name="keywords" content="Bootstrap模版,Bootstrap模版下载,Bootstrap教程,Bootstrap中文" />
  7. <meta name="description" content="站长素材提供Bootstrap模版,Bootstrap教程,Bootstrap中文翻译等相关Bootstrap插件下载" />
  8. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  9. <!-- basic styles -->
  10. <link href="/dist/css/bootstrap.min.css" rel="stylesheet" />
  11. <link rel="stylesheet" href="/dist/css/font-awesome.min.css" />
  12. <!--[if IE 7]>
  13. <link rel="stylesheet" href="/dist/css/font-awesome-ie7.min.css" />
  14. <![endif]-->
  15. <!-- page specific plugin styles -->
  16. <!-- ace styles -->
  17. <link rel="stylesheet" href="/dist/css/ace.min.css" />
  18. <link rel="stylesheet" href="/dist/css/ace-rtl.min.css" />
  19. <!--[if lte IE 8]>
  20. <link rel="stylesheet" href="/dist/css/ace-ie.min.css" />
  21. <![endif]-->
  22. <!-- inline styles related to this page -->
  23. <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
  24. <!--[if lt IE 9]>
  25. <script src="/dist/js/html5shiv.js"></script>
  26. <script src="/dist/js/respond.min.js"></script>
  27. <![endif]-->
  28. </head>
  29. <body class="login-layout">
  30. <div class="main-container">
  31. <div class="main-content">
  32. <div class="row">
  33. <div class="col-sm-10 col-sm-offset-1">
  34. <div class="login-container">
  35. <div class="center">
  36. <h1>
  37. <i class="icon-leaf green"></i>
  38. <span class="red">Ace</span>
  39. <span class="white">Application</span>
  40. </h1>
  41. <h4 class="blue">&copy; Company Name</h4>
  42. </div>
  43. <div class="space-6"></div>
  44. <div class="position-relative">
  45. <div id="login-box" class="login-box visible widget-box no-border">
  46. <div class="widget-body">
  47. <div class="widget-main">
  48. <h4 class="header blue lighter bigger">
  49. <i class="icon-coffee green"></i>
  50. Please Enter Your Information
  51. </h4>
  52. <div class="space-6"></div>
  53. <form>
  54. <fieldset>
  55. <label class="block clearfix">
  56. <span class="block input-icon input-icon-right">
  57. <input type="text" class="form-control" placeholder="Username" />
  58. <i class="icon-user"></i>
  59. </span>
  60. </label>
  61. <label class="block clearfix">
  62. <span class="block input-icon input-icon-right">
  63. <input type="password" class="form-control" placeholder="Password" />
  64. <i class="icon-lock"></i>
  65. </span>
  66. </label>
  67. <div class="space"></div>
  68. <div class="clearfix">
  69. <label class="inline">
  70. <input type="checkbox" class="ace" />
  71. <span class="lbl"> Remember Me</span>
  72. </label>
  73. <button type="button" class="width-35 pull-right btn btn-sm btn-primary">
  74. <i class="icon-key"></i>
  75. Login
  76. </button>
  77. </div>
  78. <div class="space-4"></div>
  79. </fieldset>
  80. </form>
  81. <div class="social-or-login center">
  82. <span class="bigger-110">Or Login Using</span>
  83. </div>
  84. <div class="social-login center">
  85. <a class="btn btn-primary">
  86. <i class="icon-facebook"></i>
  87. </a>
  88. <a class="btn btn-info">
  89. <i class="icon-twitter"></i>
  90. </a>
  91. <a class="btn btn-danger">
  92. <i class="icon-google-plus"></i>
  93. </a>
  94. </div>
  95. </div><!-- /widget-main -->
  96. <div class="toolbar clearfix">
  97. <div>
  98. <a href="#" onclick="show_box('forgot-box'); return false;" class="forgot-password-link">
  99. <i class="icon-arrow-left"></i>
  100. I forgot my password
  101. </a>
  102. </div>
  103. <div>
  104. <a href="#" onclick="show_box('signup-box'); return false;" class="user-signup-link">
  105. I want to register
  106. <i class="icon-arrow-right"></i>
  107. </a>
  108. </div>
  109. </div>
  110. </div><!-- /widget-body -->
  111. </div><!-- /login-box -->
  112. <div id="forgot-box" class="forgot-box widget-box no-border">
  113. <div class="widget-body">
  114. <div class="widget-main">
  115. <h4 class="header red lighter bigger">
  116. <i class="icon-key"></i>
  117. Retrieve Password
  118. </h4>
  119. <div class="space-6"></div>
  120. <p>
  121. Enter your email and to receive instructions
  122. </p>
  123. <form>
  124. <fieldset>
  125. <label class="block clearfix">
  126. <span class="block input-icon input-icon-right">
  127. <input type="email" class="form-control" placeholder="Email" />
  128. <i class="icon-envelope"></i>
  129. </span>
  130. </label>
  131. <div class="clearfix">
  132. <button type="button" class="width-35 pull-right btn btn-sm btn-danger">
  133. <i class="icon-lightbulb"></i>
  134. Send Me!
  135. </button>
  136. </div>
  137. </fieldset>
  138. </form>
  139. </div><!-- /widget-main -->
  140. <div class="toolbar center">
  141. <a href="#" onclick="show_box('login-box'); return false;" class="back-to-login-link">
  142. Back to login
  143. <i class="icon-arrow-right"></i>
  144. </a>
  145. </div>
  146. </div><!-- /widget-body -->
  147. </div><!-- /forgot-box -->
  148. <div id="signup-box" class="signup-box widget-box no-border">
  149. <div class="widget-body">
  150. <div class="widget-main">
  151. <h4 class="header green lighter bigger">
  152. <i class="icon-group blue"></i>
  153. New User Registration
  154. </h4>
  155. <div class="space-6"></div>
  156. <p> Enter your details to begin: </p>
  157. <form>
  158. <fieldset>
  159. <label class="block clearfix">
  160. <span class="block input-icon input-icon-right">
  161. <input type="email" class="form-control" placeholder="Email" />
  162. <i class="icon-envelope"></i>
  163. </span>
  164. </label>
  165. <label class="block clearfix">
  166. <span class="block input-icon input-icon-right">
  167. <input type="text" class="form-control" placeholder="Username" />
  168. <i class="icon-user"></i>
  169. </span>
  170. </label>
  171. <label class="block clearfix">
  172. <span class="block input-icon input-icon-right">
  173. <input type="password" class="form-control" placeholder="Password" />
  174. <i class="icon-lock"></i>
  175. </span>
  176. </label>
  177. <label class="block clearfix">
  178. <span class="block input-icon input-icon-right">
  179. <input type="password" class="form-control" placeholder="Repeat password" />
  180. <i class="icon-retweet"></i>
  181. </span>
  182. </label>
  183. <label class="block">
  184. <input type="checkbox" class="ace" />
  185. <span class="lbl">
  186. I accept the
  187. <a href="#">User Agreement</a>
  188. </span>
  189. </label>
  190. <div class="space-24"></div>
  191. <div class="clearfix">
  192. <button type="reset" class="width-30 pull-left btn btn-sm">
  193. <i class="icon-refresh"></i>
  194. Reset
  195. </button>
  196. <button type="button" class="width-65 pull-right btn btn-sm btn-success">
  197. Register
  198. <i class="icon-arrow-right icon-on-right"></i>
  199. </button>
  200. </div>
  201. </fieldset>
  202. </form>
  203. </div>
  204. <div class="toolbar center">
  205. <a href="#" onclick="show_box('login-box'); return false;" class="back-to-login-link">
  206. <i class="icon-arrow-left"></i>
  207. Back to login
  208. </a>
  209. </div>
  210. </div><!-- /widget-body -->
  211. </div><!-- /signup-box -->
  212. </div><!-- /position-relative -->
  213. </div>
  214. </div><!-- /.col -->
  215. </div><!-- /.row -->
  216. </div>
  217. </div><!-- /.main-container -->
  218. <!-- basic scripts -->
  219. <!--[if !IE]> -->
  220. <script type="text/javascript">
  221. window.jQuery || document.write("<script src='/dist/js/jquery-2.0.3.min.js'>"+"<"+"/script>");
  222. </script>
  223. <!-- <![endif]-->
  224. <!--[if IE]>
  225. <script type="text/javascript">
  226. window.jQuery || document.write("<script src='/dist/js/jquery-1.10.2.min.js'>"+"<"+"/script>");
  227. </script>
  228. <![endif]-->
  229. <script type="text/javascript">
  230. if("ontouchend" in document) document.write("<script src='/dist/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
  231. </script>
  232. <!-- inline scripts related to this page -->
  233. <script type="text/javascript">
  234. function show_box(id) {
  235. jQuery('.widget-box.visible').removeClass('visible');
  236. jQuery('#'+id).addClass('visible');
  237. }
  238. </script>
  239. <script type="text/javascript">
  240. var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
  241. document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fe9e1d61340ff3d9495a8cca04ebdb49d' type='text/javascript'%3E%3C/script%3E"));
  242. </script>
  243. <a href="http://www.iteblog.com/">过往记忆</a>
  244. </body>
  245. </html>