Bootstrap--下拉菜单.dropdown
下拉菜单.dropdown
.dropdown <下拉菜单触发器button+下拉菜单ul>
.dropdown 包裹层
.dropdown-toggle 下拉菜单触发器
data-toggle="dropdown 自定义属性 可以与js关联起来
.dropdown-menu 下拉菜单
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
如果你想让菜单默认是打开状态,需要添加一个.open的类
<div class="dropdown open">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
.dropup
向上弹出菜单
通过为下拉菜单的父元素设置 .dropup
类,可以让菜单向上弹出(默认是向下弹出的)
<div class="dropup">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
1、对齐方式:默认左对齐
右对齐:给.dropdown-menu添加.dropdown-menu-right类就可以
注意:它是以父级的位置来对齐的
怎么样让下拉菜单以下拉菜单触发器的右端对齐呢?那就需要给下拉菜单触发器button添加一个.btn block的类
<div class="dropup">
<button class="btn btn-default dropdown-toggle btn-block" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right " aria-labelledby="dropdownMenu2">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
2、下拉菜单的标题 dropdown-header
在任何下拉菜单中均可通过添加标题来标明一组动作。
如果想让下拉菜单的标题居中,就需要添加一个.text-center的类
<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
...
<li class="dropdown-header text-center">Dropdown header</li>
...
</ul>
3、分割线: .divider
为下拉菜单添加一条分割线,用于将多个链接分组。
<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
...
<li role="separator" class="divider"></li>
...
</ul>
4、禁用菜单:disabled
为下拉菜单中的 <li>
元素添加 .disabled
类,从而禁用相应的菜单项。
<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
<li><a href="#">Regular link</a></li>
<li class="disabled"><a href="#">Disabled link</a></li>
<li><a href="#">Another link</a></li>
</ul>
注意:
aria-haspopup="true" aria-expanded="true" 为需要借助屏幕阅读器的特殊人群设置的
id="dropdownMenu1" aria-labelledby="dropdownMenu1" 通过id将触发器和下拉菜单关联起来
Bootstrap--下拉菜单.dropdown的更多相关文章
- Bootstrap 下拉菜单(dropdown)插件
使用下拉菜单的插件,您可以向任何组件(比如:导航栏,标签页,胶囊式导航,按钮)添加下拉菜单 用法 您可以切换下拉菜单(dropdown)插件隐藏内容 1.通过data属性,向链接或按钮添加data-t ...
- Bootstrap下拉菜单
前面的话 网页交互的时候经常会需要上下文菜单或者隐藏/显示菜单项,Bootstrap默认提供了用于显示链接列表的可切换.有上下文的菜单.而且在各种交互状态下的菜单展示需要和javascript插件配合 ...
- Bootstrap下拉菜单的使用(附源码文件)--Bootstrap
1.Bootstrap下拉菜单的使用,源代码如下:(如有不当之处,还望大佬们指出哈……) <!DOCTYPE html> <html lang="en"> ...
- Bootstrap -- 下拉菜单、输入框组、导航菜单
Bootstrap -- 下拉菜单.输入框组.导航菜单 1. 下拉菜单 可以使用带有各种大小按钮的下拉菜单:.btn-lg..btn-sm 或 .btn-xs. 实现下拉菜单: <!DOCTYP ...
- 第二百四十四节,Bootstrap下拉菜单和滚动监听插件
Bootstrap下拉菜单和滚动监听插件 学习要点: 1.下拉菜单 2.滚动监听 本节课我们主要学习一下 Bootstrap 中的下拉菜单插件,这个插件在以组件的形式我们 已经学习过,那么现在来看看怎 ...
- bootstrap下拉菜单(Dropdowns)
本章将重点讲解bootstrap下拉菜单(Dropdowns),下拉菜单是可切换的,是以列表格式显示链接的上下文菜单. <!DOCTYPE html><html><hea ...
- 8.bootstrap下拉菜单、按钮组、按钮式下拉菜单
下拉菜单 dropdown 对齐方式: .dropdown-menu-right .dropdown-menu-left <div class="container" ...
- bootstrap 下拉菜单不显示的解决办法
bootstrap 下拉菜单不显示,最后改成如下正常显示: <div class="btn-group open"> <ul class="dropdo ...
- Unity3D 重写下拉菜单/Dropdown组件、开启每个按钮可用
Override Dropdown Component 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) ...
- 第八篇.Bootstrap下拉菜单
给div一个class “dropdown”,将下拉菜单放在这个div里就可以显示bootstrap的下拉菜单. <div class="dropdown"> < ...
随机推荐
- Java 第九周总结
1. 本周学习总结 2. 书面作业 1.常用异常 1.1 截图你的提交结果(出现学号) 1.2 自己以前编写的代码中经常出现什么异常.需要捕获吗(为什么)?应如何避免? 以前的代码经常出现空指针的,需 ...
- thinkphp介绍及访问方式
ThinkPHP框架 1.解压到www目录下,里面有一个index文件是入口文件,通过修改里面的APP_PATH进入不同的应用 2.ThinkPHP文件夹是核心文件夹,里面东西不要修改,可以查看,比如 ...
- openfire:Openfire源代码在eclipse中的运行配置 + 与spark结合进行二次开发
1.下载源代码:http://www.igniterealtime.org/downloads/source.jsp 2.把源代码解压出的openfire_src文件夹放至eclipse workpl ...
- jmeter 分布式实战
最近作者在公司部署公司的分布式压力测试情况的时候,遇到了问题,什么问题呢,各种错误,于是大晚上的为了不耽误压测,我们就两个同事两台电脑搞,可是还是不行的呢,我要研究研究这个是什么梗,于是乎,大晚上加班 ...
- JMeter基础之—录制脚本
Jmeter 是一个非常流行的性能测试工具,虽然与LoadRunner相比有很多不足,比如:它结果分析能力没有LoadRunner详细:很它的优点也有很多: l 开源,他是一款开源的免费软 ...
- Linux(centos)环境下Lamp环境搭建,成功版。
搭建环境必须条件:1.Linux环境,2.Apache,3.mysql ,4.PHP,搭建步骤如下 1.开启Linux,得到root权限:sudo su 接下来输入登录密码,进入root权限,因为安装 ...
- 让MessageBox对话框总在最前面
调用MessageBox的时候,如果最后一个参数用上MB_SYSTEMMODAL的话,可以让对话框在最前面
- Hadoop 2:Mapper和Reduce
Hadoop 2:Mapper和Reduce Understanding and Practicing Hadoop Mapper and Reduce 1 Mapper过程 Hadoop将输入数据划 ...
- hdu1698线段树的区间更新区间查询
Just a Hook Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Tota ...
- Docker镜像加速
安装好Docker后接下来就是愉快的玩耍了,可是实际情况并不愉快 因为docker的默认镜像源在国外,鉴于国内特殊的网络原因访问起来往往很慢或者完全访问不了,幸好国内有类似的镜像源可以使用,我使用的是 ...