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 相关文章推荐
在jquery中处理带有命名空间的XML数据
Jun 13 Javascript
使用jquery实现图文切换效果另加特效
Jan 20 Javascript
javascript中的toFixed固定小数位数 简单实例分享
Jul 12 Javascript
JavaScript返回网页中锚点数目的方法
Apr 03 Javascript
Bootstrap中的表单验证插件bootstrapValidator使用方法整理(推荐)
Jun 21 Javascript
jQuery获取this当前对象子元素对象的方法
Nov 29 Javascript
Web前端框架bootstrap实战【第一次接触使用】
Dec 28 Javascript
Javascript Event(事件)的传播与冒泡
Jan 23 Javascript
bootstrap daterangepicker双日历时间段选择控件详解
Jun 15 Javascript
使用webpack3.0配置webpack-dev-server教程
May 29 Javascript
微信小程序新手教程之页面打开数量限制
Mar 03 Javascript
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
Apr 13 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
S900/ ETON E1-XM 收音机
2021/03/02 无线电
php通过Chianz.com获取IP地址与地区的方法
2015/01/14 PHP
Laravel网站打开速度优化的方法汇总
2017/07/16 PHP
VSCode+PHPstudy配置PHP开发环境的步骤详解
2020/08/20 PHP
破除一些网站复制、右键限制
2006/11/04 Javascript
基于jquery的滚动条滚动固定div(附演示下载)
2012/10/29 Javascript
javascript日期格式化示例分享
2014/03/05 Javascript
使用jquery中height()方法获取各种高度大全
2014/04/02 Javascript
jQuery实现tab标签自动切换的方法
2015/02/28 Javascript
javascript实现简单的鼠标拖动效果实例
2015/04/10 Javascript
基于Javascript实现倒计时功能
2016/02/22 Javascript
javascript中错误使用var造成undefined
2016/03/31 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
2016/08/04 Javascript
原生js实现淘宝购物车功能
2020/06/23 Javascript
如何理解jQuery中的ajaxSubmit方法
2017/03/13 Javascript
Nodejs实现多房间简易聊天室功能
2017/06/20 NodeJs
在iframe中使bootstrap的模态框在父页面弹出问题
2017/08/07 Javascript
详解vue2 $watch要注意的问题
2017/09/08 Javascript
JS实现点击发送验证码 xx秒后重新发送功能
2019/07/30 Javascript
浅谈layui 绑定form submit提交表单的注意事项
2019/10/25 Javascript
JavaScript制作3D旋转相册
2020/08/02 Javascript
Vue中常用rules校验规则(实例代码)
2019/11/14 Javascript
ant design vue中表格指定格式渲染方式
2020/10/28 Javascript
element-ui中el-upload多文件一次性上传的实现
2020/12/02 Javascript
Python中的列表知识点汇总
2015/04/14 Python
python开发之thread实现布朗运动的方法
2015/11/11 Python
python算法演练_One Rule 算法(详解)
2017/05/17 Python
Python设计模式之职责链模式原理与用法实例分析
2019/01/11 Python
Python实现一个数组除以一个数的例子
2019/07/20 Python
Python使用jpype模块调用jar包过程解析
2020/07/29 Python
python对批量WAV音频进行等长分割的方法实现
2020/09/25 Python
网络管理员岗位职责
2015/02/12 职场文书
施工员岗位职责范本
2015/04/11 职场文书
汤姆叔叔的小屋读书笔记
2015/06/30 职场文书
Vscode中SSH插件如何远程连接Linux
2022/05/02 Servers
3050和2060哪个好 性能差多少 差距有多大 谁更有性价比
2022/06/17 数码科技