您的位置:首页 > Web前端 > BootStrap

bootstrap 显示下拉框

2015-07-30 15:32 746 查看
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>


内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  bootstrap 下拉框