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

漂亮的提示信息（带箭头）

Mar 21 Javascript

JavaScript入门教程(1) 什么是JS

Jan 31 Javascript

基于JQuery的浮动DIV显示提示信息并自动隐藏

Feb 11 Javascript

动态添加删除表格行的js实现代码

Feb 28 Javascript

理解javascript回调函数

Dec 28 Javascript

jQuery实现的选择商品飞入文本框动画效果完整实例

Aug 10 Javascript

使用JS代码实现点击按钮下载文件

Nov 12 Javascript

写一个移动端惯性滑动&回弹Vue导航栏组件 ly-tab

Mar 06 Javascript

Angular4集成ng2-file-upload的上传组件

Mar 14 Javascript

JavaScript实现切换多张图片

Jan 27 Javascript

Vue 事件的$event参数=事件的值案例

Jan 29 Vue.js

前端如何实现动画过渡效果

Feb 05 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调用方法mssql_fetch_row、mssql_fetch_array、mssql_fetch_assoc和mssql_fetch_objcect读取数据的区别

2012/08/08 PHP

探讨如何把session存入数据库

2013/06/07 PHP

ThinkPHP调试模式与日志记录概述

2014/08/22 PHP

PHP按指定键值对二维数组进行排序的方法

2015/12/22 PHP

php 中phar包的使用教程详解

2018/10/26 PHP

yii框架结合charjs实现统计30天数据的方法

2020/04/04 PHP

document.all还是document.getElementsByName?

2006/07/21 Javascript

js处理表格对table进行修饰

2014/05/26 Javascript

Bootstrap按钮组件详解

2016/04/26 Javascript

jQuery插件ajaxFileUpload使用实例解析

2016/10/19 Javascript

理解JavaScript原型链

2016/10/25 Javascript

详解webpack require.ensure与require AMD的区别

2017/12/13 Javascript

react native 获取地理位置的方法示例

2018/08/28 Javascript

vue 实现边输入边搜索功能的实例讲解

2018/09/16 Javascript

微信小程序canvas截取任意形状的实现代码

2020/01/13 Javascript

vue使用echarts实现水平柱形图实例

2020/09/09 Javascript

使用AutoJs实现微信抢红包的代码

2020/12/31 Javascript

[49:21]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第二场 11.05

2020/11/06 DOTA

Python常见格式化字符串方法小结【百分号与format方法】

2016/09/18 Python

python 实现tar文件压缩解压的实例详解

2017/08/20 Python

python实现求两个字符串的最长公共子串方法

2018/07/20 Python

python微元法计算函数曲线长度的方法

2018/11/08 Python

详解Python做一个名片管理系统

2019/03/14 Python

Python中print和return的作用及区别解析

2019/05/05 Python

python实现贪吃蛇双人大战

2020/04/18 Python

Python使用tkinter实现摇骰子小游戏功能的代码

2020/07/02 Python

初入社会应届生求职信

2013/11/18 职场文书

男方父母证婚词

2014/01/12 职场文书

幼儿园开学家长寄语

2014/01/19 职场文书

对祖国的寄语大全

2014/04/11 职场文书

七一建党节慰问信

2015/02/14 职场文书

幼儿园小班工作总结2015

2015/04/25 职场文书

大国崛起英国观后感

2015/06/02 职场文书

vue 实现上传组件

2021/05/31 Vue.js

Win11怎么修改电源模式？Win11修改电源模式的方法

2022/04/05 数码科技

win11开机发生死循环重启怎么办?win11开机发生死循环重启解决方法

2022/08/05 数码科技