Bootstrap CSS组件之按钮下拉菜单


Posted in Javascript onDecember 17, 2016

按钮下拉菜单

结合使用.btn-group(btn-group-lg/btn-group-sm/btn-group-xs) .dropup .btn .dropdown-menu
按钮下拉菜单是在普通的下拉菜单的基础上封装了.btn样式得效果,就类似于单击一个button按钮,然后显示隐藏的下拉菜单。

组合式下拉菜单
分离式下拉菜单
向上弹起的下拉菜单

//源码,css实现方式主要是设置.dropdown-menu样式容器的bottom为100%
.dropup .dropdown-menu,
.navbar-fixed-bottom .dropdown .dropdown-menu {
 top: auto;//高度自适应
 bottom: 100%;//距离dropup样式得元素底部100%的宽度,即靠着上边框,向上方向弹出
 margin-bottom: 2px;
}
<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <!-- Bootstrap从3.0版本开始全面支持移动平台,贯彻移动先行宗旨 -->
 <meta name="viewport" content="width=device-width, initial-scale=1">

 <title>Bootstrap 101 Template</title>

 <!-- Bootstrap -->
 <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">

 </head>
 <body>
 <!--组合式下拉菜单:
  组合式下拉菜单就是把普通标签的a元素换成button元素
  唯一不同的是外部容器从.dropdown换成了.btn-group
  注意:若没有类dropdown-toggle按钮圆角有问题 -->

 <div class="btn-group">
  <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
   Success <span class="caret"></span>
  </button>

  <ul class="dropdown-menu">
   <li> <a href="#">HTML</a> </li>
   <li> <a href="#">CSS</a> </li>
   <li> <a href="#">JS</a> </li>
  </ul>
 </div>

 <!--分离式下拉菜单:
   组合式下拉菜单是在单击按钮或者箭头的时候,都会触发弹出事件,
   但分离式则是单机箭头的时候弹出菜单-->
 <div class="btn-group">
  <button type="button" class="btn btn-success">Button</button>
  <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
   <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
   <li><a href="#">HTML</a></li>
   <li><a href="#">JS</a></li>
   <li><a href="#">CSS</a></li>
  </ul>
 </div>

 <!--向上弹起的下拉菜单 -->
 <div class="btn-group dropup">
  <button type="button" class="btn btn-success">Button</button>
  <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
   <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
   <li><a href="#">HTML</a></li>
   <li><a href="#">JS</a></li>
   <li><a href="#">CSS</a></li>
  </ul>
 </div>


 <!-- bootstrap是基于jQuery-->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
 </body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery Ajax学习实例3 向WebService发出请求,调用方法返回数据
Mar 16 Javascript
用Javascript获取页面元素的具体位置
Dec 09 Javascript
js将控件隐藏及display属性的使用介绍
Dec 30 Javascript
IE8 内存泄露(内存一直增长 )的原因及解决办法
Apr 06 Javascript
jQuery 更改checkbox的状态,无效的解决方法
Jul 22 Javascript
微信小程序 出现47001 data format error原因解决办法
Mar 10 Javascript
jQuery实现web页面樱花坠落的特效
Jun 01 jQuery
基于node.js express mvc轻量级框架实践
Sep 14 Javascript
bootstrap中selectpicker下拉框使用方法实例
Mar 22 Javascript
vue左右侧联动滚动的实现代码
Jun 06 Javascript
JavaScript设计模式之装饰者模式定义与应用示例
Jul 25 Javascript
原生js无缝轮播插件使用详解
Mar 09 Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
Dec 17 #Javascript
Bootstrap CSS组件之按钮组(btn-group)
Dec 17 #Javascript
谈谈JavaScript中浏览器兼容问题的写法小议
Dec 17 #Javascript
Bootstrap CSS组件之下拉菜单(dropdown)
Dec 17 #Javascript
深入理解JS继承和原型链的问题
Dec 17 #Javascript
Bootstrap CSS组件之输入框组
Dec 17 #Javascript
原生js验证简洁注册登录页面
Dec 17 #Javascript
You might like
PHP 一个比较完善的简单文件上传
2010/03/25 PHP
利用PHP扩展vld查看PHP opcode操作步骤
2013/03/04 PHP
PHP设置images目录不充许http访问的方法
2016/11/01 PHP
可以文本显示的公告栏的js代码
2007/03/11 Javascript
通过修改referer下载文件的方法
2008/05/11 Javascript
神奇的7个jQuery 3D插件整理
2011/01/06 Javascript
Javascript拓展String方法小结
2013/07/08 Javascript
QQ空间顶部折页撕开效果示例代码
2014/06/15 Javascript
javascript文本框内输入文字倒计数的方法
2015/02/24 Javascript
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
2015/04/30 Javascript
详解Bootstrap按钮
2016/01/04 Javascript
JS实现类似百叶窗下拉菜单效果
2016/12/30 Javascript
利用pm2部署多个node.js项目的配置教程
2017/10/22 Javascript
Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
2019/04/26 Javascript
element 中 el-menu 组件的无限极循环思路代码详解
2020/04/26 Javascript
用Python脚本来删除指定容量以上的文件的教程
2015/05/04 Python
python中实现字符串翻转的方法
2018/07/11 Python
Python解决两个整数相除只得到整数部分的实例
2018/11/10 Python
对python函数签名的方法详解
2019/01/22 Python
django 数据库返回queryset实现封装为字典
2020/05/19 Python
keras在构建LSTM模型时对变长序列的处理操作
2020/06/29 Python
学python需要去培训机构吗
2020/07/01 Python
Python3合并两个有序数组代码实例
2020/08/11 Python
pytorch下的unsqueeze和squeeze的用法说明
2021/02/06 Python
详解HTML5 data-* 自定义属性
2018/01/24 HTML / CSS
详解Html5 监听拦截Android返回键方法
2018/04/18 HTML / CSS
全球酒店比价网:HotelsCombined
2017/06/20 全球购物
管事部库房保管员岗位职责
2014/02/21 职场文书
抗洪救灾先进集体事迹材料
2014/05/26 职场文书
乡镇党员群众路线教育实践活动对照检查材料思想汇报
2014/10/05 职场文书
个人优缺点总结
2015/02/28 职场文书
九年级数学教学反思
2016/02/17 职场文书
2016年秋季趣味运动会开幕词
2016/03/04 职场文书
公文写作指导之倡议书!
2019/07/03 职场文书
Html分层的box-shadow效果的示例代码
2021/03/30 HTML / CSS
openstack中的rpc远程调用的方法
2021/07/09 Python