关于bootstrap的导航栏
Posted 韩说不白说
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了关于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>
以上是关于关于bootstrap的导航栏的主要内容，如果未能解决你的问题，请参考以下文章