Bootstrap系列 -- 36. 向上弹起的下拉菜单

简介:   有些菜单是需要向上弹出的,比如说你的菜单在页面最底部,而这个菜单正好有一个下拉菜单,为了让用户有更好的体验,不得不让下拉菜单向上弹出。在Bootstrap框架中专门为这种效果提代了一个类名“dropup”。

 

  有些菜单是需要向上弹出的,比如说你的菜单在页面最底部,而这个菜单正好有一个下拉菜单,为了让用户有更好的体验,不得不让下拉菜单向上弹出。在Bootstrap框架中专门为这种效果提代了一个类名“dropup”。使用方法正如前面所示,只需要在“btn-group”上添加这个类名(当然,如果是普通向上弹出下拉菜单,你只需要在“dropdown”类名基础上追加“dropup”类名即可)。

<div class="btn-group dropup">
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按钮下拉菜单<span class="caret"></span></button>
    <ul class="dropdown-menu">
         <li><a href="##">按钮下拉菜单项</a></li>
         <li><a href="##">按钮下拉菜单项</a></li>
         <li><a href="##">按钮下拉菜单项</a></li>
         <li><a href="##">按钮下拉菜单项</a></li>
    </ul>
</div>

 

相关文章
N..
|
1月前
|
开发框架 前端开发 UED
Bootstrap下拉菜单与选项卡
Bootstrap下拉菜单与选项卡
N..
16 1
|
6月前
|
前端开发 JavaScript
|
7月前
|
前端开发 JavaScript 容器
Bootstrap 下拉菜单
Bootstrap 下拉菜单
37 0
|
7月前
|
索引 容器
Bootstrap4----网络系统、图像形状、轮播、滚动监听、多媒体对象、下拉菜单导航及按钮
Bootstrap4----网络系统、图像形状、轮播、滚动监听、多媒体对象、下拉菜单导航及按钮
|
5月前
|
前端开发
Bootstrap 下拉菜单事件
Bootstrap 下拉菜单事件
|
6月前
|
前端开发 JavaScript
|
6月前
|
前端开发 容器
|
11月前
开心档 - 软件开发入门之 Bootstrap4 下拉菜单
Bootstrap4 下拉菜单依赖于 popper.min.js。下拉菜单是可切换的,是以列表格式显示链接的上下文菜单。
|
前端开发
bootstrap 组件之轮播图 折叠面板 下拉菜单 学习总结
bootstrap 组件之轮播图 折叠面板 下拉菜单 学习总结
|
开发框架 前端开发 开发者
Bootstrap 组件_按钮式下拉菜单 | 学习笔记
快速学习 Bootstrap 组件_按钮式下拉菜单
145 0