按钮下拉菜单仅从外观上看和上一节介绍的下拉菜单效果基本上是一样的。不同的是在普通的下拉菜单的基础上封装了按钮(.btn)样式效果。简单点说就是点击一个按钮,会显示隐藏的下拉菜单。按钮下拉菜单其实就是普通的下拉菜单,只不过把“<a>”标签元素换成了“<button>”标签元素。唯一不同的是外部容器“div.dropdown”换成了“div.btn-group”。

  

<div class="btn-group">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按钮下拉菜单<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="##">按钮下拉菜单项</a></li>
<li><a href="##">按钮下拉菜单项</a></li>
<li><a href="##">按钮下拉菜单项</a></li>
<li><a href="##">按钮下拉菜单项</a></li>
</ul>
</div> <div class="btn-group">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
请选择
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a>答复打底衫费</a></li>
<li><a>答复打底衫费</a></li>
<li><a>答复打底衫费</a></li>
<li><a>答复打底衫费</a></li>
</ul>
</div>

Bootstrap系列 -- 34. 按钮下拉菜单的更多相关文章

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

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

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

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

  3. Bootstrap <基础十二>下拉菜单(Dropdowns)

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

  4. Bootstrap-CL:按钮下拉菜单

    ylbtech-Bootstrap-CL:按钮下拉菜单 1.返回顶部 1. Bootstrap 按钮下拉菜单 本章将讲解如何使用 Bootstrap class 向按钮添加下拉菜单.如需向按钮添加下拉 ...

  5. Bootstrap3系列:按钮式下拉菜单

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

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

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

  7. Bootstrap中的各种下拉菜单

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

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

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

  9. 8.bootstrap单按钮下拉菜单

    1. 2. (1)首先是两个按钮,因此需要<div class="btn-group">加上"btn-group". (2)要将下拉菜单与按钮联系在 ...

随机推荐

  1. webstorm 注册码

    User Name: EMBRACE License Key: ===== LICENSE BEGIN ===== 24718-12042010 00001h6wzKLpfo3gmjJ8xoTPw5m ...

  2. hyperv 创建第二代虚拟机

    环境:宿主机windows 8.1,虚拟机:windows 8.1 硬件:笔记本电脑,无线网络,没有有线网络网络配置先不设置 1.安装hyperv,控制面版-->程序和功能-->启用或关闭 ...

  3. 手工搭建Openvpn

    环境: CentOS 6.4 (final) x86_x64 gcc-4.4.7-16.el6.x86_64 gcc-c++-4.4.7-16.el6.x86_64 lzo-2.03-3.1.e16_ ...

  4. VS2010 调试窗口一闪而过解决方法

    若此时进行的操作是编译(F5),可先运行程序(Ctrl+F5),若仍然一闪而过,用下面方法解决. 方法一: 1.要有头文件cstdlib,在程序最后写一句(return之前)添加:system(&qu ...

  5. SecureCRT 使用技巧

    VanDyke CRT 和 VanDyke SecureCRT是最常用的终端仿真程序,简单的说就是windows下登录UNIX或Liunx服务器主机的软件.二者不同的是SecureCRT支持SSH∗( ...

  6. 【读书笔记《Android游戏编程之从零开始》】18.游戏开发基础(碰撞检测)

    1.矩形碰撞 所谓矩形碰撞,就是利用两个矩形之间的位置关系来进行判断,如果矩形的像素在另外一个矩形之中,或者之上都可以认为这两个矩形发生了碰撞. 如果单纯的去考虑哪些情况会判定两个矩形发生碰撞,倒不如 ...

  7. 我是如何来做网站优化(Seo)的?(二)

    在上一篇文章<我是如何来做网站优化(Seo)的?(一)>讲述了网站优化几个注意项目. 在我们日常网站维护中,难免会使用到各种工具,文章的第二节我们就来讲讲这些工具. 网站提交通道 百度站长 ...

  8. codeforces 484D D. Kindergarten(dp)

    题目链接: D. Kindergarten time limit per test 2 seconds memory limit per test 256 megabytes input standa ...

  9. Android配置----小米手机通过wifi连接ADB调试Android应用

    [声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/3 ...

  10. java9-8 局部内部类

    1. 局部内部类 A:可以直接访问外部类的成员 B:在局部位置,可以创建内部类对象,通过对象调用内部类方法,来使用局部内部类功能 面试题: 局部内部类访问局部变量的注意事项? A:局部内部类访问局部变 ...