编程 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 检测、添加、移除样式(className)函数代码

Sep 08 Javascript

用Javascript实现Windows任务管理器的代码

Mar 27 Javascript

jQuery实现DIV层收缩展开的方法

Feb 27 Javascript

深入分析下javascript中的[]()+!

Jul 07 Javascript

KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定

Oct 11 Javascript

jQuery ajax MD5实现用户注册即时验证功能

Oct 11 Javascript

vue.js引入外部CSS样式和外部JS文件的方法

Jan 06 Javascript

200行HTML+JavaScript实现年会抽奖程序

Jan 22 Javascript

JS把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式

Jul 10 Javascript

微信小程序学习总结（五）常见问题实例小结

Jun 04 Javascript

mpvue 项目初始化及实现授权登录的实现方法

Jul 20 Javascript

vue或react项目生产环境去掉console.log的操作

Sep 02 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

You might like

用PHP连mysql和oracle数据库性能比较

2006/10/09 PHP

PHP + plupload.js实现多图上传并显示进度条加删除实例代码

2017/03/06 PHP

Laravel向公共模板赋值方法总结

2019/06/25 PHP

javascript动画之圆形运动,环绕鼠标运动作小球

2010/07/20 Javascript

js实现漂浮回顶部按钮实例

2015/05/06 Javascript

JavaScript中constructor()方法的使用简介

2015/06/05 Javascript

javascript实现下班倒计时效果的方法(可桌面通知)

2015/07/10 Javascript

Bootstrap每天必学之面板

2015/11/30 Javascript

jQuery时间插件jquery.clock.js用法实例(5个示例)

2016/01/14 Javascript

关于验证码在IE中不刷新的快速解决方法

2016/09/23 Javascript

基于JavaScript实现前端文件的断点续传

2016/10/17 Javascript

微信小程序 swiper制作tab切换实现附源码

2017/01/21 Javascript

Bootstrap框架安装使用详解

2017/01/21 Javascript

JavaScript 中调用 Kotlin 方法实例详解

2017/06/09 Javascript

Vue中引入样式文件的方法

2017/08/18 Javascript

NodeJS安装图文教程

2018/04/19 NodeJs

JavaScript跳出循环的三种方法(break, return, continue)

2019/07/30 Javascript

使用Karma做vue组件单元测试的实现

2020/01/16 Javascript

高性能web服务器框架Tornado简单实现restful接口及开发实例

2014/07/16 Python

Python自动扫雷实现方法

2015/07/25 Python

Python实现excel转sqlite的方法

2017/07/17 Python

详解flask表单提交的两种方式

2018/07/21 Python

python opencv人脸检测提取及保存方法

2018/08/03 Python

python中使用while循环的实例

2019/08/05 Python

有关pycharm登录github时有的时候会报错connection reset的问题

2020/09/15 Python

CSS3 animation实现逐帧动画效果

2016/06/02 HTML / CSS

英国领先的瓷砖专家：Walls and Floors

2018/04/27 全球购物

高中的职业生涯规划书

2013/12/28 职场文书

大课间体育活动方案

2014/03/12 职场文书

数学高效课堂实施方案

2014/03/29 职场文书

党员领导干部民主生活会批评与自我批评发言

2014/09/28 职场文书

2014普法依法治理工作总结

2014/12/18 职场文书

贫困证明怎么写

2015/06/16 职场文书

追悼词范文大全

2015/06/23 职场文书

2016个人廉洁自律承诺书

2016/03/25 职场文书

使用Nginx的访问日志统计PV与UV

2022/05/06 Servers