编程 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 相关文章推荐

JavaScript的类型转换(字符转数字数字转字符)

Aug 30 Javascript

输入密码检测大写是否锁定js实现代码

Dec 03 Javascript

js导出table数据到excel即导出为EXCEL文档的方法

Oct 10 Javascript

jquery超简单实现手风琴效果的方法

Jun 05 Javascript

Vuejs第九篇之组件作用域及props数据传递实例详解

Sep 05 Javascript

js代码延迟一定时间后执行一个函数的实例

Feb 15 Javascript

jQuery为DOM动态追加事件的方法

Feb 16 Javascript

js实现随机数字字母验证码

Jun 19 Javascript

javascript 日期相减-在线教程(附代码)

Aug 17 Javascript

Vue中$refs的用法详解

Jun 24 Javascript

微信小程序实现卡片左右滑动效果的示例代码

May 01 Javascript

jquery ui 实现 tab标签功能示例【测试可用】

Jul 25 jQuery

使用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

You might like

php中++i 与 i++ 的区别

2012/08/08 PHP

Thinkphp实现自动验证和自动完成

2015/12/19 PHP

yii2 url重写并隐藏index.php方法

2018/12/10 PHP

PDO::getAttribute讲解

2019/01/28 PHP

PHP网站常见安全漏洞，及相应防范措施总结

2021/03/01 PHP

PHP7 其他修改

2021/03/09 PHP

js 提交和设置表单的值

2008/12/19 Javascript

input 高级限制级用法

2009/03/26 Javascript

kmock javascript 单元测试代码

2011/02/06 Javascript

js sort 二维数组排序的用法小结

2014/01/24 Javascript

浅谈Sticky组件的改进实现

2016/03/22 Javascript

Vue组件BootPage实现简单的分页功能

2016/09/12 Javascript

浅谈js中同名函数和同名变量的执行问题

2017/02/12 Javascript

js实现以最简单的方式将数组元素添加到对象中的方法

2017/12/20 Javascript

vue组件实现可搜索下拉框扩展

2020/10/23 Javascript

JavaScript执行环境及作用域链实例分析

2018/08/01 Javascript

详解使用webpack+electron+reactJs开发windows桌面应用

2019/02/01 Javascript

js单线程的本质 Event Loop解析

2019/10/29 Javascript

浅谈es6中的元编程

2020/12/01 Javascript

原生js实现自定义滚动条组件

2021/01/20 Javascript

[02:44]DOTA2英雄基础教程魅惑魔女

2014/01/07 DOTA

以Python的Pyspider为例剖析搜索引擎的网络爬虫实现方法

2015/03/30 Python

Python之dict(或对象)与json之间的互相转化实例

2018/06/05 Python

python打包exe开机自动启动的实例(windows)

2019/06/28 Python

python使用sklearn实现决策树的方法示例

2019/09/12 Python

Python+OpenCV图像处理——实现直线检测

2020/10/23 Python

CSS3 新增选择器的实例

2019/11/13 HTML / CSS

html5本地存储_动力节点Java学院整理

2017/07/12 HTML / CSS

工商管理本科毕业生求职信范文

2013/10/05 职场文书

社区志愿者心得体会

2014/01/03 职场文书

幼儿教师考核制度

2014/01/25 职场文书

公益广告语集锦

2014/03/13 职场文书

2014年小学教学工作总结

2014/11/13 职场文书

幼儿园庆元旦主持词

2015/07/06 职场文书

2016高中社会实践心得体会范文

2016/01/14 职场文书

2016思想纪律作风整顿心得体会

2016/01/23 职场文书