Bootstrap系列 -- 36. 向上弹起的下拉菜单
有些菜单是需要向上弹出的,比如说你的菜单在页面最底部,而这个菜单正好有一个下拉菜单,为了让用户有更好的体验,不得不让下拉菜单向上弹出。在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. 向上弹起的下拉菜单的更多相关文章
- Bootstrap历练实例:导航内下拉菜单的用法
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- BootStrap字体图标不显示、下拉菜单不显示
在W3CSchool学习BootStrap教程时遇到的问题…… 1.字体图标不能显示 上面是正常显示的样子,不能正常显示,因为缺少下面的字体图标样式文件 (1)在下载的Bootstrap包中将font ...
- Bootstrap页面布局15 - BS带下拉菜单的按钮
带下拉菜单的按钮 <div class='btn-toolbar'> <div class='btn-group'> <a href='javascript:;' cla ...
- bootstrap 导航栏鼠标悬停显示下拉菜单
在jsp中加入一下代码: .navbar .nav > li:hover .dropdown-menu { display: block;} 全部代码如下所示: <%@ page lang ...
- bootstrap multiselect的使用 多选下拉菜单
官网网址: http://davidstutz.de/bootstrap-multiselect/
- Bootstrap_下拉菜单
在使用Bootstrap框架的下拉菜单时,必须调用Bootstrap框架提供的bootstrap.js文件. 一.普通下拉菜单 <div class="dropdown"&g ...
- Bootstrap框架(基础篇)之按钮,网格,导航栏,下拉菜单
一,按钮 注意:虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用button或a标签来制作按钮. 框架中提供了基础按 ...
- 简单叨叨bootstrap按钮无限层级下拉菜单的实现
0.写在前面的话 最近看书都懈怠了,又正值新项目,虽说并不是忙得不可开交,好吧我老实交待,我就是偷懒了其实,博客也没更.言归正传,对于前端的不熟悉现在确实是个让我头疼的事情,以至于一些功能要在网络上漫 ...
- 8.bootstrap下拉菜单、按钮组、按钮式下拉菜单
下拉菜单 dropdown 对齐方式: .dropdown-menu-right .dropdown-menu-left <div class="container" ...
随机推荐
- nginx 负载均衡示例
一.nginx nginx是一个轻量级的Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,以开源形式发布.nginx的性能稳定,功能丰富,配置简单,且占用系统资源低.可支持多个 ...
- Android Listener侦听的N种写法
Android中,View的Listener方法,在是否使用匿名类匿名对象时,有各种不同的写法. OnClickListener和其他Listener方法一样,都是View类的接口,重载实现后就能使用 ...
- redis动态修改参数配置
./redis-cli -h 10.10.10.11 -p 6401 save # 保存当前快照 # 列出所有当前配置 config get * # 查看指定配置 config get ...
- Go
一.简介 https://zh.wikipedia.org/wiki/Go 二.安装 1)低版本 http://blog.sina.com.cn/s/blog_59cc90640102xm8r.htm ...
- Merge compare columns when null
Key words: merge compare columns when we contact merge sql in ETL, When we update some columns we sh ...
- TYVJ1288 飘飘乎居士取能量块 -SilverN
描述 9月21日,今天是pink的生日,飘飘乎居士当然要去别人的领土大闹一番啦! 为了收集更多的能量到pink家大闹,飘飘乎居士准备从后花园中取出自己多年积攒的p个能量块.后花园一共被划分n个地 ...
- win10下安装Wampservice过程中遇到的问题及解决办法
今天在电脑上装Wampserver的时候遇到了几个问题,启动Wampserver无法成功,一直显示橙色.若启动成功Wampserver的图标会显示绿色. 下面的是解决方法 安装 在浏览器中搜索Wamp ...
- MIT jos 6.828 Fall 2014 训练记录(lab 3)
注:源代码参见我的github: https://github.com/YaoZengzeng/jos Part A : User Environments and Exception Handlin ...
- hihocoder 1388 &&2016 ACM/ICPC Asia Regional Beijing Online Periodic Signal
#1388 : Periodic Signal 时间限制:5000ms 单点时限:5000ms 内存限制:256MB 描述 Profess X is an expert in signal proce ...
- 读《深入理解Java虚拟机》有感——第二部分:虚拟机类加载机制
一.类加载过程 执行时机:编译程序——>执行程序(JVM启动.程序运行),类加载发生在程序运行期间 各个阶段:分为加载阶段.连接阶段(验证.准备.解析).初始化.使用.卸 ...