1. 概述

下拉菜单使用频率也是比较高的，比较常见的使用场景是在导航菜单栏，某个主菜单含有下拉的子菜单。

Bootstrap为下拉菜单提供了两种实现方式，即普通的下拉菜单还有按钮式的下拉菜单。我们先看一张图观察下，从图中可以看出，普通下拉菜单和按钮式下拉菜单的样式基本相同，唯一比较明显的区别是：普通下拉菜单相当于菜单，前后自动换行；而按钮式的下拉菜单相当于按钮，前后不换行。

2. 下拉菜单

2.1 普通下拉菜单

先来看下普通下拉菜单的示例代码，通过dropdown描述一个下拉菜单，下拉菜单的主按钮通过dropdown-toggle类描述，下拉子菜单的部分是dropdown-menu类描述的ul元素。最后注意下拉箭头是通过caret样式类实现的。

  1. 				普通下拉菜单：
  2.                 <div class="dropdown">
  3.                     <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
  4.                         下发命令
  5.                         <span class="caret"></span>
  6.                     </button>
  7.                     <ul class="dropdown-menu">
  8.                         <li><a href="#">命令1</a></li>
  9.                         <li><a href="#">命令2</a></li>
  10.                     </ul>
  11.                 </div>

效果如下：

2.2 更换颜色

其实就是更换按钮的样式类，如下代码将默认按钮改为了首选按钮btn-primary。

  1. 				更换颜色:
  2.                 <div class="dropdown">
  3.                     <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
  4.                         下发命令
  5.                         <span class="caret"></span>
  6.                     </button>
  7.                     <ul class="dropdown-menu">
  8.                         <li><a href="#">命令1</a></li>
  9.                         <li><a href="#">命令2</a></li>
  10.                     </ul>
  11.                 </div>

效果如下：

2.3 更换尺寸

其实就是通过btn-lg或btn-sm更换按钮的尺寸。

  1. 				更换尺寸:
  2.                 <div class="dropdown">
  3.                     <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
  4.                         下发命令
  5.                         <span class="caret"></span>
  6.                     </button>
  7.                     <ul class="dropdown-menu">
  8.                         <li><a href="#">命令1</a></li>
  9.                         <li><a href="#">命令2</a></li>
  10.                     </ul>
  11.                 </div>

效果如下：

2.4 添加分割线

可以在子菜单之间添加分割线，示例代码：

  1. 				添加分割线：
  2.                 <div class="dropdown">
  3.                     <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
  4.                         下发命令
  5.                         <span class="caret"></span>
  6.                     </button>
  7.                     <ul class="dropdown-menu">
  8.                         <li><a href="#">命令1</a></li>
  9.                         <li role="separator" class="divider"></li>
  10.                         <li><a href="#">命令2</a></li>
  11.                     </ul>
  12.                 </div>

效果如下：

2.5 菜单分组

如果子菜单较多，还可以进行分组：

  1. 				菜单分组：
  2.                 <div class="dropdown">
  3.                     <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
  4.                         下发命令
  5.                         <span class="caret"></span>
  6.                     </button>
  7.                     <ul class="dropdown-menu">
  8.                         <li class="dropdown-header">分组1</li>
  9.                         <li><a href="#">命令1</a></li>
  10.                         <li><a href="#">命令2</a></li>
  11.                         <li class="dropdown-header">分组2</li>
  12.                         <li><a href="#">命令3</a></li>
  13.                         <li><a href="#">命令4</a></li>
  14.                     </ul>
  15.                 </div>

效果如下：

2.6 上拉菜单

这个实现比较奇葩，可以让子菜单弹出方向改变，真实使用场景我都没见过。只需要将dropdown样式类改为dropup即可。

  1. 				上拉菜单：
  2.                 <div class="dropup">
  3.                     <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
  4.                         下发命令
  5.                         <span class="caret"></span>
  6.                     </button>
  7.                     <ul class="dropdown-menu">
  8.                         <li><a href="#">命令1</a></li>
  9.                         <li><a href="#">命令2</a></li>
  10.                     </ul>
  11.                 </div>

