說明：
1. 上來一個ul先把登錄和註冊兩個鏈接扔進去，ul的類nav,navbar-nav是導航條，navbar-right讓他固定在右側。每個li的裏面，data-toggle="modal"是點擊出現一個modal模組，data-target="#register"是點擊之後出現的彈框的id，再裏面的span是那個小人圖標。
2. 接下來就是一個大div裝着這個註冊的彈框，id="register"，用來上面的data-target找到目標，class="modal fade"是說這是個modal模態框，fade是漸入效果，如果不加就是點擊註冊，直接出現，沒有從上面慢慢滑下的效果， tabindex="-1"，讓esc鍵起作用，按esc後彈框消失，這個tabindex設置任何值或空的都起作用，不明白原理是啥。
3. 再裏面，先是一個class="modal-dialog"，算是個對話框，沒有的話四周緊貼邊框不好看，裏面就是class="modal-content"內容了。
4. 內容分爲三個部分，分別是class="modal-header"，class="modal-body"，class="modal-footer"，有點像HTML的標籤。
5. header和footer都會帶一條橫線，不太好看，雖然footer會讓兩個按鈕右側對齊，不過還是不用比較好。
6. 其實還有一個class="modal-title"，可以作爲題目，字體大，用class="text-center"可以居中。
7. 右上角那個叉號，放在了一個class="modal-body"的按鈕裏面，這個body可以到處用，還不錯。class="close"是一個樣式，讓這個叉號按鈕好看一點，並且位於右上角。 data-dismiss="modal"是指點擊後關閉這個模態框。<span>×</span>是叉號的轉義字符。
8. 然後中間的class="modal-body"就是一個普通的form表單，每個項目用class="form-group"，input用class="form-control"改變一下樣式就好了。
9. 最後的兩個提交和取消的按鈕，外面加一個div，class="text-right"就可以右對齊了。
10. 下面加了個a鏈接，讓兩個彈框互相切換，data-toggle="modal"點擊出現模態框， data-dismiss="modal"點擊關閉當前模態框， data-target="#login"點擊後出現的目標模態框id。
11. 後面那個登錄彈框一毛一樣，不說了。
效果圖：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Document</title>
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/jquery.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<style>
body{
background-color: #C7EDCC;
font-family: "microsoft yahei";
/*min-width: 800px;*/
}
img{
width: 100%;
/*height: 462px;*/
}
.navbar{
/*margin-bottom: -10px;*/
}
#myppt{
margin-top: -20px;
}
</style>
</head>
<body>
<ul class="nav navbar-nav navbar-right">
<li><a data-toggle="modal" data-target="#register" href=""><span class="glyphicon glyphicon-user"></span> 註冊</a></li>
<li><a data-toggle="modal" data-target="#login" href=""><span class="glyphicon glyphicon-log-in"></span> 登錄</a></li>
</ul>
<!-- 註冊窗口 -->
<div id="register" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button class="close" data-dismiss="modal">
<span>×</span>
</button>
</div>
<div class="modal-title">
<h1 class="text-center">註冊</h1>
</div>
<div class="modal-body">
<form class="form-group" action="">
<div class="form-group">
<label for="">用戶名</label>
<input class="form-control" type="text" placeholder="6-15位字母或數字">
</div>
<div class="form-group">
<label for="">密碼</label>
<input class="form-control" type="password" placeholder="至少6位字母或數字">
</div>
<div class="form-group">
<label for="">再次輸入密碼</label>
<input class="form-control" type="password" placeholder="至少6位字母或數字">
</div>
<div class="form-group">
<label for="">郵箱</label>
<input class="form-control" type="email" placeholder="例如:[email protected]">
</div>
<div class="text-right">
<button class="btn btn-primary" type="submit">提交</button>
<button class="btn btn-danger" data-dismiss="modal">取消</button>
</div>
<a href="" data-toggle="modal" data-dismiss="modal" data-target="#login">已有賬號？點我登錄</a>
</form>
</div>
</div>
</div>
</div>
<!-- 登錄窗口 -->
<div id="login" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button class="close" data-dismiss="modal">
<span>×</span>
</button>
</div>
<div class="modal-title">
<h1 class="text-center">登錄</h1>
</div>
<div class="modal-body">
<form class="form-group" action="">
<div class="form-group">
<label for="">用戶名</label>
<input class="form-control" type="text" placeholder="">
</div>
<div class="form-group">
<label for="">密碼</label>
<input class="form-control" type="password" placeholder="">
</div>
<div class="text-right">
<button class="btn btn-primary" type="submit">登錄</button>
<button class="btn btn-danger" data-dismiss="modal">取消</button>
</div>
<a href="" data-toggle="modal" data-dismiss="modal" data-target="#register">還沒有賬號？點我註冊</a>
</form>
</div>
</div>
</div>
</div>
</body>
</html>