简介

把任意一个按钮放入 .btn-group 中，然后加入适当的菜单标签，就可以让按钮作为菜单的触发器了。

插件依赖

按钮式下拉菜单依赖下拉菜单插件 ，因此需要将此插件包含在你所使用的 Bootstrap 版本中。

完整代码：

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
<script src="/scripts/jquery.min.js"></script>
<script src="/scripts/bootstrap.min.js"></script>
</head>
<body>
<div class="btn-group"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
默认 <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="javascript:void(0)">功能</a></li>
<li><a href="javascript:void(0)">另一个功能</a></li>
<li><a href="javascript:void(0)">其他</a></li>
<li class="divider"></li>
<li><a href="javascript:void(0)">分离的链接</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
原始 <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="javascript:void(0)">功能</a></li>
<li><a href="javascript:void(0)">另一个功能</a></li>
<li><a href="javascript:void(0)">其他</a></li>
<li class="divider"></li>
<li><a href="javascript:void(0)">分离的链接</a></li>
</ul>
</div>
</body>
</html>

单按钮下拉菜单

只要改变一些基本的标记，就能把按钮变成下拉菜单的开关。

  1. <div class="btn-group">
  2. <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
  3. Action <span class="caret"></span>
  4. </button>
  5. <ul class="dropdown-menu" role="menu">
  6. <li><a href="#">Action</a></li>
  7. <li><a href="#">Another action</a></li>
  8. <li><a href="#">Something else here</a></li>
  9. <li class="divider"></li>
  10. <li><a href="#">Separated link</a></li>
  11. </ul>
  12. </div>

完整代码：

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
<script src="/scripts/jquery.min.js"></script>
<script src="/scripts/bootstrap.min.js"></script>
</head>
<body>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Default <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="javascript:void(0);">Action</a></li>
<li><a href="javascript:void(0);">Another action</a></li>
<li><a href="javascript:void(0);">Something else here</a></li>
<li class="divider"></li>
<li><a href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
</body>
</html>

分裂式按钮下拉菜单

相似地，分裂式按钮下拉菜单也需要同样的改变一些标记，但只是多一个分开的按钮。

  1. <div class="btn-group">
  2. <button type="button" class="btn btn-danger">Action</button>
  3. <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
  4. <span class="caret"></span>
  5. <span class="sr-only">Toggle Dropdown</span>
  6. </button>
  7. <ul class="dropdown-menu" role="menu">
  8. <li><a href="#">Action</a></li>
  9. <li><a href="#">Another action</a></li>
  10. <li><a href="#">Something else here</a></li>
  11. <li class="divider"></li>
  12. <li><a href="#">Separated link</a></li>
  13. </ul>
  14. </div>

完整代码：

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
<script src="/scripts/jquery.min.js"></script>
<script src="/scripts/bootstrap.min.js"></script>
</head>
<body>
<div class="btn-group open">
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-expanded="true">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="javascript:void(0);">Action</a></li>
<li><a href="javascript:void(0);">Another action</a></li>
<li><a href="javascript:void(0);">Something else here</a></li>
<li class="divider"></li>
<li><a href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
</body>
</html>

尺寸

按钮式下拉菜单适用所有尺寸的按钮。

  1. <div class="btn-group">
  2. <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
  3. Large button <span class="caret"></span>
  4. </button>
  5. <ul class="dropdown-menu" role="menu">
  6. ...
  7. </ul>
  8. </div>
  9. <div class="btn-group">
  10. <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
  11. Small button <span class="caret"></span>
  12. </button>
  13. <ul class="dropdown-menu" role="menu">
  14. ...
  15. </ul>
  16. </div>
  17. <div class="btn-group">
  18. <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
  19. Extra small button <span class="caret"></span>
  20. </button>
  21. <ul class="dropdown-menu" role="menu">
  22. ...
  23. </ul>
  24. </div>

完整代码：

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
<script src="/scripts/jquery.min.js"></script>
<script src="/scripts/bootstrap.min.js"></script>
</head>
<body>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle btn-lg" data-toggle="dropdown">默认 <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="javascript:void(0);">功能</a></li>
<li><a href="javascript:void(0);">另一个功能</a></li>
<li><a href="javascript:void(0);">其他</a></li>
<li class="divider"></li>
<li><a href="javascript:void(0);">分离的链接</a></li>
</ul>
</div>
</body>
</html>

向上弹出式菜单

给父元素添加 .dropup 类就能使触发的下拉菜单朝上方打开。

  1. <div class="btn-group dropup">
  2. <button type="button" class="btn btn-default">Dropup</button>
  3. <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
  4. <span class="caret"></span>
  5. <span class="sr-only">Toggle Dropdown</span>
  6. </button>
  7. <ul class="dropdown-menu" role="menu">
  8. Dropdown menu links
  9. </ul>
  10. </div>

