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

    为什么设计拦截器?1.为了在webservice请求过程中,能动态操作请求和响应数据,CXF设计了拦截器 拦截器分类: 1.按所处的位置分:服务器端拦截器,客户端拦截器. 2.按消息的方向分:入拦截器 ...

  2. oracle 创建字段自增长——两种实现方式汇总

    mysql等其他数据库中有随着记录的插入而表ID自动增长的功能,而oracle却没有这样的功能,我们有以下两种方式可以解决字段自增长的功能. 因为两种方式都需要通过创建序列来实现,这里先给出序列的创建 ...

  3. C和CPP关于条件运算符的区别

    条件运算符形式: cond ? expr1 : expr2; 在C语言中执行过程是: 先对cond求值,值为真返回expr1的值,否则返回expr2的值.(右值) gcc测试结果: 在Cpp中如果两个 ...

  4. uva 839 not so mobile——yhx

    Not so Mobile  Before being an ubiquous communications gadget, a mobile was just a structure made of ...

  5. POJ 1845 Sumdiv 【逆元】

    题意:求A^B的所有因子之和 很容易知道,先把分解得到,那么得到,那么 的所有因子和的表达式如下 第一种做法是分治求等比数列的和  用递归二分求等比数列1+pi+pi^2+pi^3+...+pi^n: ...

  6. bundle是什么?

    bundle就是一个数据对象,像Map,HashMap一样key-value键值对的方式存放数据.在android中用于应用程序之间数据传输,不过是要靠对象使用的 谢谢,又知道了一种在Activity ...

  7. oracle转Mysql中,varchar2(10)和number应该转换为什么类型?

    一. varchar2(10)和number应该转换为什么类型? oracle转成mysql时:varchar2(10)可以转成varchar(10)number则要看oracle中存储的具体是什么类 ...

  8. C#带cookie Post和Get方式发送数据,保持cookie

    在实际编程中,可能需要读取特定网页的信息,但很多网站需要用户登录后,才能够获取相关的页面内容,这就需要编程者先临时存储当前的cookie,在C#中可以使用CookieContainer 对象来保存登录 ...

  9. Expression<Func<T,TResult>>和Func<T,TResult>

    1.Expression<Func<T,TResult>>是表达式 //使用LambdaExpression构建表达式树 Expression<Func<int, ...

  10. 动态调用webservice,不需要添加Web References

    using System; using System.Collections.Generic; using System.Web; using System.Net; using System.IO; ...