3. 按钮式下拉菜单

按钮式下拉菜单的实现，只需要将之前的dropdown样式类改为btn-group即可，有个例外是上拉菜单，需要将dropup改为btn-group和dropup两个样式类。

具体代码如下：

  1. 			<div class="col-md-12">
  2.                 按钮式下拉菜单：
  3.                 <div class="btn-group">
  4.                     <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
  5.                         下发命令
  6.                         <span class="caret"></span>
  7.                     </button>
  8.                     <ul class="dropdown-menu">
  9.                         <li><a href="#">命令1</a></li>
  10.                         <li><a href="#">命令2</a></li>
  11.                     </ul>
  12.                 </div>
  13.                 更换颜色:
  14.                 <div class="btn-group">
  15.                     <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
  16.                         下发命令
  17.                         <span class="caret"></span>
  18.                     </button>
  19.                     <ul class="dropdown-menu">
  20.                         <li><a href="#">命令1</a></li>
  21.                         <li><a href="#">命令2</a></li>
  22.                     </ul>
  23.                 </div>
  24.                 更换尺寸:
  25.                 <div class="btn-group">
  26.                     <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
  27.                         下发命令
  28.                         <span class="caret"></span>
  29.                     </button>
  30.                     <ul class="dropdown-menu">
  31.                         <li><a href="#">命令1</a></li>
  32.                         <li><a href="#">命令2</a></li>
  33.                     </ul>
  34.                 </div>
  35.                 添加分割线：
  36.                 <div class="btn-group">
  37.                     <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
  38.                         下发命令
  39.                         <span class="caret"></span>
  40.                     </button>
  41.                     <ul class="dropdown-menu">
  42.                         <li><a href="#">命令1</a></li>
  43.                         <li role="separator" class="divider"></li>
  44.                         <li><a href="#">命令2</a></li>
  45.                     </ul>
  46.                 </div>
  47.                 菜单分组：
  48.                 <div class="btn-group">
  49.                     <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
  50.                         下发命令
  51.                         <span class="caret"></span>
  52.                     </button>
  53.                     <ul class="dropdown-menu">
  54.                         <li class="dropdown-header">分组1</li>
  55.                         <li><a href="#">命令1</a></li>
  56.                         <li><a href="#">命令2</a></li>
  57.                         <li class="dropdown-header">分组2</li>
  58.                         <li><a href="#">命令3</a></li>
  59.                         <li><a href="#">命令4</a></li>
  60.                     </ul>
  61.                 </div>
  62.                 上拉菜单：
  63.                 <div class="btn-group dropup">
  64.                     <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
  65.                         下发命令
  66.                         <span class="caret"></span>
  67.                     </button>
  68.                     <ul class="dropdown-menu">
  69.                         <li><a href="#">命令1</a></li>
  70.                         <li><a href="#">命令2</a></li>
  71.                     </ul>
  72.                 </div>
  73.             </div>

