bootstrap 顯示下拉框

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>

這裏寫圖片描述

發佈了33 篇原創文章 · 獲贊 7 · 訪問量 1萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章