编程 Javascript

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>

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

Bootstrap CSS组件之按钮下拉菜单

- Author -

github_34514750

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

点击下载链接弹出页面实现代码

Oct 01 Javascript

Extjs中TabPane如何嵌套在其他网页中实现思路及代码

Jan 27 Javascript

js验证框架之RealyEasy验证详解

Jun 08 Javascript

canvas 画布在主流浏览器中的尺寸限制详细介绍

Dec 15 Javascript

js实现图片加载淡入淡出效果

Apr 07 Javascript

ES6学习之变量的两种命名方法示例

Jul 18 Javascript

详解ajax的data参数错误导致页面崩溃

Apr 30 Javascript

如何理解Vue的v-model指令的使用方法

Jul 19 Javascript

在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法

Nov 28 Javascript

vue中axios请求的封装实例代码

Mar 23 Javascript

解决vue+ element ui 表单验证有值但验证失败问题

Jan 16 Javascript

axios封装与传参示例详解

Oct 18 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分页示例分享

2014/04/30 PHP

PHP反射使用实例和PHP反射API的中文说明

2014/07/02 PHP

ThinkPHP中使用Ueditor富文本编辑器

2015/09/02 PHP

PHP查询并删除数据库多列重复数据的方法(利用数组函数实现)

2016/02/23 PHP

PHP模板引擎Smarty中的保留变量用法分析

2016/04/11 PHP

Laravel 修改默认日志文件名称和位置的例子

2019/10/17 PHP

用Javascript评估用户输入密码的强度实现代码

2011/11/30 Javascript

js DOM 元素ID就是全局变量

2012/09/20 Javascript

JavaScript保留两位小数的2个自定义函数

2014/05/05 Javascript

jquery实现翻动fadeIn显示的方法

2015/03/05 Javascript

javascript中html字符串转化为jquery dom对象的方法

2015/08/27 Javascript

JS利用cookie记忆当前位置的防刷新导航效果

2015/10/15 Javascript

js发送短信倒计时的简单实现方法

2016/09/08 Javascript

js获取隐藏元素的宽高

2017/02/24 Javascript

解决webpack打包速度慢的解决办法汇总

2017/07/06 Javascript

Vue 滚动行为的具体使用方法

2017/09/13 Javascript

微信小程序switch组件使用详解

2018/01/31 Javascript

AjaxUpLoad.js实现文件上传功能

2018/03/02 Javascript

JS正则表达式封装与使用操作示例

2019/05/15 Javascript

微信小程序左右滚动公告栏效果代码实例

2019/09/16 Javascript

浅析Vue 中的 render 函数

2020/02/28 Javascript

vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决

2020/09/28 Javascript

python通过索引遍历列表的方法

2015/05/04 Python

24式加速你的Python(小结)

2019/06/13 Python

python 3.74 运行import numpy as np 报错lib\site-packages\numpy\__init__.py

2019/10/06 Python

Python读取YAML文件过程详解

2019/12/30 Python

python exit出错原因整理

2020/08/31 Python

比利时网上药店： Drogisterij.net

2017/03/17 全球购物

英国最大的网上药品商店：Chemist Direct

2017/12/16 全球购物

以设计师精品品质提供快速时尚：Mostata

2019/05/10 全球购物

如何将无状态会话Bean发布为WEB服务,只有无状态会话Bean可以发布为WEB服务?

2015/12/03 面试题

Java程序员面试90题

2013/10/19 面试题

妇联主席先进事迹

2014/05/18 职场文书

三方协议书

2015/01/27 职场文书

2015年招商引资工作总结

2015/04/25 职场文书

《风娃娃》教学反思

2016/02/18 职场文书