屬性聲明式方法:
一般下拉菜單都是出現在導航條中,比如下圖的一個效果,用戶點擊帶有三角形的菜單項都會彈出下拉菜單項:
<div class="navbar navbar-default" id="navmenu"> <a href="##" class="navbar-brand">W3cplus</a> <ul class="nav navbar-nav"> <li class="dropdown"> <a href="##" data-toggle="dropdown" class="dropdown-toggle" role="button" id="tutorial">教程<b class="caret"></b></a> <ul class="dropdown-menu" role="menu" aria-labelledby="tutorial"> <li role="presentation"><a href="##">CSS3</a></li> <li role="presentation"><a href="##">HTML5</a></li> <li role="presentation"><a href="##">Sass</a></li> </ul> </li> <li><a href="##">前端論壇</a></li> <li><a href="##">關于我們</a></li> </ul> </div>
除了這種導航條之外,在膠囊式導航中也具有下拉菜單,其結構如:
<ul class="nav nav-pills"> <li class="dropdown"> <a href="##" data-toggle="dropdown" class="dropdown-toggle" role="button" id="tutorial">教程<b class="caret"></b></a> <ul class="dropdown-menu" role="menu" aria-labelledby="tutorial"> <li role="presentation"><a href="##">CSS3</a></li> <li role="presentation"><a href="##">HTML5</a></li> <li role="presentation"><a href="##">Sass</a></li> </ul> </li> <li class="active"><a href="##">前端論壇</a></li> <li><a href="##">關于我們</a></li> </ul>
運行效果如下:
請驗證,完成請求
由于請求次數過多,請先驗證,完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報