bootstrap 下拉菜单和上拉菜单

最新推荐文章于 2022-01-11 14:54:40 发布

小发发吖

最新推荐文章于 2022-01-11 14:54:40 发布

阅读量3k

点赞数

本文链接：https://blog.csdn.net/qq_36702996/article/details/78961207

版权

本文详细介绍了如何在Bootstrap框架中创建和实现下拉及上拉菜单，包括基本结构、CSS样式调整和JavaScript交互，帮助开发者灵活运用在网页导航中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!--Bootstrap BUG : 设置上拉菜单时需在dropup上加"position:relative;"定位。-->
<div class="dropdown">
    <div class="btn btn-default" data-toggle="dropdown">下拉菜单<span class="caret"></span></div>
    <ul class="dropdown-menu">
        <li class="dropdown-header">大公司</li>
        <li><a>百度</a></li>
        <li><a>腾讯</a></li>
        <li><a>阿里</a></li>
        <div class="divider"></div>
        <li class="dropdown-header">地区</li>
        <li><a>北京</a></li>
        <li class="disabled"><a>上海</a></li>
        <li><a>深圳</a></li>
    </ul>
</div>





以上下拉菜单的div也可用button 代替
<button class="btn" data-toggle="dropdown">下拉<span class="caret"></span></button>
dropdown ：下拉组件类名 ； 
dropup ：上拉组件类名 ； 
data-toggle = “drop-toggle” : 下拉按钮 ； 
caret ： 下拉三角图标 ； 
dropdown-menu : 下拉内容菜单 ； 
dropdown-header ：内容标题 ； 
divider : 分隔线 ；

效果如图