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 相关文章推荐
google 搜索框添加关键字实现代码
Apr 24 Javascript
javascript笔记 String类replace函数的一些事
Sep 22 Javascript
jquery统计复选框选中示例
Nov 05 Javascript
JavaScrip实现PHP print_r的数功能(三种方法)
Nov 12 Javascript
javascript数组去重方法终极总结
Jun 05 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
Aug 16 Javascript
js的touch事件的实际引用
Oct 13 Javascript
JavaScript中常用的六种互动方法示例
Mar 13 Javascript
如何使用jquery easyui创建标签组件
Nov 18 Javascript
简单理解Vue条件渲染
Dec 03 Javascript
如何实现星星评价(jquery.raty.js插件)
Dec 21 Javascript
详解用webpack2搭建angular2的项目
Jun 22 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
PHP Ajax中文乱码问题解决方法
2009/02/27 PHP
PHP 截取字符串函数整理(支持gb2312和utf-8)
2010/02/16 PHP
php 使用fopen函数创建、打开文件详解及实例代码
2016/09/24 PHP
php魔术方法功能与用法实例分析
2016/10/19 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
javascript英文日期(有时间)选择器
2007/05/02 Javascript
动态加载js、css等文件跨iframe实现
2014/02/24 Javascript
jquery选择器大全 全面详解jquery选择器
2014/03/06 Javascript
JavaScript中利用构造器函数模拟类的方法
2017/02/16 Javascript
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
2017/06/26 jQuery
JS中图片压缩的方法小结
2017/11/14 Javascript
p5.js实现斐波那契螺旋的示例代码
2018/03/22 Javascript
Vue中v-show添加表达式的问题(判断是否显示)
2018/03/26 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
2018/08/08 Javascript
vue项目使用微信公众号支付总结及遇到的坑
2018/10/23 Javascript
原生js实现的移动端可拖动进度条插件功能详解
2019/08/15 Javascript
JavaScript中的惰性载入函数及优势
2020/02/18 Javascript
详解vue路由
2020/08/05 Javascript
[02:27]《DAC最前线》之附加赛征程
2015/01/29 DOTA
[01:03:03]VP vs Mineski 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
Pyramid添加Middleware的方法实例
2013/11/27 Python
python通过BF算法实现关键词匹配的方法
2015/03/13 Python
定制FileField中的上传文件名称实例
2017/08/23 Python
Python管理Windows服务小脚本
2018/03/12 Python
Python可迭代对象操作示例
2019/05/07 Python
python获取Pandas列名的几种方法
2019/08/07 Python
交通安全寄语大全
2014/04/08 职场文书
大学生党员学习焦裕禄精神思想汇报
2014/09/10 职场文书
学校党委副书记个人对照检查材料思想汇报
2014/09/28 职场文书
写给医生的感谢信
2015/01/22 职场文书
颐和园导游词400字
2015/01/30 职场文书
房地产销售经理岗位职责
2015/02/02 职场文书
写给媳妇的检讨书
2015/05/06 职场文书
给老师的保证书怎么写
2015/05/09 职场文书
青年教师听课心得体会
2016/01/15 职场文书
安全责任协议书范本
2016/03/23 职场文书