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

分享到:

------分隔線----------------------------
? 35选7福利彩票