Bootstrap实现下拉菜单效果


Posted in Javascript onApril 29, 2016

下拉菜单用于显示链接列表的可切换、有上下文的菜单。

1、案例

将下拉菜单触发器和下拉菜单都包裹在.dropdown里,然后添加组成菜单的HTML代码。

<div class="dropdown">
 <button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
 Dropdown
 <span class="caret"></span>
 </button>
 <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
 <li role="presentation" class="divider"></li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
 </ul>
 </div>

可以通过上面的代码发现,里面可能有很多陌生的样式类或者属性。

一个Dropdown按钮和右侧有个小图标caret,当然这个小图标和按钮的文本是平级的。

首先看button按钮中有个dropdown-toggle,还有一个data-toggle属性,根据这个属性来弹出下来列表。

紧接着ul标签的dropdown-menu应该是和上面button按钮的样式类dropdown-toggle联合使用,在通过aria-labelledby绑定上面的button按钮。

下来第四个li标签中有个divider其实是一个分割线的样式类。

大概我理解的就这个样子,理解的肯定不到位。

Bootstrap实现下拉菜单效果

2、对齐选项

给下拉菜单.dropdown-menu加上.text-right 使文字右对齐。

<div class="dropdown">
 <button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
 Dropdown
 <span class="caret"></span>
 </button>
 <ul class="dropdown-menu text-right" role="menu" aria-labelledby="dropdownMenu1">
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
 <li role="presentation" class="divider"></li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
 </ul>
 </div>

只是在上面的代码中的ul标签上添加了一个text-right的样式类。

Bootstrap实现下拉菜单效果

3、标题

在任何下拉菜单中均可通过添加标题来标明一组动作。

<h1>下拉菜单</h1>
 <div class="dropdown">
 <button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
 Dropdown
 <span class="caret"></span>
 </button>
 <ul class="dropdown-menu text-right" role="menu" aria-labelledby="dropdownMenu1">
 <li role="presentation" class="dropdown-header">Dropdown header</li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
 <li role="presentation" class="divider"></li>
 <li role="presentation" class="dropdown-header">Dropdown header</li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
 </ul>
 </div>

主要是添加了<li role="presentation" class="dropdown-header">Dropdown header</li>   里面有个.dropdown-header的样式类。

Bootstrap实现下拉菜单效果

4、禁用的菜单项

给下拉菜单中的<li>加上.disabled禁用链接。

继续修改上面的代码将Something else here行的代码进行替换

<li class="disabled" role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>

主要是在li标签中添加.disabled的样式类。

你运行之后可以查看效果,其实效果和上面的标题样式差不多,当你点击的时候会有一个禁用的图标显示。

5、基本案例

Bootstrap实现下拉菜单效果

1)、按钮式下拉菜单
把任何按钮放入.btn-group然后加入正确的菜单标记,就可以做成下拉菜单触发器。

单按钮下拉菜单

只要改变一些基本的标记,就能把按钮变成下拉菜单开关。

<div class="btn-group">
 <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
 Action <span class="caret"></span>
 </button>
 <ul class="dropdown-menu" role="menu">
 <li><a href="#">Action</a></li>
 <li><a href="#">Another action</a></li>
 <li><a href="#">Something else here</a></li>
 <li class="divider"></li>
 <li><a href="#">Separated link</a></li>
 </ul>
</div>

Bootstrap实现下拉菜单效果

分裂式按钮下拉菜单

相似地,分裂式按钮下拉菜单也需要同样的改变标记,但只要多一个分开的按钮。

<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <div class="dropdown">
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
  <span class="caret"></span>
  <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu" role="menu">
  <li><a href="#">Action</a></li>
  <li><a href="#">Another action</a></li>
  <li><a href="#">Something else here</a></li>
  <li class="divider"></li>
  <li><a href="#">Separated link</a></li>
  </ul>
  </div>
 </div

只能点击小图标才能出现下来菜单额。

Bootstrap实现下拉菜单效果

2)、尺寸

下拉菜单按钮适用所有尺寸的按钮。

<div class="btn-group">
 <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
 Large button <span class="caret"></span>
 </button>
 <ul class="dropdown-menu">
 ...
 </ul>
</div>

<!-- Small button group -->
<div class="btn-group">
 <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
 Small button <span class="caret"></span>
 </button>
 <ul class="dropdown-menu">
 ...
 </ul>
</div>

<!-- Extra small button group -->
<div class="btn-group">
 <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
 Extra small button <span class="caret"></span>
 </button>
 <ul class="dropdown-menu">
 ...
 </ul>
</div>

Bootstrap实现下拉菜单效果

通过样式类.btn-lg、 .btn-sm、.btn-xs来控制按钮的大小。

3)、向上弹出式菜单

