首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Bootstrap布局组件教程之Bootstrap下拉菜单

Posted in Javascript onJune 12, 2016

本章将重点介绍 Bootstrap 下拉菜单。下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。这可以通过与 下拉菜单（Dropdown） JavaScript 插件 的互动来实现。

如需使用下列菜单，只需要在 class .dropdown 内加上下拉菜单即可。下面的实例演示了基本的下拉菜单：

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 下拉菜单（Dropdowns）</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" 
data-toggle="dropdown">
主题
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Java</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
数据通信/网络
</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">分离的链接</a>
</li>
</ul>
</div>
</body>
</html>

结果如下所示：

Bootstrap布局组件教程之Bootstrap下拉菜单

Bootstrap 下拉菜单选项

Bootstrap 下拉菜单​对齐

通过向 .dropdown-menu 添加 class .pull-right 来向右对齐下拉菜单。下面的实例演示了这点：

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 向右对齐下拉菜单</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" 
data-toggle="dropdown">主题
<span class="caret"></span>
</button>
<ul class="dropdown-menu pull-right" role="menu" 
aria-labelledby="dropdownMenu1">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Java</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
数据通信/网络
</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">分离的链接</a>
</li>
</ul>
</div>
</body>
</html>

结果如下所示：

Bootstrap布局组件教程之Bootstrap下拉菜单

Bootstrap 下拉菜单标题

您可以使用 class dropdown-header 向下拉菜单的标签区域添加标题。下面的实例演示了这点：

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 下拉菜单标题</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" 
data-toggle="dropdown">
主题
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation" class="dropdown-header">下拉菜单标题</li>
<li role="presentation" >
<a role="menuitem" tabindex="-1" href="#">Java</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
数据通信/网络
</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation" class="dropdown-header">下拉菜单标题</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">分离的链接</a>
</li>
</ul>
</div>
</body>
</html>

结果如下所示：

Bootstrap布局组件教程之Bootstrap下拉菜单

以上所述是小编给大家介绍的Bootstrap布局组件教程之Bootstrap下拉菜单的相关知识，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

Bootstrap布局组件教程之Bootstrap下拉菜单

- Author -

mrr

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
ajax无刷新动态调用股票信息(改良版)
Nov 01 Javascript
Jquery ajax不能解析json对象，报Invalid JSON错误的原因和解决方法
Mar 27 Javascript
jQuery选择器的工作原理和优化分析
Jul 25 Javascript
js取值中form.all和不加all的区别介绍
Jan 20 Javascript
JavaScript更改原始对象valueOf的方法
Mar 19 Javascript
JS中关于事件处理函数名后面是否带括号的问题
Nov 16 Javascript
AngularJS变量及过滤器Filter用法分析
Nov 22 Javascript
jQuery无缝轮播图代码
Dec 22 Javascript
JQuery Ajax 异步操作之动态添加节点功能
May 24 jQuery
vue keep-alive请求数据的方法示例
May 16 Javascript
JS+HTML实现的圆形可点击区域示例【3种方法】
Aug 01 Javascript
JS this关键字在ajax中使用出现问题解决方案
Jul 17 Javascript
使用Script元素发送JSONP请求的方法
Jun 12 #Javascript
JavaScript获取IP获取的是IPV6 如何校验
Jun 12 #Javascript
Bootstrap弹出框(modal)垂直居中的问题及解决方案详解
Jun 12 #Javascript
Javascript简写条件语句(推荐)
Jun 12 #Javascript
jQuery 3 中的新增功能汇总介绍
Jun 12 #Javascript
JavaScript_ECMA5数组新特性详解
Jun 12 #Javascript
喜大普奔！jQuery发布 3.0 最终版
Jun 12 #Javascript
算法(1) OVERLORD(1) Vscode(3) 后端(1) 2022年7月新番(1) 人人对战(1) tokenizer(1) SSH(3) 时钟(1) 双人对弈(1)
You might like
Windows Apache2.2.11及Php5.2.9-1的安装与配置方法
2009/06/08 PHP
PHP 正则表达式常用函数
2014/08/17 PHP
php使用substr()和strpos()联合查找字符串中某一特定字符的方法
2015/05/12 PHP
ThinkPHP框架安全实现分析
2016/03/14 PHP
一款JavaScript压缩工具：X2JSCompactor
2007/06/13 Javascript
javascript js cookie的存储,获取和删除
2007/12/29 Javascript
Bootstrap实现下拉菜单效果
2016/04/29 Javascript
JS清除字符串中重复值的实现方法
2016/08/03 Javascript
JS简单实现无缝滚动效果实例
2016/08/24 Javascript
canvas压缩图片转换成base64格式输出文件流
2017/03/09 Javascript
vue解决使用webpack打包后keep-alive不生效的方法
2018/09/01 Javascript
JS+DIV实现拖动效果
2020/02/11 Javascript
JavaScript中reduce()的5个基本用法示例
2020/07/19 Javascript
移动端JS实现拖拽两种方法解析
2020/10/12 Javascript
JavaScript常用进制转换及位运算实例解析
2020/10/14 Javascript
Python处理PDF及生成多层PDF实例代码
2017/04/24 Python
Python cookbook(数据结构与算法)通过公共键对字典列表排序算法示例
2018/03/15 Python
python+numpy+matplotalib实现梯度下降法
2018/08/31 Python
Python sorted函数详解(高级篇)
2018/09/18 Python
Pandas之groupby( )用法笔记小结
2019/07/23 Python
Python+Pyqt实现简单GUI电子时钟
2021/02/22 Python
python3下pygame如何实现显示中文
2020/01/11 Python
Tensorflow设置显存自适应,显存比例的操作
2020/02/03 Python
python实现Pyecharts实现动态地图（Map、Geo）
2020/03/25 Python
Champs Sports加拿大：北美最大的以商场为基础的专业运动鞋和服装零售商之一
2018/05/01 全球购物
Dr. Martens马汀博士澳大利亚官网：马丁靴鼻祖
2019/07/02 全球购物
构造方法和其他方法的区别？怎么调用父类的构造方法
2013/09/22 面试题
自动化专业职业生涯规划书范文
2014/01/16 职场文书
安全生产汇报材料
2014/02/17 职场文书
中学优秀班主任事迹材料
2014/05/01 职场文书
文明礼仪演讲稿
2014/05/12 职场文书
建筑施工安全生产责任书
2014/07/22 职场文书
专题组织生活会思想汇报
2014/10/01 职场文书
2019年鼓励无偿献血倡议书
2019/09/17 职场文书
如何在centos上使用yum安装rabbitmq-server
2021/03/31 Servers
国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程
2021/10/05 Javascript