完整代码：

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
<script src="/scripts/jquery.min.js"></script>
<script src="/scripts/bootstrap.min.js"></script>
</head>
<body>
<div class="btn-group dropup" style="margin-top:150px;margin-left:50px;">
<button type="button" class="btn btn-primary">Right dropup</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li><a href="javascript:void(0)">Action</a></li>
<li><a href="javascript:void(0)">Another action</a></li>
<li><a href="javascript:void(0)">Something else here</a></li>
<li class="divider"></li>
<li><a href="javascript:void(0)">Separated link</a></li>
</ul>
</div>
</body>
</html>

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

  1. Bootstrap <基础十二>下拉菜单（Dropdowns）

    Bootstrap 下拉菜单.下拉菜单是可切换的,是以列表格式显示链接的上下文菜单.这可以通过与 下拉菜单(Dropdown) JavaScript 插件 的互动来实现. 如需使用下列菜单,只需要在 ...

  2. Bootstrap历练实例：下拉菜单插件方法的使用

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

  3. Bootstrap中的各种下拉菜单

    @*基本下拉菜单与按钮下拉菜单的样式完全一致.不过,基本的下拉菜单使用<div class="dropdown">包裹,所有要换行.而按钮式下拉菜单<div cl ...

  4. BootStrap学习(2)_下拉菜单&按钮组

    一.下拉菜单 1.基本下拉菜单 如需使用下列菜单,只需要在class .dropdown 内加上下拉菜单即可.下面的实例演示了基本的下拉菜单: <!DOCTYPE html> <ht ...

  5. Bootstrap 字体图标、下拉菜单、按钮组

    Bootstrap 字体图标(Glyphicons) 需要引入fonts文件夹中的文件,而且该文件夹必须命名为fonts,然后引进css文件,jQuery文件,以及bootstrap的js文件. 用法 ...

  6. bootstrap和JS实现下拉菜单

    // bootstrap下拉菜单 <div class="btn-group"> <button id="button_text" type= ...

  7. ⑧bootstrap组件 文字图片 下拉菜单 按钮组 使用基础案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. Bootstrap练习：可折叠下拉菜单

    代码: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UT ...

  9. Easyui表单,文本框,下拉菜单三级联动练习代码

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

随机推荐

  1. C语言中do...while(0)的妙用-避免goto

    使用goto的优雅并避免结构的混乱 将要跳转到的语句用do{-}while(0) 包起来就可以. reference #defien N 10 bool Execute() { // 分配资源 int ...

  2. MySql阶段案例

    MySql阶段案例 案例一 涉及的知识点:数据库和表的基本操作,添加数据,多表操作 题目 使用sql语句请按照要求完成如下操作: (1)创建一个名称为test的数据库. (2)在test数据库中创建两 ...

  3. day25<多线程+&设计模式&GUI>

    多线程(单例设计模式)(掌握) 多线程(Runtime类) 多线程(Timer)(掌握) 多线程(两个线程间的通信)(掌握) 多线程(三个或三个以上间的线程通信) 多线程(线程间的通信注意的问题) 多 ...

  4. Mac下，如何把项目托管到Github上（Github Desktop的使用）

    在上一篇中,详细讲解了使用X-code和终端配合上传代码的方法,这种方法比较传统,中间会有坑,英文看起来也费劲,不过Github官方提供了一个Mac版的客户端,如下图:

  5. python2.0_day22_web聊天室二

    上节内容已经实现了客户端使用长轮询的方式获取消息的功能.但是还没有展现到前端.本节内容将实现1.展现消息到前端窗口.2.客户端之间发送图片和文件.3.文件上传时显示进度条 下面我们来实现上面3个功能. ...

  6. laravel 发送邮件

    1)邮件配置(config/mail.php 配置文件) MAIL_DRIVER                       邮箱驱动,laravel 支持 "smtp", &qu ...

  7. laravel安装 redis 并驱动 session

    1)composer 安装 redis composer require predis/predis 如果感兴趣,可以看一下这里 2)配置 redis 连接(config/database.php 配 ...

  8. 运行 3ds Max 时出现的性能问题

          运行 3ds Max 时性能减慢或迟缓通常是由于视频配置冲突或内存分配问题引起的.关于性能问题的一大难点在于缩小范围确定问题原因.以下是一些限制 3ds Max 操作的常见情形,以及纠正这 ...

  9. C语言100个经典的算法之兔子总数计算内含printf的用法

    语言的学习基础,100个经典的算法 C语言的学习要从基础开始,这里是100个经典的算法-1C语言的学习要从基础开始,这里是100个经典的算法 题目:古典问题:有一对兔子,从出生后第3个月起每个月都生一 ...

  10. jdbc批处理

    批量处理允许将相关的SQL语句分组到批处理中,并通过对数据库的一次调用来提交它们,一次执行完成与数据库之间的交互. 一次向数据库发送多个SQL语句时,可以减少通信开销,从而提高性能. 不需要JDBC驱 ...