1.bootstrap顯示下拉框:
<li>
<a class="dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">管理員操作</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a href="userList.html" role="menuitem" tabindex="-1">查看所有用戶</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a href="appList.html" role="menuitem" tabindex="-1">查看所有APP</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a href="adminIndex.html" role="menuitem" tabindex="-1">返回</a></li>
</ul>
</li>
顯示效果:
2.整個顯示條的完整代碼:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Mbaas平臺</a>
</div>
<div id="navbar" class="collapse navbar-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 id="quitButton"><a href="javascript:quit();">退出</a></li>-->
<!--<li><input type="text" id="owner" readonly="true"/></li>-->
<li>
<a class="dropdown-toggle" id="dropdownMenu2" data-toggle="dropdown"><span id="owner"></span></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a data-toggle="modal" data-target="#repassword">修改密碼</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a href="javascript:quit();">退出</a></li>
</ul>
</li>
<li>
<a class="dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">管理員操作</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a href="userList.html" role="menuitem" tabindex="-1">查看所有用戶</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a href="appList.html" role="menuitem" tabindex="-1">查看所有APP</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>