<div> <div> <div> <div> <button type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4>关于</h4> </div> <div> <p>《疯狂动物城》由迪士尼影业出品的3D动画片，由里奇·摩尔、拜恩·霍华德及杰拉德·布什联合执导，金妮弗·古德温、杰森·贝特曼、夏奇拉、艾伦·图代克、伊德瑞斯·艾尔巴、J·K·西蒙斯等加盟配音[1] 。</p> </div> <div> <button type="button" data-dismiss="modal">了解了</button> <!-- <button type="button">Save changes</button> --> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal -->
1）静态弹窗口，分为三部分，标题，窗体和按钮；其中，我们只需要一个按钮，另一个注释掉了。并增加 id=about，方便下面定位；
2）在关于导航条的菜单栏，增加toggle链接，data-toggle="modal"，id对应data-target="#about"：
<li><a href="#" data-toggle="modal" data-target="#about">关于</a></li>
第十步、菜单定位
点击导航条的特点栏目，就会打开对应的标签页；需要一段js代码实现
<script> $(document).ready(function() { $("#demo-navbar .dropdown-menu a").click(function(){ var href = $(this).attr('href'); // alert(href); $("#tab-list a[href='" + href +"']").tab("'show"); }); }); </script>
1）通过id定位 $("#demo-navbar .dropdown-menu a")导航，设置点击事件；
2）定位到$("#tab-list a[href='" + href +"']")的打开标签页的方法tab("'show")。
这样，bootstrap的学习才刚刚起步。
如果大家还想深入学习，可以点击这里进行学习，再为大家附一个精彩的专题：Bootstrap学习教程