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)要将下拉菜单与按钮联系在 ...
随机推荐
- python enumerate 函数用法
enumerate字典上是枚举.列举的意思. C语言中关键字enum也是enumerate的缩写. python中enumerate方法,返回一个enumerate类型.参数一般是可以遍历的的 ...
- VMware 12Pro 安装MACOS 10.10
前言 最近帮人MacBook PRO重新安装了下10.10,在加上用了IP6,对苹果系统很有好感,所以想自己装个mac系统玩一下.虽然有了surface pro3 但是看了时间久了厌了,好想买个MAC ...
- [转]后台页面访问权限:页面基类&内置票据认证 使用方法
本文转自:http://www.cnblogs.com/fishtreeyu/archive/2011/01/29/1947421.html 一般网站后台页面除了登录页面login.aspx未登录用户 ...
- dipole antenna simulation by CST
CST偶极子天线仿真,半波振子天线 一.本文使用CST仿真频率为1GHz的偶极子天线,使用2013版本.仿真的步骤为 1.选择一个CST的天线工程模板 2.设置好默认的单位 3.设置背景的材料(空气腔 ...
- 《TCP/IP详解 卷一》读书笔记-----DNS
1.DNS是一个分布式数据库系统用来提供主机名和IP地址之间的映射,之所以称为分布式原因的原因是因特网上没有一台主机知道这类映射的全部信息,当然也不可能做到,因为数据量实在太大了 2.应用程序通过一个 ...
- HDU 2298 Toxophily 【二分+三分】
一个人站在(0,0)处射箭,箭的速度为v,问是否能够射到(x,y)处,并求最小角度. 首先需要判断在满足X=x的情况下最大高度hmax是否能够达到y,根据物理公式可得 h=vy*t-0.5*g*t*t ...
- C#泛型简化代码量示例
泛型简化代码量 下是我在项目中通过泛型来简化工作的一个Demo,记录一下: using System; using System.Collections.Generic; namespace My ...
- Unity-WIKI 之 DrawArrow
组件作用 Unity画方向箭头类库,在Scene视图或在Game视图打开Gizmos查看效果 效果预览 wiki地址 http://wiki.unity3d.com/index.php/DrawA ...
- java 8-7 接口
1. 接口的特点: A:接口用关键字interface表示 interface 接口名 {} B:类实现接口用implements表示 class 类名 implements 接口名 {} C:接口不 ...
- Gitblit-Git版本服务器环境部署
Gitblit介绍 Gitblit 是一个纯 Java 库用来管理.查看和处理 Git 资料库.相当于 Git 的 Java 管理工具,支持linux系统. Git是分布式版本控制系统,它强调速度.数 ...