按钮下拉菜单仅从外观上看和上一节介绍的下拉菜单效果基本上是一样的。不同的是在普通的下拉菜单的基础上封装了按钮(.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. Windows Server 2008 R2安装WAMPSERVER无法启动的解决方法

    其实根本不算什么解决方法,会者不难的事.Windows Server 2008 R2(也包括其他版本的Windows)默认状态下安装WAMPSERVER经常是无法顺利启动WAMPSERVER的,尤其是 ...

  2. .NET 分页

    .net分页 1.存储过程create procedure 存储过程名( @pageIndex int,                         //第几页 @pageSize int     ...

  3. 第三篇 :微信公众平台开发实战Java版之请求消息,响应消息以及事件消息类的封装

    微信服务器和第三方服务器之间究竟是通过什么方式进行对话的? 下面,我们先看下图: 其实我们可以简单的理解: (1)首先,用户向微信服务器发送消息: (2)微信服务器接收到用户的消息处理之后,通过开发者 ...

  4. poj 3169 Layout 差分约束模板题

    Layout Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 6415   Accepted: 3098 Descriptio ...

  5. [转]excel set drop-down values based on vlookup

    本文转自:http://stackoverflow.com/questions/10657811/set-drop-down-values-based-on-vlookup 问: I have a w ...

  6. Hadoop中WritableComparable 和 comparator

    1.WritableComparable 查看HadoopAPI,如图所示: WritableComparable继承自Writable和java.lang.Comparable接口,是一个Writa ...

  7. gnuplot 学习笔记

    1 如何运行 gnuplot是一个命令行输入的工具,把命令行写入一个文本file1 file2.使用下列方式运行. gnuplot {option} file1 file2 2 产生一个图标,不管数据 ...

  8. 【温故而知新-Javascript】使用 DOM 元素

    1. 使用元素对象 HTMLElement对象提供了一组属性,可以用它们来读取和修改被代表的数据.下表介绍了这些属性. 下面代码展示了如何使用表中所列的一些基本属性. <!DOCTYPE htm ...

  9. 如何用ZBrush确定头部五官的位置

    之前和大家讲过如何在ZBrush中确定头部雕刻,在第一阶段中面数很少,只能将大型体雕刻出来,由于面数太少不能进行下面的雕刻.接下来第二阶段的调整,需要重新分布模型表面的网格,增加面数,进行五官的位置的 ...

  10. project和task

    projects和tasks是Gradle中最重要的两个概念 任何一个Gradle构建狗屎一个或多个projects的组成.每个project包括许多可构建组成部分 什么是 project ? 一个j ...