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 相关文章推荐
动态加载iframe
Jun 16 Javascript
多个datatable共存造成多个表格的checkbox都被选中
Jul 11 Javascript
jQuery常用操作方法及常用函数总结
Jun 19 Javascript
使用js dom和jquery分别实现简单增删改
Sep 11 Javascript
JS常用函数使用指南
Nov 23 Javascript
jQuery1.9+中删除了live以后的替代方法
Jun 17 Javascript
jQuery简单注册和禁用全局事件的方法
Jul 25 Javascript
bootstrap读书笔记之CSS组件(上)
Oct 17 Javascript
JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)
Nov 30 Javascript
JS中用EL表达式获取上下文参数值的方法
Mar 28 Javascript
JS实现可针对算术表达式求值的计算器功能示例
Sep 04 Javascript
VUE使用draggable实现组件拖拽
Apr 06 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
10条PHP高级技巧[修正版]
2011/08/02 PHP
PHP连接MySQL数据库并以json格式输出
2018/05/21 PHP
PHP判断是否是微信打开还是浏览器打开的方法
2019/02/27 PHP
JavaScript Undefined,Null类型和NaN值区别
2008/10/22 Javascript
JavaScript 常见对象类创建代码与优缺点分析
2009/12/07 Javascript
JavaScript 对Cookie 操作的封装小结
2009/12/31 Javascript
在IE浏览器中resize事件执行多次的解决方法
2011/07/12 Javascript
原生js实现数字字母混合验证码的简单实例
2015/12/10 Javascript
iscroll.js的上拉下拉刷新时无法回弹的解决方法
2016/02/18 Javascript
浅谈DOM的操作以及性能优化问题-重绘重排
2017/01/08 Javascript
HTML5+jQuery实现搜索智能匹配功能
2017/03/24 jQuery
JS实现移动端整屏滑动的实例代码
2017/11/10 Javascript
Node.js引入UIBootstrap的方法示例
2018/05/11 Javascript
微信小程序当前时间时段选择器插件使用方法详解
2018/12/28 Javascript
微信小程序如何连接Java后台
2019/08/08 Javascript
NodeJS和浏览器中this关键字的不同之处
2021/03/03 NodeJs
[02:05]DOTA2完美大师赛趣味视频之看我表演
2017/11/18 DOTA
python之wxPython应用实例
2014/09/28 Python
Python win32com 操作Exce的l简单方法(必看)
2017/05/25 Python
python学习开发mock接口
2019/04/28 Python
PyQt5下拉式复选框QComboCheckBox的实例
2019/06/25 Python
Python实现Mysql数据统计及numpy统计函数
2019/07/15 Python
快速解决vue.js 模板和jinja 模板冲突的问题
2019/07/26 Python
利用Python绘制有趣的万圣节南瓜怪效果
2019/10/31 Python
OpenCV实现机器人对物体进行移动跟随的方法实例
2020/11/09 Python
html5使用canvas画三角形
2014/12/15 HTML / CSS
LocalStorage记住用户和密码功能
2017/07/24 HTML / CSS
俄罗斯小米家用电器、电子产品和智能家居商店:Poood.ru
2020/04/03 全球购物
技术经理的自我评价范文
2013/12/03 职场文书
2014年人事部工作总结
2014/12/03 职场文书
数学教师个人总结
2015/02/06 职场文书
2015年学校总务处工作总结
2015/05/19 职场文书
2016年教代会开幕词
2016/03/04 职场文书
2019中秋节祝福语大全,提前收藏啦
2019/09/10 职场文书
详解Java实现数据结构之并查集
2021/06/23 Java/Android
python多次执行绘制条形图
2022/04/20 Python