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 相关文章推荐
使用javascript实现Iframe自适应高度
Dec 24 Javascript
js中的事件捕捉模型与冒泡模型实例分析
Jan 10 Javascript
Javascript中的apply()方法浅析
Mar 15 Javascript
jQuery插件slick实现响应式移动端幻灯片图片切换特效
Apr 12 Javascript
分分钟玩转Vue.js组件
Oct 25 Javascript
jQuery+pjax简单示例汇总
Apr 21 jQuery
谈谈对vue响应式数据更新的误解
Aug 01 Javascript
vue自定义过滤器创建和使用方法详解
Nov 06 Javascript
浅谈webpack下的AOP式无侵入注入
Nov 12 Javascript
修改npm全局安装模式的路径方法
May 15 Javascript
vue.js父子组件通信动态绑定的实例
Sep 28 Javascript
如何为你的JS项目添加智能提示与类型检查详解
Mar 12 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中限制IP段访问、禁止IP提交表单的代码
2011/04/23 PHP
php获取百度收录、百度热词及百度快照的方法
2015/04/02 PHP
php获得文件夹下所有文件的递归算法的简单实例
2016/11/01 PHP
PHP filesize函数用法浅析
2019/02/15 PHP
yii2 开发api接口时优雅的处理全局异常的方法
2019/05/14 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
jQuery 核心函数以及jQuery对象
2010/03/23 Javascript
IE下js调试工具Companion.JS
2010/10/15 Javascript
JS自定义功能函数实现动态添加网址参数修改网址参数值
2013/08/02 Javascript
得到form下的所有的input的js代码
2013/11/07 Javascript
angularjs中的单元测试实例
2014/12/06 Javascript
学习JavaScript设计模式之策略模式
2016/01/12 Javascript
通过jquery实现页面的动画效果(实例代码)
2016/09/18 Javascript
jQuery事件用法详解
2016/10/06 Javascript
全面总结Javascript对数组对象的各种操作
2017/01/22 Javascript
nginx配置域名后的二级目录访问不同项目的配置操作
2020/11/06 Javascript
Python实现豆瓣图片下载的方法
2015/05/25 Python
python列出目录下指定文件与子目录的方法
2015/07/03 Python
Python创建二维数组实例(关于list的一个小坑)
2017/11/07 Python
python3+selenium自动化测试框架详解
2019/03/17 Python
python3人脸识别的两种方法
2019/04/25 Python
解决python super()调用多重继承函数的问题
2019/06/26 Python
解决Python设置函数调用超时,进程卡住的问题
2019/08/08 Python
pandas将多个dataframe以多个sheet的形式保存到一个excel文件中
2019/10/10 Python
python实现把两个二维array叠加成三维array示例
2019/11/29 Python
Python列表解析操作实例总结
2020/02/26 Python
历史专业毕业生的自我鉴定
2013/11/15 职场文书
自动化专业职业生涯规划书范文
2014/01/16 职场文书
股东合作协议书范本
2014/04/14 职场文书
《云房子》教学反思
2014/04/20 职场文书
环保公益策划方案
2014/08/15 职场文书
布达拉宫的导游词
2015/02/02 职场文书
劳资员岗位职责
2015/02/13 职场文书
幼儿园托班开学寄语(2015秋季)
2015/05/27 职场文书
法制主题班会教案
2015/08/13 职场文书
Python数据分析之绘图和可视化详解
2021/06/02 Python