1. 程式人生 > >bootstarp下拉選單的使用方法

bootstarp下拉選單的使用方法

<nav class="navbar navbar-fixed-top" style="background-color: white;">
    <div class="container" >
        <div class="dropdown">
            <button class="btn btn-primary" data-toggle="dropdown">
                您好,<span class="glyphicon glyphicon-user"></span>15235180228<span class="glyphicon glyphicon-triangle-bottom"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a><span class="glyphicon glyphicon-picture"></span>檢視賬號資訊</a></li>
                <li><a><span class="glyphicon glyphicon-edit"></span>修改賬戶資訊</a></li>
                <li class="divider"></li>  //分割線
               //下面這部分是巢狀使用下拉選單的多級目錄
                <li class="dropdown-submenu">
                          <a tabindex="-1" href="#">More options</a>
                          <ul class="dropdown-menu">
                            <li><a tabindex="-1" href="#">Second level link</a></li>
                            <li><a tabindex="-1" href="#">Second level link</a></li>
                            <li><a tabindex="-1" href="#">Second level link</a></li>
                            <li><a tabindex="-1" href="#">Second level link</a></li>
                            <li><a tabindex="-1" href="#">Second level link</a></li>
                          </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>