bootstrap组件之按钮式下拉菜单小结


Posted in Javascript onJanuary 19, 2017

1、单按钮下拉菜单

基础的下拉菜单最外层是.dropdown的div

现在只需要改成.btnd-group的div就可以实现单按钮的下拉菜单

<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>

2、分裂式按钮下拉菜单

分裂式按钮下拉菜单,就是按钮和图表分离开

bootstrap组件之按钮式下拉菜单小结

<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
    <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>

3、尺寸

在button上添加.btn-lg.btn-sm.btn-xs可以控制按钮大小

<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" role="menu">
  ...
 </ul>
</div>

4、向上弹出式菜单

只需要在最外层的div上添加一个.dropup就可以实现向上弹出的菜单

bootstrap组件之按钮式下拉菜单小结

<div class="btn-group dropup">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
    <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组件之按钮式下拉菜单,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js类中获取外部函数名的方法
Aug 19 Javascript
两种WEB下的模态对话框 (asp.net或js的分别实现)
Dec 02 Javascript
关于extjs4如何获取grid修改后的数据的问题
Aug 07 Javascript
使用javascript实现雪花飘落的效果
Jan 13 Javascript
jQuery prototype冲突的2种解决方法(附demo示例下载)
Jan 21 Javascript
EasyUI Combobox设置默认值 获取text的方法
Nov 28 Javascript
AngularJS表单验证功能分析
May 26 Javascript
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 jQuery
浅析vue-router jquery和params传参(接收参数)$router $route的区别
Aug 03 jQuery
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
Nov 13 Javascript
jQuery实现王者荣耀手风琴效果
Jan 17 jQuery
JS通过识别id、value值对checkbox设置选中状态
Feb 19 Javascript
AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】
Jan 19 #Javascript
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
Jan 19 #Javascript
AngularJS的依赖注入实例分析(使用module和injector)
Jan 19 #Javascript
学好js,这些js函数概念一定要知道【推荐】
Jan 19 #Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
Jan 19 #Javascript
Reactjs实现通用分页组件的实例代码
Jan 19 #Javascript
react.js 翻页插件实例代码
Jan 19 #Javascript
You might like
基于文本的搜索
2006/10/09 PHP
非常不错的MySQL优化的8条经验
2008/03/24 PHP
让的PHP代码飞起来的40条小技巧(提升php效率)
2010/04/12 PHP
《PHP编程最快明白》第八讲:php启发和小结
2010/11/01 PHP
php过滤敏感词的示例
2014/03/31 PHP
php生成年月日下载列表的方法
2015/04/24 PHP
通过身份证号得到出生日期和性别的js代码
2009/11/23 Javascript
简体中文转换繁体中文(实现代码)
2013/12/25 Javascript
js操作模态窗口及父子窗口间相互传值示例
2014/06/09 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
2016/05/24 Javascript
Bootstrap轮播插件使用代码
2016/10/11 Javascript
图解Javascript——作用域、作用域链、闭包
2017/03/21 Javascript
ajax +NodeJS 实现图片上传实例
2017/06/06 NodeJs
jQuery实现拖动效果的实例代码
2017/06/25 jQuery
新手vue构建单页面应用实例代码
2017/09/18 Javascript
Node.js连接Sql Server 2008及数据层封装详解
2018/08/27 Javascript
小程序分享链接onShareAppMessage的具体用法
2020/05/22 Javascript
[54:30]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python 根据正则表达式提取指定的内容实例详解
2016/12/04 Python
Python更新数据库脚本两种方法及对比介绍
2017/07/27 Python
Python编程把二叉树打印成多行代码
2018/01/04 Python
Python实现获取本地及远程图片大小的方法示例
2018/07/21 Python
使用python打印十行杨辉三角过程详解
2019/07/10 Python
Python判断三段线能否构成三角形的代码
2020/04/12 Python
pyCharm 实现关闭代码检查
2020/06/09 Python
python语言是免费还是收费的?
2020/06/15 Python
python代码中怎么换行
2020/06/17 Python
IE下实现类似CSS3 text-shadow文字阴影的几种方法
2011/05/11 HTML / CSS
css3圆角样式分享自定义按钮样式
2013/12/27 HTML / CSS
HTML5网页音乐播放器的示例代码
2017/11/09 HTML / CSS
Hotels.com台湾:饭店订房网
2017/09/06 全球购物
说说你所熟悉或听说过的j2ee中的几种常用模式?及对设计模式的一些看法
2012/05/24 面试题
聚美优品恶搞广告词
2014/03/14 职场文书
汽车车尾标语大全
2015/08/11 职场文书
2016应届毕业生实习评语
2015/12/01 职场文书
SQL Server中T-SQL标识符介绍与无排序生成序号的方法
2022/05/25 SQL Server