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

利用Dojo和JSON建立无限级AJAX动态加载的功能模块树

Mar 24 Javascript

jQuery-ui中自动完成实现方法

Jun 10 Javascript

原生javascript获取元素样式属性值的方法

Dec 25 Javascript

使用JavaScript实现Java的List功能(实例讲解)

Nov 07 Javascript

前台js调用后台方法示例

Dec 02 Javascript

jQuery中document与window以及load与ready 区别详解

Dec 29 Javascript

js实现具有高亮显示效果的多级菜单代码

Sep 01 Javascript

vue-router单页面路由

Jun 17 Javascript

Vue进度条progressbar组件功能

Apr 17 Javascript

WEB前端性能优化的7大手段详解

Feb 04 Javascript

javascript异常处理实现原理详解

Feb 17 Javascript

jquery实现鼠标悬浮弹出气泡提示框

Dec 23 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编写PDF文档生成器

2006/10/09 PHP

php access 数据连接与读取保存编辑数据的实现代码

2010/05/12 PHP

PHP中的float类型使用说明

2010/07/27 PHP

使用Smarty 获取当前日期时间和格式化日期时间的方法详解

2013/06/18 PHP

codeigniter发送邮件并打印调试信息的方法

2015/03/21 PHP

php封装的mysqli类完整实例

2016/10/18 PHP

thinkPHP5.0框架API优化后的友好性分析

2017/03/17 PHP

PHP cookie与session会话基本用法实例分析

2019/11/18 PHP

js停止输出代码

2008/07/20 Javascript

jQuery数据检索中根据关键字快速定位GridView指定行的实现方法

2016/06/08 Javascript

request请求获取参数的实现方法(post和get两种方式)

2016/09/27 Javascript

微信小程序九宫格实例代码

2017/01/21 Javascript

jquery ajaxfileupload异步上传插件使用详解

2017/02/08 Javascript

Three.js基础学习教程

2017/11/16 Javascript

Vue页面骨架屏注入方法

2018/05/13 Javascript

修改node.js默认的npm安装目录实例

2018/05/15 Javascript

Node.js开发之套接字(socket)编程入门示例

2019/11/05 Javascript

vue el-tree 默认展开第一个节点的实现代码

2020/05/15 Javascript

跟老齐学Python之正规地说一句话

2014/09/28 Python

python读取TXT到数组及列表去重后按原来顺序排序的方法

2015/06/26 Python

Python 文件处理注意事项总结

2017/04/10 Python

python list是否包含另一个list所有元素的实例

2018/05/04 Python

Python秒算24点实现及原理详解

2019/07/29 Python

Python中url标签使用知识点总结

2020/01/16 Python

django和flask哪个值得研究学习

2020/07/31 Python

新加坡领先的在线生活方式和杂货购物网站：EAMART

2019/04/02 全球购物

进修护士自我鉴定

2013/10/14 职场文书

参观考察邀请函范文

2014/01/29 职场文书

医学生毕业自我鉴定

2014/03/26 职场文书

骨干教师培训方案

2014/05/06 职场文书

演讲比赛的活动方案

2014/08/28 职场文书

2015年幼儿园个人工作总结

2015/04/25 职场文书

检讨书格式

2015/05/07 职场文书

2016大学生求职自荐信范文

2016/01/28 职场文书

多人盗宝《绿林侠盗》第三赛季4.5上线跨平台实装

2022/04/03 其他游戏

Java+swing实现抖音上的表白程序详解

2022/06/25 Java/Android