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 相关文章推荐
解决FLASH需要点击激活的代码
Dec 20 Javascript
js判断客户端是iOS还是Android等移动终端的方法
Dec 11 Javascript
javascript数组操作(创建、元素删除、数组的拷贝)
Apr 07 Javascript
5款JavaScript代码压缩工具推荐
Jul 07 Javascript
javascript变量声明实例分析
Apr 25 Javascript
Bootstrap嵌入jqGrid,使你的table牛逼起来
May 05 Javascript
vue生成token保存在客户端localStorage中的方法
Oct 25 Javascript
Vue拖拽组件开发实例详解
May 11 Javascript
解决vue无法设置滚动位置的问题
Oct 07 Javascript
vue-cli3+typescript新建一个项目的思路分析
Aug 06 Javascript
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
Sep 04 Javascript
浅谈Vue使用Elementui修改默认的最快方法
Dec 05 Vue.js
谈谈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/02/20 PHP
详细解读PHP的Yii框架中登陆功能的实现
2015/08/21 PHP
laravel实现上传图片的两种方式小结
2019/10/12 PHP
无语,javascript居然支持中文(unicode)编程!
2007/04/12 Javascript
javascript web对话框与弹出窗口
2009/02/22 Javascript
使用GruntJS链接与压缩多个JavaScript文件过程详解
2013/08/02 Javascript
jquery自定义类似$.ajax()的方法实现代码
2013/08/13 Javascript
jquery插件开发之实现google+圈子选择功能
2014/03/10 Javascript
JavaScript中的原型链prototype介绍
2014/12/30 Javascript
JavaScript将数字转换成大写中文的方法
2015/03/23 Javascript
轻松学习jQuery插件EasyUI EasyUI实现树形网络基本操作(2)
2015/11/30 Javascript
jQuery插件扩展测试实例
2016/06/21 Javascript
基于angularjs实现图片放大镜效果
2016/08/31 Javascript
bootstrap table配置参数例子
2017/01/05 Javascript
Angular 2父子组件数据传递之局部变量获取子组件其他成员
2017/07/04 Javascript
vue中七牛插件使用的实例代码
2017/07/28 Javascript
浅谈layui 表单元素的选中问题
2019/10/25 Javascript
仿照Element-ui实现一个简易的$message方法
2020/09/14 Javascript
基于使用paramiko执行远程linux主机命令(详解)
2017/10/16 Python
Python通过调用mysql存储过程实现更新数据功能示例
2018/04/03 Python
python实现批量修改图片格式和尺寸
2018/06/07 Python
python 产生token及token验证的方法
2018/12/26 Python
Python设计模式之外观模式实例详解
2019/01/17 Python
python数据类型之间怎么转换技巧分享
2019/08/20 Python
Python requests模块基础使用方法实例及高级应用(自动登陆,抓取网页源码)实例详解
2020/02/14 Python
德国EGOIST网店:销售畅销的设计师品牌
2017/04/18 全球购物
沃达丰英国有限公司:Vodafone英国
2019/04/16 全球购物
迪士尼西班牙官方网上商店:ShopDisney西班牙
2020/02/02 全球购物
如何开启linux的ssh服务
2015/02/14 面试题
Prototype如何更新局部页面
2013/03/03 面试题
外企办公室竞聘演讲稿
2013/12/29 职场文书
上课迟到检讨书100字
2014/01/11 职场文书
小学中秋节活动方案
2014/02/06 职场文书
竞选学生会主席演讲稿
2014/04/24 职场文书
行政监察建议书
2014/05/19 职场文书
外出学习心得体会范文
2016/01/18 职场文书