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 相关文章推荐
$.getJSON在IE下失效的原因分析及解决方法
Jun 16 Javascript
jQuery Animation实现CSS3动画示例介绍
Aug 14 Javascript
javascript实现的HashMap类代码
Jun 27 Javascript
jquery滚动到顶部底部代码
Apr 20 Javascript
简介JavaScript中的italics()方法的使用
Jun 08 Javascript
chrome浏览器如何断点调试异步加载的JS
Sep 05 Javascript
深入学习Bootstrap表单
Dec 13 Javascript
vue移动端html5页面根据屏幕适配的四种解决方法
Oct 19 Javascript
vue+express+jwt持久化登录的方法
Jun 14 Javascript
Node.js从字符串生成文件流的实现方法
Aug 18 Javascript
关于vue项目中搜索节流的实现代码
Sep 17 Javascript
ES6 Iterator遍历器原理,应用场景及相关常用知识拓展详解
Feb 15 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
服务器端解压缩zip的脚本
2006/12/22 PHP
php打开远程文件的方法和风险及解决方法
2013/11/12 PHP
php支付宝接口用法分析
2015/01/04 PHP
php无法连接mysql数据库的正确解决方法
2016/07/01 PHP
PHP面向对象程序设计高级特性详解(接口,继承,抽象类,析构,克隆等)
2016/12/02 PHP
PHP查询分页的实现代码
2017/06/09 PHP
PHP面向对象之工作单元(实例讲解)
2017/06/26 PHP
确保Laravel网站不会被嵌入到其他站点中的方法
2019/10/18 PHP
jQuery EasyUI中对表格进行编辑的实现代码
2010/06/10 Javascript
jquery模拟LCD 时钟的html文件源代码
2014/06/16 Javascript
JavaScript里实用的原生API汇总
2015/05/14 Javascript
javascript随机抽取0-100之间不重复的10个数
2016/02/25 Javascript
浅析Bootstrap表格的使用
2016/06/23 Javascript
Angular多选、全选、批量选择操作实例代码
2017/03/10 Javascript
基于vue的换肤功能的示例代码
2017/10/10 Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
2017/10/31 Javascript
JavaScript实现的反序列化json字符串操作示例
2018/07/18 Javascript
详解angular应用容器化部署
2018/08/14 Javascript
使用Vue.js 和Chart.js制作绚丽多彩的图表
2019/06/15 Javascript
vue 更改连接后台的api示例
2019/11/11 Javascript
js实现星星海特效的示例
2020/09/28 Javascript
[51:36]EG vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
python实现支持目录FTP上传下载文件的方法
2015/06/03 Python
Pandas之MultiIndex对象的示例详解
2019/06/25 Python
Python Selenium 设置元素等待的三种方式
2020/03/18 Python
Python 随机生成测试数据的模块:faker基本使用方法详解
2020/04/09 Python
python将数据插入数据库的代码分享
2020/08/16 Python
使用HTML5 IndexDB存储图像和文件的示例
2018/11/05 HTML / CSS
举例详解HTML5中使用JSON格式提交表单
2015/06/16 HTML / CSS
Html5让容器充满屏幕高度或自适应剩余高度的布局实现
2020/05/14 HTML / CSS
毕业生个人求职的自我评价
2013/10/28 职场文书
护理职业生涯规划书
2014/01/24 职场文书
体育教师自我鉴定
2014/02/12 职场文书
房地产财务部员工岗位职责
2014/03/12 职场文书
小学校园广播稿集锦
2014/10/04 职场文书
费城故事观后感
2015/06/10 职场文书