Bootstrap系列 -- 34. 按钮下拉菜单
按钮下拉菜单仅从外观上看和上一节介绍的下拉菜单效果基本上是一样的。不同的是在普通的下拉菜单的基础上封装了按钮(.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. 按钮下拉菜单的更多相关文章
- Bootstrap<基础十四> 按钮下拉菜单
使用 Bootstrap class 向按钮添加下拉菜单.如需向按钮添加下拉菜单,只需要简单地在在一个 .btn-group 中放置按钮和下拉菜单即可.也可以使用 <span class=&qu ...
- BootStrap学习(2)_下拉菜单&按钮组
一.下拉菜单 1.基本下拉菜单 如需使用下列菜单,只需要在class .dropdown 内加上下拉菜单即可.下面的实例演示了基本的下拉菜单: <!DOCTYPE html> <ht ...
- Bootstrap <基础十二>下拉菜单(Dropdowns)
Bootstrap 下拉菜单.下拉菜单是可切换的,是以列表格式显示链接的上下文菜单.这可以通过与 下拉菜单(Dropdown) JavaScript 插件 的互动来实现. 如需使用下列菜单,只需要在 ...
- Bootstrap-CL:按钮下拉菜单
ylbtech-Bootstrap-CL:按钮下拉菜单 1.返回顶部 1. Bootstrap 按钮下拉菜单 本章将讲解如何使用 Bootstrap class 向按钮添加下拉菜单.如需向按钮添加下拉 ...
- Bootstrap3系列:按钮式下拉菜单
1. 基本实例 把按钮放入 .btn-group 中,加入适当的菜单标签,让按钮触发下拉菜单. 1.1 示例代码 <div class="btn-group"> < ...
- Bootstrap历练实例:下拉菜单插件方法的使用
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- Bootstrap中的各种下拉菜单
@*基本下拉菜单与按钮下拉菜单的样式完全一致.不过,基本的下拉菜单使用<div class="dropdown">包裹,所有要换行.而按钮式下拉菜单<div cl ...
- Bootstrap 字体图标、下拉菜单、按钮组
Bootstrap 字体图标(Glyphicons) 需要引入fonts文件夹中的文件,而且该文件夹必须命名为fonts,然后引进css文件,jQuery文件,以及bootstrap的js文件. 用法 ...
- 8.bootstrap单按钮下拉菜单
1. 2. (1)首先是两个按钮,因此需要<div class="btn-group">加上"btn-group". (2)要将下拉菜单与按钮联系在 ...
随机推荐
- ehcache整合spring注解方式
一.简介 在hibernate中就是用到了ehcache 充当缓存.spring对ehcache也提供了支持,使用也比较简单,只需在spring的配置文件中将ehcache的ehcache.xml文件 ...
- Spring-framework下载
下载版本,修改版本号就行. http://repo.springsource.org/libs-release-local/org/springframework/spring/4.3.2.RELEA ...
- 续Gulp使用入门-综合运用>使用Gulp构建一个项目
这是我的文件目录结构图 下面是我gulpfile.js的配置 'use strict' var gulp=require('gulp'); var gutil=require('gulp-util' ...
- html,datepicker,datetimepicker时间控件使用
1.My97DatePicker 传送门:点击打开链接 ps:My97DatePicker貌似对chrom不兼容 2.jquery日期选择/日历 http://www.oschina.net/proj ...
- private成员变量真的私有吗?(用指针刨他祖坟)
今天写程序时突然想到的,为什么不用指针去获取类的成员变量呢.于是做了这个实验.首先定义了一个类: class Test { private: int i; char c; int* p; public ...
- 分享一个Fluent风格的邮件发送封装类
C#中用SmtpClient发邮件很简单,闲着无事,简单封装一下 IEmailFactory public interface IEmailFactory { IEmailFactory SetHos ...
- 平摊分析 Amortized Analysis ------geeksforgeeks翻译
当偶尔一切操作很花的时间很慢,而大多数操作的时间都很快的时候,平摊分析的方法就很很好用了.在平摊分析中,我们分析一串操作并且可以得到最坏情况下的平均时间复杂度.例如hash table, disjoi ...
- Java Executor并发框架(三)ThreadPoolExecutor 队列缓存策略
前面两篇讲解了线程池中线程创建后的运行情况,其中有一系列的策略来保证线程正常运行.但是我们知道线程池是可以设置容量的,而且这容量的设置也是至关重要的,如果容量设置的太小,那么将会影响系统的运行效率,如 ...
- extjs ajax请求与struts2进行交互
sencha extjs 5 增加一个struts2的配置,这样可以在设置好前台布局之后,与后台交互获取数据显示.现在有一个问题是struts2对于url的跳转action支 持比较良好,但是对于像E ...
- Linux Linux程序练习十(网络编程大文件发送)
//网络编程客户端--大文件传输 #include <stdio.h> #include <stdlib.h> #include <string.h> #inclu ...