编程 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 相关文章推荐

让新消息在网页标题闪烁提示的jQuery代码

Nov 04 Javascript

Jquery搜索父元素操作方法

Feb 10 Javascript

js实现点击图片改变页面背景图的方法

Feb 28 Javascript

javascript实时显示当天日期的方法

May 20 Javascript

js实现跨域的方法实例详解

Jun 24 Javascript

jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果

Aug 25 Javascript

AngularJS 过滤与排序详解及实例代码

Sep 14 Javascript

微信小程序模拟cookie的实现

Jun 20 Javascript

QRCode.js二维码生成并能长按识别

Oct 16 Javascript

JS温故而知新之变量提升和时间死区

Jan 27 Javascript

Vue组件通信中非父子组件传值知识点总结

Dec 05 Javascript

JS call()及apply()方法使用实例汇总

Jul 11 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