给父元素添加.dropup就能使触发的下拉菜单在元素上方。

<div class="btn-group dropup">
 <button type="button" class="btn btn-default">Dropup</button>
 <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
 <span class="caret"></span>
 <span class="sr-only">Toggle Dropdown</span>
 </button>
 <ul class="dropdown-menu">
 <!-- Dropdown menu links -->
 </ul>
</div>

Bootstrap实现下拉菜单效果

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

 本文主要介绍了下拉菜单的相关内容,然后介绍了按钮和下拉菜单的组合,变化还是蛮多的,样式也不错,希望大家喜欢。

Javascript 相关文章推荐
小议javascript 设计模式 推荐
Oct 28 Javascript
通过复制Table生成word和excel的javascript代码
Jan 20 Javascript
JS将制定内容复制到剪切板示例代码
Feb 11 Javascript
jQuery垂直多级导航菜单代码分享
Aug 18 Javascript
jQuery实现的仿百度分页足迹效果代码
Oct 30 Javascript
JS实现在状态栏显示打字效果完整实例
Nov 02 Javascript
JavaScript正则表达式的分组匹配详解
Feb 13 Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
Jul 07 Javascript
解决vue的变量在settimeout内部效果失效的问题
Aug 30 Javascript
Seajs源码详解分析
Apr 02 Javascript
vue中beforeRouteLeave实现页面回退不刷新的示例代码
Nov 01 Javascript
element-ui中按需引入的实现
Dec 25 Javascript
Easyui Treegrid改变默认图标的方法
Apr 29 #Javascript
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
Apr 29 #Javascript
JS组件Bootstrap导航条使用方法详解
Apr 29 #Javascript
Treegrid的动态加载实例代码
Apr 29 #Javascript
Easyui 之 Treegrid 笔记
Apr 29 #Javascript
浅析BootStrap模态框的使用(经典)
Apr 29 #Javascript
jQuery模仿阿里云购买服务器选择购买时间长度的代码
Apr 29 #Javascript
You might like
php 过滤英文标点符号及过滤中文标点符号代码
2014/06/12 PHP
php数组比较实现查找连续数的方法
2015/07/29 PHP
详解Yii2 rules 的验证规则
2016/12/02 PHP
php的无刷新操作实现方法分析
2020/02/28 PHP
Ext JS Grid在IE6 下宽度的问题解决方法
2009/02/15 Javascript
基于JQuery制作的产品广告效果
2010/12/08 Javascript
js 控制图片大小核心讲解
2013/10/09 Javascript
手机端网页点击链接触发自动拨打或保存电话的示例代码
2014/08/15 Javascript
理解javascript中DOM事件
2015/12/25 Javascript
javascript基础知识分享之类与函数化
2016/02/13 Javascript
JS工作中的小贴士之”闭包“与事件委托的”阻止冒泡“
2016/06/16 Javascript
AngularJS教程 ng-style 指令简单示例
2016/08/03 Javascript
vue.js  父向子组件传参的实例代码
2017/10/29 Javascript
微信小程序自定义导航栏
2018/12/31 Javascript
vue 子组件和父组件传值的示例
2020/09/11 Javascript
使用Python程序抓取新浪在国内的所有IP的教程
2015/05/04 Python
Python 生成 -1~1 之间的随机数矩阵方法
2018/08/04 Python
在mac下查找python包存放路径site-packages的实现方法
2018/11/06 Python
关于python中plt.hist参数的使用详解
2019/11/28 Python
Python中BeautifulSoup通过查找Id获取元素信息
2020/12/07 Python
python 使用xlsxwriter循环向excel中插入数据和图片的操作
2021/01/01 Python
scrapy-splash简单使用详解
2021/02/21 Python
突袭HTML5之Javascript API扩展2—地理信息服务及地理位置API学习
2013/01/31 HTML / CSS
VICHY薇姿英国官网:全球专业敏感肌护肤领先品牌
2017/07/04 全球购物
ECCO爱步官方旗舰店:丹麦鞋履品牌
2018/01/02 全球购物
澳大利亚宠物食品和用品商店:PETstock
2020/01/02 全球购物
什么情况下你必须要把一个类定义为abstract的
2013/01/06 面试题
城市精细化管理实施方案
2014/03/04 职场文书
作风转变心得体会
2014/09/02 职场文书
2014年社区国庆节活动方案
2014/09/16 职场文书
县长“四风”对照检查材料思想汇报
2014/10/05 职场文书
入党介绍人意见范文
2015/06/01 职场文书
2015年小学财务工作总结
2015/07/20 职场文书
《正面管教》读后有感:和善而坚定的旅程
2019/12/19 职场文书
详解TS数字分隔符和更严格的类属性检查
2021/05/06 Javascript
Python3 类型标注支持操作
2021/06/02 Python