说明：

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"是指点击后关闭这个模态框。×是叉号的转义字符。

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. 后面那个登录弹框一毛一样，不说了。

效果图：