当前第2页 返回上一页
通常情况下，需要将下拉菜单默认隐藏起来，只有当用户点击某个按钮或链接时，才让它显示出来。因此，你需要把超链接或按钮以及下拉菜单全部包裹在一个 class="dropdown" 或 position: relative; 的容器中，并为按钮或链接添加 data-toggle="dropdown" 属性。这就可以让下拉菜单默认隐藏，只有在点击按钮或链接时，它才被激活并显示出来。如：
1 2 3 4 5 6 7 8 9 10 11 12 13 | <div class="dropdown">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
|
此时，在浏览器中预览，可以看到一个按钮。如果点击按钮，下拉菜单才会被激活，并显示出来。效果如图 3?9所示：
图3-9 激活下拉菜单
默认情况下，子菜单以下拉形式弹出。如果希望以上拉形式弹出，只需把整个下拉菜单包裹在 .dropup 的容器中即可：
1 2 3 | <div class="dropup">
…
</div>
|
效果如图 3?10所示：
图3-10 上拉菜单
更多编程相关知识，请访问：编程视频！！
以上就是浅谈Bootstrap中的下拉菜单类（dropdown-menu）的详细内容，更多文章请关注木庄网络博客！
返回前面的内容
相关阅读 >>
bootstrap被淘汰了么
bootstrap如何去掉遮罩层
bootstrap怎么处理缓存问题
bootstrap cdn是什么
thinkphp和bootstrap区别
怎么解决bootstrap乱码问题
bootstrap4.5栅格系统的任意列问题怎么解决？
bootstrap中fonts怎么引用
bootstrap less是什么
bootstrap如何兼容ie6
更多相关阅读请进入《bootstrap》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » 浅谈Bootstrap中的下拉菜单类（dropdown-menu）
