Bootstrap单按钮的下拉菜单
简介
把任意一个按钮放入 .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>单按钮下拉菜单
只要改变一些基本的标记,就能把按钮变成下拉菜单的开关。
- <div class="btn-group">
- <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
- Action <span class="caret"></span>
- </button>
- <ul class="dropdown-menu" role="menu">
- <li><a href="#">Action</a></li>
- <li><a href="#">Another action</a></li>
- <li><a href="#">Something else here</a></li>
- <li class="divider"></li>
- <li><a href="#">Separated link</a></li>
- </ul>
- </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>分裂式按钮下拉菜单
相似地,分裂式按钮下拉菜单也需要同样的改变一些标记,但只是多一个分开的按钮。
- <div class="btn-group">
- <button type="button" class="btn btn-danger">Action</button>
- <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
- <span class="caret"></span>
- <span class="sr-only">Toggle Dropdown</span>
- </button>
- <ul class="dropdown-menu" role="menu">
- <li><a href="#">Action</a></li>
- <li><a href="#">Another action</a></li>
- <li><a href="#">Something else here</a></li>
- <li class="divider"></li>
- <li><a href="#">Separated link</a></li>
- </ul>
- </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>尺寸
按钮式下拉菜单适用所有尺寸的按钮。
- <div class="btn-group">
- <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
- Large button <span class="caret"></span>
- </button>
- <ul class="dropdown-menu" role="menu">
- ...
- </ul>
- </div>
- <div class="btn-group">
- <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
- Small button <span class="caret"></span>
- </button>
- <ul class="dropdown-menu" role="menu">
- ...
- </ul>
- </div>
- <div class="btn-group">
- <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
- Extra small button <span class="caret"></span>
- </button>
- <ul class="dropdown-menu" role="menu">
- ...
- </ul>
- </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 类就能使触发的下拉菜单朝上方打开。
- <div class="btn-group dropup">
- <button type="button" class="btn btn-default">Dropup</button>
- <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
- <span class="caret"></span>
- <span class="sr-only">Toggle Dropdown</span>
- </button>
- <ul class="dropdown-menu" role="menu">
- Dropdown menu links
- </ul>
- </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单按钮的下拉菜单的更多相关文章
- Bootstrap <基础十二>下拉菜单(Dropdowns)
Bootstrap 下拉菜单.下拉菜单是可切换的,是以列表格式显示链接的上下文菜单.这可以通过与 下拉菜单(Dropdown) JavaScript 插件 的互动来实现. 如需使用下列菜单,只需要在 ...
- Bootstrap历练实例:下拉菜单插件方法的使用
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- Bootstrap中的各种下拉菜单
@*基本下拉菜单与按钮下拉菜单的样式完全一致.不过,基本的下拉菜单使用<div class="dropdown">包裹,所有要换行.而按钮式下拉菜单<div cl ...
- BootStrap学习(2)_下拉菜单&按钮组
一.下拉菜单 1.基本下拉菜单 如需使用下列菜单,只需要在class .dropdown 内加上下拉菜单即可.下面的实例演示了基本的下拉菜单: <!DOCTYPE html> <ht ...
- Bootstrap 字体图标、下拉菜单、按钮组
Bootstrap 字体图标(Glyphicons) 需要引入fonts文件夹中的文件,而且该文件夹必须命名为fonts,然后引进css文件,jQuery文件,以及bootstrap的js文件. 用法 ...
- bootstrap和JS实现下拉菜单
// bootstrap下拉菜单 <div class="btn-group"> <button id="button_text" type= ...
- ⑧bootstrap组件 文字图片 下拉菜单 按钮组 使用基础案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Bootstrap练习:可折叠下拉菜单
代码: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UT ...
- Easyui表单,文本框,下拉菜单三级联动练习代码
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
随机推荐
- listView解决滑动时黑色背景问题
listView.setCacheColorHint(Color.TRANSPARENT);//解决滑动时黑色背景问题 listView滑动时黑色背景问题 原因在于ListView存在缓存颜色机制,因 ...
- mybatis由浅入深day02_6延迟加载_延迟加载总结
6 延迟加载 6.1 什么是延迟加载 需要查询关联信息时,使用mybatis延迟加载特性可有效的减少数据库压力,首次查询只查询主要信息,关联信息等用户获取时再加载. resultMap可以实现高级映射 ...
- X-code 描述文件的位置
不管是真机测试还是打包的过程中,都需要描述文件.在桌面上,按快捷键“commd+Shift+G”,就会显示一个要填的文件路径,如下图: 找到描述文件的路径: ~/Library/MobileDevic ...
- 第十五篇:关于TCP通信程序中数据的传递格式
前言 在之前的回射程序中,实现了字符串的传递与回射.幸运的是,字符串的传递不用担心不同计算机类型的大小端匹配问题,然而,如果传递二进制数据,这就是一个要好好考虑的问题.在客户端和服务器使用不同的字节序 ...
- UIGestureRecognizer学习笔记
一.Gesture Recognizers Gesture Recognizers是在iOS3.2引入的,可以用来识别手势.简化定制视图事件处理的对象.Gesture Recognizers的基类为U ...
- 简明 Vim 教程
学习 vim 并且其会成为你最后一个使用的文本编辑器.没有比这个更好的文本编辑器了,非常地难学,但是却不可思议地好用. 我建议下面这四个步骤: 存活 感觉良好 觉得更好,更强,更快 使用VIM的超能力 ...
- HTML - 分页效果布局
<p class="jcFY"> 显示 <select name="" id=""> <option valu ...
- 实现VMware下CentOS和Windows之间的复制粘贴
实现VMware下CentOS和Windows之间的复制粘贴1.第一步,打开虚拟机2.点击菜单栏中的虚拟机->安装VMware Tools3.桌面中找到VMwareTools-10.0.10-4 ...
- Xvfb新建虚拟X窗口,通过x11vnc启动VNC Server并转发Xvfb启动的虚拟窗口
远程运行Linux窗口程序使用X Windows太重量级了,可以使用Xvfb新建虚拟X窗口,通过x11vnc启动VNC Server并转发Xvfb启动的虚拟窗口. 1 2 3 4 5 6 7 8 yu ...
- 设置webView头部不能滑动
设置webView头部不能滑动 _webView.scrollView.bounces=NO;