6g下载网
当前位置: 主页 > 软件教程 > 编程开发 >

三种Bootstrap登录界面代码

时间: 2016-12-14 22:44 来源: 6g下载网

分享到:

今天小编整理一篇三种Bootstrap登录界面代码的文章和大家分享,希望能给大家提供帮助。

Bootstrap登录界面样式1

一个登录界面:

  1. <!DOCTYPE html> 
  2. <html lang="zh-cn"> 
  3. <head> 
  4.     <meta charset="UTF-8"> 
  5.     <meta name="viewport" content="width=device-width, initial-scale=1"> 
  6.     <link href="../../css/bootstrap.min.css" rel="stylesheet"> 
  7.     <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> 
  8.     <script src="../../js/bootstrap.min.js"></script> 
  9.     <title>用户登录</title> 
  10. </head> 
  11. <body> 
  12. <div class="container"> 
  13.     <form> 
  14.         <div class="form-group"> 
  15.             <label for="UserName">用户名</label> 
  16.             <input type="text" class="form-control" id="UserName" placeholder="用户名"> 
  17.         </div> 
  18.         <div class="form-group"> 
  19.             <label for="PassWord">密&nbsp;&nbsp;&nbsp;&nbsp;码</label> 
  20.             <input type="password" class="form-control" id="PassWord" placeholder="密码"> 
  21.         </div> 
  22.         <div class="form-group"> 
  23.             <label> 
  24.                 <input type="checkbox">记住我吗?  
  25.             </label> 
  26.         </div> 
  27.         <div class="form-group"> 
  28.             <input type="button" class="btn btn-default" id="Submit" value="登&nbsp;&nbsp;&nbsp;&nbsp;录"> 
  29.         </div> 
  30.     </form> 
  31. </div> 
  32. </body> 
  33. </html> 

效果如下:

三种Bootstrap登录界面代码

Bootstrap登录界面样式2

如果要将label与文本框在同一行显示,修改如下:

  1. <!DOCTYPE html> 
  2. <html lang="zh-cn"> 
  3. <head> 
  4.     <meta charset="UTF-8"> 
  5.     <meta name="viewport" content="width=device-width, initial-scale=1"> 
  6.     <link href="../../css/bootstrap.min.css" rel="stylesheet"> 
  7.     <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> 
  8.     <script src="../../js/bootstrap.min.js"></script> 
  9.     <title>用户登录</title> 
  10. </head> 
  11. <body> 
  12. <div class="container"> 
  13.     <div class="col-lg-3 col-md-3 col-xs-3"></div> 
  14.     <div class="col-lg-6 col-md-6 col-xs-6"> 
  15.         <div class="page-header"> 
  16.             <h1>用户登录</h1> 
  17.         </div> 
  18.         <form class="form-horizontal"> 
  19.             <div class="form-group"> 
  20.                 <div class="col-lg-2 col-sm-2 col-xs-2"> 
  21.                     <label for="UserName" class="control-label">用户名:</label> 
  22.                 </div> 
  23.                 <div class="col-lg-10 col-sm-10 col-xs-10"> 
  24.                     <input type="text" class="form-control" id="UserName" placeholder="用户名"> 
  25.                 </div> 
  26.             </div> 
  27.             <div class="form-group"> 
  28.                 <div class="col-lg-2 col-sm-2 col-xs-2"> 
  29.                     <label for="PassWord" class="control-label">密&nbsp;&nbsp;&nbsp;&nbsp;码:</label> 
  30.                 </div> 
  31.                 <div class="col-lg-10 col-sm-10 col-xs-10"> 
  32.                     <input type="password" class="form-control" id="PassWord" placeholder="密码"> 
  33.                 </div> 
  34.             </div> 
  35.             <div class="form-group"> 
  36.                 <div class="col-lg-2 col-sm-2 col-xs-2"></div> 
  37.                 <div class="col-lg-10 col-sm-10 col-xs-10"> 
  38.                     <div class="checkbox"> 
  39.                         <label> 
  40.                             <input type="checkbox">记住我吗?  
  41.                         </label> 
  42.                     </div> 
  43.                 </div> 
  44.             </div> 
  45.             <div class="form-group"> 
  46.                 <div class="col-lg-2 col-sm-2 col-xs-2"></div> 
  47.                 <div class="col-lg-10 col-sm-10 col-xs-10"> 
  48.                     <input type="button" class="btn btn-default" id="Submit" value="登&nbsp;&nbsp;&nbsp;&nbsp;录"> 
  49.                 </div> 
  50.             </div> 
  51.         </form> 
  52.     </div> 
  53.     <div class="col-lg-3 col-md-3 col-xs-3"></div> 
  54. </div> 
  55. </body> 
  56. </html> 

效果如下:

三种Bootstrap登录界面代码

Bootstrap登录界面样式3

如果将文本框放在同一行,修改如下:

  1. <!DOCTYPE html> 
  2. <html lang="zh-cn"> 
  3. <head> 
  4.     <meta charset="UTF-8"> 
  5.     <meta name="viewport" content="width=device-width, initial-scale=1"> 
  6.     <link href="../../css/bootstrap.min.css" rel="stylesheet"> 
  7.     <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> 
  8.     <script src="../../js/bootstrap.min.js"></script> 
  9.     <title>用户登录</title> 
  10. </head> 
  11. <body> 
  12. <div class="container"> 
  13.     <form class="form-inline"> 
  14.         <div class="form-group"> 
  15.             <label class="control-label" for="UserName">用户名:</label> 
  16.             <input type="text" class="form-control" id="UserName" placeholder="用户名"> 
  17.         </div> 
  18.         <div class="form-group"> 
  19.             <label class="control-label" for="PassWord">密&nbsp;&nbsp;&nbsp;&nbsp;码:</label> 
  20.             <input type="password" class="form-control" id="PassWord" placeholder="密码"> 
  21.         </div> 
  22.         <div class="form-group"> 
  23.             <div class="checkbox"> 
  24.                 <label> 
  25.                     <input type="checkbox">记住我吗?  
  26.                 </label> 
  27.             </div> 
  28.         </div> 
  29.         <div class="form-group"> 
  30.             <input type="button" class="btn btn-default" id="Submit" value="登&nbsp;&nbsp;&nbsp;&nbsp;录"> 
  31.         </div> 
  32.     </form> 
  33. </div> 
  34. </body> 
  35. </html> 

效果如下:

三种Bootstrap登录界面代码

三种Bootstrap登录界面代码的文章和大家分享结束,感谢阅读!

(责任编辑:大卫)
标签:登录 Bootstrap

分享到:

------分隔线----------------------------