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 lazyload延迟加载技术的实现原理分析
Jan 24 Javascript
JS打开层/关闭层/移动层动画效果的实例代码
May 11 Javascript
使用npm发布Node.JS程序包教程
Mar 02 Javascript
JS实现生成会变大变小的圆环实例
Aug 05 Javascript
小白谈谈对JS原型链的理解
May 03 Javascript
jQuery实现倒计时重新发送短信验证码功能示例
Jan 12 Javascript
canvas实现钟表效果
Feb 13 Javascript
JavaScript中的FileReader图片预览上传功能实现代码
Jul 24 Javascript
浅谈在fetch方法中添加header后遇到的预检请求问题
Aug 31 Javascript
用npm-run实现自动化任务的方法示例
Jan 14 Javascript
vue中实现高德定位功能
Dec 03 Javascript
浅谈JSON5解决了JSON的两大痛点
Dec 14 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数据库连接
2006/10/09 PHP
在php中判断一个请求是ajax请求还是普通请求的方法
2011/06/28 PHP
php FLEA中二叉树数组的遍历输出
2012/09/26 PHP
php多任务程序实例解析
2014/07/19 PHP
php 模拟 asp.net webFrom 按钮提交事件实例
2014/10/13 PHP
laravel-admin表单提交隐藏一些数据,回调时获取数据的方法
2019/10/08 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
jquery tools之tooltip
2009/07/25 Javascript
jQuery预加载图片常用方法
2015/06/15 Javascript
jQuery 1.9.1源码分析系列(十三)之位置大小操作
2015/12/02 Javascript
详解vue事件对象、冒泡、阻止默认行为
2017/03/20 Javascript
angular select 默认值设置方法
2017/06/23 Javascript
前端必备插件之纯原生JS的瀑布流插件Macy.js
2017/11/22 Javascript
Vue中的Vux配置指南
2017/12/08 Javascript
Express下采用bcryptjs进行密码加密的方法
2018/02/07 Javascript
vuejs点击class变化的实例
2018/09/05 Javascript
基于JavaScript实现一个简单的Vue
2018/09/26 Javascript
微信小程序 弹窗输入组件的实现解析
2019/08/12 Javascript
JavaScript数组去重实现方法小结
2020/01/17 Javascript
OpenLayers3实现图层控件功能
2020/09/25 Javascript
vue+echarts实现中国地图流动效果(步骤详解)
2021/01/27 Vue.js
[47:52]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第二场 11.26
2020/11/30 DOTA
解析Mac OS下部署Pyhton的Django框架项目的过程
2016/05/03 Python
Pycharm中Python环境配置常见问题解析
2020/01/16 Python
Python collections.deque双边队列原理详解
2020/10/05 Python
eDreams澳大利亚:预订机票、酒店和度假产品
2017/04/19 全球购物
Interhome丹麦:在线预订度假屋和公寓
2019/07/18 全球购物
Book Depository美国:全球领先的专业网上书店之一
2019/08/14 全球购物
计算机毕业生自荐信
2014/06/12 职场文书
给上级领导的感谢信
2015/01/22 职场文书
电子商务专业求职信范文
2015/03/19 职场文书
2015年网络管理员工作总结
2015/05/21 职场文书
2019通用版导游词范本!
2019/08/07 职场文书
python 实现两个变量值进行交换的n种操作
2021/06/02 Python
python数字类型和占位符详情
2022/03/13 Python
Redis安装使用RedisJSON模块的方法
2022/03/23 Redis