說明:css
1. 上來一個ul先把登陸和註冊兩個連接扔進去,ul的類nav,navbar-nav是導航條,navbar-right讓他固定在右側。每一個li的裏面,data-toggle="modal"是點擊出現一個modal模組,data-target="#register"是點擊以後出現的彈框的id,再裏面的span是那個小人圖標。html
2. 接下來就是一個大div裝着這個註冊的彈框,id="register",用來上面的data-target找到目標,class="modal fade"是說這是個modal模態框,fade是漸入效果,若是不加就是點擊註冊,直接出現,沒有從上面慢慢滑下的效果, tabindex="-1",讓esc鍵起做用,按esc後彈框消失,這個tabindex設置任何值或空的都起做用,不明白原理是啥。jquery
3. 再裏面,先是一個class="modal-dialog",算是個對話框,沒有的話四周緊貼邊框很差看,裏面就是class="modal-content"內容了。bootstrap
4. 內容分爲三個部分,分別是class="modal-header",class="modal-body",class="modal-footer",有點像HTML的標籤。字體
5. header和footer都會帶一條橫線,不太好看,雖然footer會讓兩個按鈕右側對齊,不過仍是不用比較好。spa
6. 其實還有一個class="modal-title",能夠做爲題目,字體大,用class="text-center"能夠居中。code
7. 右上角那個叉號,放在了一個class="modal-body"的按鈕裏面,這個body能夠處處用,還不錯。class="close"是一個樣式,讓這個叉號按鈕好看一點,而且位於右上角。 data-dismiss="modal"是指點擊後關閉這個模態框。<span>×</span>是叉號的轉義字符。orm
8. 而後中間的class="modal-body"就是一個普通的form表單,每一個項目用class="form-group",input用class="form-control"改變一下樣式就行了。htm
9. 最後的兩個提交和取消的按鈕,外面加一個div,class="text-right"就能夠右對齊了。blog
10. 下面加了個a連接,讓兩個彈框互相切換,data-toggle="modal"點擊出現模態框, data-dismiss="modal"點擊關閉當前模態框, data-target="#login"點擊後出現的目標模態框id。
11. 後面那個登陸彈框一毛同樣,不說了。
效果圖:
代碼:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1"> 6 <title>Document</title> 7 <link rel="stylesheet" href="css/bootstrap.css"> 8 <script src="js/jquery.js"></script> 9 <script src="bootstrap/js/bootstrap.min.js"></script> 10 11 <style> 12 body{ 13 background-color: #C7EDCC; 14 font-family: "microsoft yahei"; 15 /*min-width: 800px;*/ 16 } 17 img{ 18 width: 100%; 19 /*height: 462px;*/ 20 } 21 .navbar{ 22 /*margin-bottom: -10px;*/ 23 } 24 #myppt{ 25 margin-top: -20px; 26 27 } 28 </style> 29 </head> 30 <body> 31 <ul class="nav navbar-nav navbar-right"> 32 <li><a data-toggle="modal" data-target="#register" href=""><span class="glyphicon glyphicon-user"></span> 註冊</a></li> 33 <li><a data-toggle="modal" data-target="#login" href=""><span class="glyphicon glyphicon-log-in"></span> 登陸</a></li> 34 </ul> 35 <!-- 註冊窗口 --> 36 <div id="register" class="modal fade" tabindex="-1"> 37 <div class="modal-dialog"> 38 <div class="modal-content"> 39 <div class="modal-body"> 40 <button class="close" data-dismiss="modal"> 41 <span>×</span> 42 </button> 43 </div> 44 <div class="modal-title"> 45 <h1 class="text-center">註冊</h1> 46 </div> 47 <div class="modal-body"> 48 <form class="form-group" action=""> 49 <div class="form-group"> 50 <label for="">用戶名</label> 51 <input class="form-control" type="text" placeholder="6-15位字母或數字"> 52 </div> 53 <div class="form-group"> 54 <label for="">密碼</label> 55 <input class="form-control" type="password" placeholder="至少6位字母或數字"> 56 </div> 57 <div class="form-group"> 58 <label for="">再次輸入密碼</label> 59 <input class="form-control" type="password" placeholder="至少6位字母或數字"> 60 </div> 61 <div class="form-group"> 62 <label for="">郵箱</label> 63 <input class="form-control" type="email" placeholder="例如:123@123.com"> 64 </div> 65 <div class="text-right"> 66 <button class="btn btn-primary" type="submit">提交</button> 67 <button class="btn btn-danger" data-dismiss="modal">取消</button> 68 </div> 69 <a href="" data-toggle="modal" data-dismiss="modal" data-target="#login">已有帳號?點我登陸</a> 70 </form> 71 </div> 72 </div> 73 </div> 74 </div> 75 <!-- 登陸窗口 --> 76 <div id="login" class="modal fade"> 77 <div class="modal-dialog"> 78 <div class="modal-content"> 79 <div class="modal-body"> 80 <button class="close" data-dismiss="modal"> 81 <span>×</span> 82 </button> 83 </div> 84 <div class="modal-title"> 85 <h1 class="text-center">登陸</h1> 86 </div> 87 <div class="modal-body"> 88 <form class="form-group" action=""> 89 <div class="form-group"> 90 <label for="">用戶名</label> 91 <input class="form-control" type="text" placeholder=""> 92 </div> 93 <div class="form-group"> 94 <label for="">密碼</label> 95 <input class="form-control" type="password" placeholder=""> 96 </div> 97 <div class="text-right"> 98 <button class="btn btn-primary" type="submit">登陸</button> 99 <button class="btn btn-danger" data-dismiss="modal">取消</button> 100 </div> 101 <a href="" data-toggle="modal" data-dismiss="modal" data-target="#register">尚未帳號?點我註冊</a> 102 </form> 103 </div> 104 </div> 105 </div> 106 </div> 107 108 </body> 109 </html>