Bootstrap学习笔记-----下拉菜单
来源:互联网 发布:行程编码压缩算法 编辑:程序博客网 时间:2024/06/05 11:38
http://www.cnblogs.com/shanoon/p/5378187.html
一、基本用法
<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> 下拉菜单 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> </ul></div>
效果如下图所示:
1.1 使用方法:
1、使用一个名为“dropdown”的容器包裹了整个下拉菜单元素,示例中为:
<div class="dropdown"></div>
2、使用了一个<button>按钮做为父菜单,并且定义类名“dropdown-toggle”和自定义“data-toggle”属性,且值必须和最外容器类名一致,此示例为:
data-toggle="dropdown"
3、下拉菜单项使用一个ul列表,并且定义一个类名为“dropdown-menu”,此示例为:
<ul class="dropdown-menu">
1.2 原理分析:
ul的类dropdown-menu有个属性为display: none; 当点击显示ul时,给最外层div添加了个open的类;再次点击取消.open
.open > .dropdown-menu { display: block;}
二、下拉菜单分隔符
<li role="presentation" class="divider">
<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> 食物 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">苹果</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">香蕉</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">梨</a></li> <li role="presentation" class="divider"> //分隔符 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">萝卜</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">茄子</a></li> </ul></div>
效果如下:
三、下拉菜单的菜单标题
<li role="presentation" class="dropdown-header">第二部分菜单头部</li>
<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> 下拉菜单 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation" class="dropdown-header">第一部分菜单头部</li> //菜单头部 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> <li role="presentation" class="divider"></li> <li role="presentation" class="dropdown-header">第二部分菜单头部</li> //菜单头部 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> </ul></div>
四、下拉菜单的对齐方式
Bootstrap框架中下拉菜单默认是左对齐,如果你想让下拉菜单相对于父容器右对齐时,可以在“dropdown-menu”上添加一个“pull-right”或者“dropdown-menu-right”类名,如下所示:
<h4>使用pull-right类使下拉菜单与父容器右边对齐</h4> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> 下拉菜单 <span class="caret"></span> </button> <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1"> //pull-right <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> <li role="presentation" class="divider"></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> </ul></div><br /><br /><h4>使用dropdown-menu-right类使下拉菜单与父容器右边对齐</h4><div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> 下拉菜单 <span class="caret"></span> </button> <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu1"> //dropdown-menu-right <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> <li role="presentation" class="divider"></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> </ul></div>
五、下拉菜单的状态
当前状态(.active)和禁用状态(.disabled)
<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> 下拉菜单 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> //当前状态 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> <li role="presentation" class="divider"></li> <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> //禁用状态 </ul></div>
阅读全文
0 0
- bootstrap学习笔记-下拉菜单
- Bootstrap学习笔记-----下拉菜单
- Bootstrap学习--下拉菜单
- Bootstrap学习:下拉菜单
- Bootstrap学习:按钮下拉菜单
- 学习笔记8--bootstrap:布局组件之“下拉菜单”
- 学习笔记8--bootstrap:布局组件之“下拉菜单”
- bootstrap 学习笔记 - 5 (Glyphicons字体 + 下拉菜单 + 按钮组+ 按钮下拉菜单)
- bootstrap下拉菜单与滚动监视器学习笔记(2-1 下拉菜单(Dropdown))
- Bootstrap笔记6—下拉菜单
- bootstrap基础知识学习(下拉菜单+按钮)
- Bootstrap 学习之(七)------ 下拉菜单
- bootstrap下拉菜单与滚动监视器学习笔记(2-2 下拉菜单--属性声明式方法(一))
- Bootstrap组件学习笔记(一)——大纲、Glyphicons字体图标和下拉菜单
- h5学习笔记: 下拉菜单
- Bootstrap下拉菜单
- 【Bootstrap】下拉菜单Dropdown
- bootstrap 下拉菜单
- 序列容器之 heap
- Oracle数据库cmd控制台创建用户和权限
- js 获取农历的代码
- php如何判断SQL语句的查询结果是否为空?
- 登录防注入最简单的实现
- Bootstrap学习笔记-----下拉菜单
- C++ STL 教程
- MySQL InnoDB Update和Crash Recovery流程
- jQuery-对Select的操作集合[终结篇]
- 串口通信
- oracle的参数文件:pfile和spfile
- Linux内核配置系统
- php理解接口(1)
- Github一千多本电子书