Bootstrap下拉菜单、按钮式下拉菜单的更多相关文章

  1. 用bootstrap和css3制作按钮式下拉菜单

    利用bootstrap框架的字体图标和下拉菜单效果,以及css3的动画效果,可以做出比较优雅的按钮式下拉菜单样式 <style> .myBtnStyle .dropdown-menu sp ...

  2. Bootstrap按钮式下拉菜单

    前面的话 按钮式下拉菜单仅从外观上看,和下拉菜单效果基本上是一样的.不同的是普通的下拉菜单是block元素,而按钮式下拉菜单是inline-block元素.本文将详细介绍Bootstrap按钮式下拉菜 ...

  3. 8.bootstrap下拉菜单、按钮组、按钮式下拉菜单

    下拉菜单 dropdown 对齐方式: .dropdown-menu-right     .dropdown-menu-left <div class="container" ...

  4. Bootstrap3系列：按钮式下拉菜单

    1. 基本实例 把按钮放入 .btn-group 中,加入适当的菜单标签,让按钮触发下拉菜单. 1.1 示例代码 <div class="btn-group"> < ...

  5. Bootstrap<基础十四> 按钮下拉菜单

    使用 Bootstrap class 向按钮添加下拉菜单.如需向按钮添加下拉菜单,只需要简单地在在一个 .btn-group 中放置按钮和下拉菜单即可.也可以使用 <span class=&qu ...

  6. Bootstrap历练实例：带有下拉菜单的标签和胶囊导航

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  7. Web标准：八、下拉及多级弹出菜单

    Web标准:八.下拉及多级弹出菜单 知识点: 1.带下拉子菜单的导航菜单 2.绝对定位和浮动的区别和运用 3.CSS自适应宽度滑动门菜单   1)带下拉子菜单的导航菜单 带下拉子菜单的就是在一级导航下 ...

  8. Bootstrap Flat UI的select下拉框显示不出来 问题解决

    Bootstrap Flat UI的select下拉框显示不出来?看这里,恰巧今天我也遇到了这个问题: 点击Messages后并没有出现下拉列表,然而官网的index.html却能显示出来. 经过一番 ...

  9. 下拉刷新，上拉加载功能--dropload.js的使用

    这段时间工作太忙了,没时间更新博客内容,在这段时间,也学习到了不少新的知识.今天先整理一下dropload.js的使用方法吧,这个是在为项目中使用过的插件,很好用,但是真正用到项目中还是会有一些小小的 ...

随机推荐

  1. 深入理解Js中的this

    深入理解Js中的this JavaScript作用域为静态作用域static scope,但是在Js中的this却是一个例外,this的指向问题就类似于动态作用域,其并不关心函数和作用域是如何声明以及 ...

  2. 调试lcd时候给linux单板移植tslib

    作者:良知犹存 转载授权以及围观:欢迎添加微信公众号:Conscience_Remains 总述  tslib背景: 在采用触摸屏的移动终端中,触摸屏性能的调试是个重要问题之一,因为电磁噪声的缘故,触 ...

  3. Redis全面解析

    1.什么是Redis? Redis是BSD协议,是一个高性能的key-value非关系型数据库. 2.redis单线程问题 所谓的单线程指的是网络请求模块使用了一个线程(所以不需考虑并发安全性),即一 ...

  4. While & For 循环

    While 循环 可以将 While 循环称为 "条件循环" While 循环语法 # 条件为 true 就执行循环体代码,条件变为 false 循环结束 while 条件 do ...

  5. codeforces 9D（非原创）

    D. How many trees? time limit per test 1 second memory limit per test 64 megabytes input standard in ...

  6. 关于Matlab GUI的一些经验总结

    注:此文来自转载,侵删去年做了一些关于Matlab GUI的程序,现在又要做相关的东西,回想起来,当时很多经验没有记录下来,现在回顾起来始终觉得不爽,所以从现在开始,一定要勤写记录. 从简单的例子说起 ...

  7. OpenCV+Ubuntu+缺少Python.h

    在cmake时粗心了, 要确保有 -D PYTHON_INCLUDE_DIR=/usr/include/python3.5 且该目录下存在Python.h文件. 如果在错误提示中是python2, 那 ...

  8. LVS之DR模式部署

    一.LVS-DR数据包流向分析 为方便进行原理分析,将Client与群集机器放在同一网络中,数据包流经的路线为1-2-3-41.Client 向目标 VIP 发出请求,Director(负载均衡器)接 ...

  9. 在线打开,浏览PDF文件的各种方式及各种pdf插件------(MS OneDrive/google drive & google doc/ github ?raw=true)

    在线打开,浏览PDF文件的各种方式: 1 Google drive&doc   (国内不好使,you know GFW=Great Firewall) 1. google drive: 直接分 ...

  10. Apple Support

    Apple Support Send Files to Apple Support https://gigafiles.apple.com/#/customerupload refs 无法截屏 bug ...