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

    问题:  项目中为了在时间上保持一致性,将所有时间都转化为了UTC时间. 其中有一段SqlDateTime.MinValue的代码,由于疏忽将其转为UTC时间后导致了 "SqlDateTim ...

  2. 烂泥:KVM虚拟机的关机与开启

    本文由秀依林枫提供友情赞助,首发于烂泥行天下. 我们在开启与关闭KVM虚拟机时,一般是通过start.shutdown.reboot等命令来进行.但是有时候我们会发现在使用shutdown.reboo ...

  3. echo

    echo $echo [-e] [内容字符串]显示后面的内容,缺省选项表示将后面的内容原模原样的显示出来,如果后面接的字符串不用"",会默认以空格为分隔符输出多个串 可以配合She ...

  4. 一个不错的shell 脚本教程 入门级

    一个很不错的bash脚本编写教程,至少没接触过BASH的也能看懂     建立一个脚本 Linux中有好多中不同的shell,但是通常我们使用bash (bourne again shell) 进行s ...

  5. ubuntu16.04服务器配置ssh免密登录

    原版资料英文,链接在此  https://www.digitalocean.com/community/tutorials/how-to-set-up-ssh-keys--2 在客户端操作 ssh-k ...

  6. Linux内核阅读相关

    一.likely()与unlikely()函数的意义 http://blog.chinaunix.net/uid-27665626-id-3506567.html 二.TSO.UFO.GSO.LRO. ...

  7. char,vchar,nchar,nvchar的区别

    char和varchar的长度都在1到8000之间,它们的区别在于char是定长字符数据,而varchar是变长字符数据.所谓定长就是长度固定的,当输入的数据长度没有达到指定的长度时将自动以英文空格在 ...

  8. JMS介绍入门大白话版

    以下内容转自: http://setting.iteye.com/blog/1097767 ------------------------------------------------------ ...

  9. openPOWERLINK开源POWERLINK协议栈说明文档中文非官方翻译

    GitBook分享,翻译进行中:https://winshton.gitbooks.io/openpowerlink-stack-cn/content/

  10. NOIP2008 普及组T4 立体图 解题报告-S.B.S.(施工未完成)

    题目描述 小渊是个聪明的孩子,他经常会给周围的小朋友们将写自己认为有趣的内容.最近,他准备给小朋友们讲解立体图,请你帮他画出立体图. 小渊有一块面积为m*n的矩形区域,上面有m*n个边长为1的格子,每 ...