有些菜单是需要向上弹出的,比如说你的菜单在页面最底部,而这个菜单正好有一个下拉菜单,为了让用户有更好的体验,不得不让下拉菜单向上弹出。在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>

Bootstrap系列 -- 36. 向上弹起的下拉菜单的更多相关文章

  1. Bootstrap历练实例:导航内下拉菜单的用法

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  2. BootStrap字体图标不显示、下拉菜单不显示

    在W3CSchool学习BootStrap教程时遇到的问题…… 1.字体图标不能显示 上面是正常显示的样子,不能正常显示,因为缺少下面的字体图标样式文件 (1)在下载的Bootstrap包中将font ...

  3. Bootstrap页面布局15 - BS带下拉菜单的按钮

    带下拉菜单的按钮 <div class='btn-toolbar'> <div class='btn-group'> <a href='javascript:;' cla ...

  4. bootstrap 导航栏鼠标悬停显示下拉菜单

    在jsp中加入一下代码: .navbar .nav > li:hover .dropdown-menu { display: block;} 全部代码如下所示: <%@ page lang ...

  5. bootstrap multiselect的使用 多选下拉菜单

    官网网址: http://davidstutz.de/bootstrap-multiselect/

  6. Bootstrap_下拉菜单

    在使用Bootstrap框架的下拉菜单时,必须调用Bootstrap框架提供的bootstrap.js文件. 一.普通下拉菜单 <div class="dropdown"&g ...

  7. Bootstrap框架(基础篇)之按钮,网格,导航栏,下拉菜单

    一,按钮 注意:虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用button或a标签来制作按钮. 框架中提供了基础按 ...

  8. 简单叨叨bootstrap按钮无限层级下拉菜单的实现

    0.写在前面的话 最近看书都懈怠了,又正值新项目,虽说并不是忙得不可开交,好吧我老实交待,我就是偷懒了其实,博客也没更.言归正传,对于前端的不熟悉现在确实是个让我头疼的事情,以至于一些功能要在网络上漫 ...

  9. 8.bootstrap下拉菜单、按钮组、按钮式下拉菜单

    下拉菜单 dropdown 对齐方式: .dropdown-menu-right     .dropdown-menu-left <div class="container" ...

随机推荐

  1. jQuery 常用的代码片段

    1.  官网下载链接: http://jquery.com/download/ 2.  引入jquery 文件方式: (1) <script src="http://libs.baid ...

  2. FQ 也要使用 Telegram

    不知怎么回事,一款优秀的开源,跨平台,安全的即时通讯工具 Telegram 就被 GG 了. 但是我们还得继续使用--那就 FQ 吧.用 ShadowSocks FQ 还不错. 安装 ShadowSo ...

  3. MSBI BigData demo—sqoop import

    --sp_readerrorlog 读取错误的信息记录 exec sys.sp_readerrorlog 0, 1, 'listening'查看端口号 首先hadoop环境要配置完毕,并检验可以正常启 ...

  4. Hadoop 2.0 中的资源管理框架 - YARN(Yet Another Resource Negotiator)

    1. Hadoop 2.0 中的资源管理 http://dongxicheng.org/mapreduce-nextgen/hadoop-1-and-2-resource-manage/ Hadoop ...

  5. Maxwell’s Equations

    A=cos(pi*x-pi/2)i+sin(pi*x)j 正电荷形成的电场 负电荷形成的电场   正负电荷形成的电场 无限长导线上均匀分布的正电荷 电场 均匀分布电荷的平面 电场 电荷均匀分布的球面形 ...

  6. Linux 系统常用命令汇总(二) vi 文本编辑

    文本编辑 vi 命令 作用 +文件名 编辑文本文件,若文件不存在同时创建该文件 Ctrl+f 向后翻一页 Ctrl+b 向前翻一页 Ctrl+d 向后翻半页 Ctrl+u 向前翻半页 + 光标移动到下 ...

  7. 使用reportNG替换testNG的默认报告

    关于reportng的官网介绍:http://reportng.uncommons.org/ 1.下载reportNG的jar包:http://pan.baidu.com/s/1hq5znLU 2.r ...

  8. hdu 1028 Ignatius and the Princess III 简单dp

    题目链接:hdu 1028 Ignatius and the Princess III 题意:对于给定的n,问有多少种组成方式 思路:dp[i][j],i表示要求的数,j表示组成i的最大值,最后答案是 ...

  9. 只有 DBA 才能导入由其他 DBA 导出的文件

    两句话搞定问题: grant dba to testuser ; 如果还不行,再执行: alter user  testuser default role DBA:

  10. 两种方式判断类的存在→className getAttribute

    通过className获取 var p = document.getElementsByTagName('p'); for(var i = 0;i <p.length;i++){ if(p[i] ...