关于bootstrap的导航栏

以下是bootstrap的导航栏

<div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">主页</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Contact</a></li>
                        <li class="dropdown"><a href="#" class="dropdown-toggle"
                            data-toggle="dropdown" role="button" aria-haspopup="true"
                            aria-expanded="false">Dropdown<span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li class="dropdown-header">Nav header</li>
                                <li><a href="#">Separated link</a></li>
                                <li><a href="#">One more separated link</a></li>
                            </ul></li>
                    </ul>

其中关键的就是

        <ul class="nav navbar-nav navbar-right">
                         <!-- 设置它的导航栏 -->
                        <li><a href="#" id="username" class="dropdown-toggle"
                            data-toggle="dropdown" role="button" aria-haspopup="true"
                            aria-expanded="false">【注册】</a>
                            <ul class="dropdown-menu">
                                <li><a href="#">个人信息</a></li>
                                <li><a href="#">修改密码</a></li>
                                <li><a href="#">设置背景</a></li>
                            </ul></li>
                        
                        <li><a href="/meetings/login">【退出】</a></li>
                    </ul>
              ul里面有li  

这个是需要特别注意的     

您可以切换下拉菜单(Dropdown)插件的隐藏内容:

通过 data 属性:向链接或按钮添加 data-toggle="dropdown" 来切换下拉菜单,如下所示:

<div class="dropdown">
  <a data-toggle="dropdown" href="#">下拉菜单(Dropdown)触发器</a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
   
  </ul>



原文地址:https://www.cnblogs.com/carsar/p/5516191.html