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
Sep 24 Javascript
JavaScript入门学习书籍推荐
Jun 12 Javascript
JQuery开发的数独游戏代码
Oct 29 Javascript
使用node.js 制作网站前台后台
Nov 13 Javascript
VUEJS实战之修复错误并且美化时间(2)
Jun 13 Javascript
AngularJS通过$http和服务器通信详解
Sep 21 Javascript
jquery css实现邮箱自动补全
Nov 14 Javascript
JavaScript两个变量交换值的实现方法
Mar 01 Javascript
微信小程序开发之入门实例教程篇
Mar 07 Javascript
ES6数组的扩展详解
Apr 25 Javascript
JS如何实现手机端输入验证码效果
May 13 Javascript
React冒泡和阻止冒泡的应用详解
Aug 18 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
德劲1107的电路分析与打磨
2021/03/02 无线电
个人总结的一些关于String、Function、Array的属性和用法
2007/01/10 Javascript
jquery遍历input取得input的name
2009/04/27 Javascript
JS 实现获取打开一个界面中输入的值
2013/03/19 Javascript
给ListBox添加双击事件示例代码
2013/12/02 Javascript
用javascript为页面添加天气显示实现思路及代码
2013/12/02 Javascript
JS连连看源码完美注释版(推荐)
2013/12/09 Javascript
跟我学Nodejs(二)--- Node.js事件模块
2014/05/21 NodeJs
JavaScript获取IP获取的是IPV6 如何校验
2016/06/12 Javascript
微信小程序tabbar不显示解决办法
2017/06/08 Javascript
微信小程序获取手机号授权用户登录功能
2017/11/09 Javascript
Webpack中publicPath路径问题详解
2018/05/03 Javascript
vue 弹出遮罩层样式实例
2020/07/22 Javascript
vant 中van-list的用法说明
2020/11/11 Javascript
[35:44]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG
2014/05/26 DOTA
python获取豆瓣电影简介代码分享
2014/01/16 Python
用Python进行简单图像识别(验证码)
2018/01/19 Python
python3实现网络爬虫之BeautifulSoup使用详解
2018/12/19 Python
Python字典的基本用法实例分析【创建、增加、获取、修改、删除】
2019/03/05 Python
Python中print函数简单使用总结
2019/08/05 Python
PyTorch 对应点相乘、矩阵相乘实例
2019/12/27 Python
python实现全排列代码(回溯、深度优先搜索)
2020/02/26 Python
Django CBV模型源码运行流程详解
2020/08/17 Python
Python编写万花尺图案实例
2021/01/03 Python
猫途鹰:全球领先的旅游点评社区
2017/04/07 全球购物
Java如何读取CLOB字段
2013/10/10 面试题
中专毕业生自我鉴定
2013/11/21 职场文书
个人实用的自我评价范文
2013/11/23 职场文书
《会变的花树叶》教学反思
2014/02/10 职场文书
《天安门广场》教学反思
2014/04/23 职场文书
大学应届毕业生求职信
2014/05/24 职场文书
工作证明范本(2篇)
2014/09/14 职场文书
2014年六五普法工作总结
2014/11/25 职场文书
团队执行力培训心得体会
2015/08/15 职场文书
2016年离婚协议书范文
2016/03/18 职场文书
webpack介绍使用配置教程详解webpack介绍和使用
2022/06/25 Javascript