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

    一.适用场景 在ESTful webservice中,get方法一般都是用来获取数据.我们可以使用httpcomponents组件来完成调用. 如我们需要发起get请求,携带的参数都是附加到请求的ur ...

  2. 最完整PHP.INI中文版

    ;;;;;;;;;;;;;;;;;;; 关于php.ini ;;;;;;;;;;;;;;;;;;;; 这个文件必须命名为'php.ini'并放置在httpd.conf中PHPINIDir指令指定的目录 ...

  3. 【VB超简单入门】三、开始编程

    接下来要进入正题了!同学们要认真看咯~ 第一步:安装VB开发IDE 在这里我推荐大家安装的是VB迷你版,现在大多数同学使用win7,这个版本可以在win7上运行的妥妥的~ 下载链接:http://pa ...

  4. 制作nginx和php的rpm包

    rpm包的制作真几把烦,制作php的rpm花了我3天时间,因为是根据线上环境来做的,依赖的第三方库太多,本来想把所有的第三方库做进php包,后来发现在rpmbuild -bb的时候非常耗时,而且乱七八 ...

  5. iTOP-4412开发板---Linux系统学习下载步骤

    本文转自迅为论坛:http://www.topeetboard.com 1.cd /home/topeet/Linux-simple/console  下建立.c文件 2. 编译命令,就在此目录下 # ...

  6. [转]Google Cloud Messaging: Overview

    本文转自:https://developers.google.com/cloud-messaging/gcm

  7. 用pygame学习初级python(一) 15.4.19

    最近有计划要学一下python,主要是要用flask.django一些框架进行后端的学习工作,但是在web应用之前希望进行一些基础的项目进行一些语法的练习,熟悉一下写法, 这个时候我就想先做几个小游戏 ...

  8. CUDA入门1

      1GPUs can handle thousands of concurrent threads. 2The pieces of code running on the gpu are calle ...

  9. 【问题&解决】试用版SQL Server 2008 R2 提示评估期已过,数据库不能访问解决办法

    因为以前一直是试用版,重启服务器之后,突然数据库不能访问,提示评估期已过,都快吓死了.还好找到了解决办法特copy解决步骤如下: (笔者用的是企业版: R88PF-GMCFT-KM2KR-4R7GB- ...

  10. 我的Unity学习路线

    前言 上班的时间内都很忙在做项目,休息时间里闲下来了,却觉得没什么事做不自在.难道真是苦逼的命不会享受? 想了一下这一段时间以来的过程:先是重新看了一遍Unity的基础部分,然后买了<3D数学基 ...