编程 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 学习笔记（九）call和apply方法

Jan 11 Javascript

Jquery ui css framework

Jun 28 Javascript

javascript之典型高阶函数应用介绍二

Jan 10 Javascript

js动态拼接正则表达式的两种方法

Mar 04 Javascript

Node.js中的缓冲与流模块详细介绍

Feb 11 Javascript

JavaScript随机生成信用卡卡号的方法

Apr 07 Javascript

jQuery中each()、find()和filter()等节点操作方法详解(推荐)

May 25 Javascript

浅谈AngularJS中ng-class的使用方法

Nov 11 Javascript

AngualrJs清除定时器遇到的坑

Oct 13 Javascript

vue vuex vue-rouert后台项目——权限路由（适合初学）

Dec 29 Javascript

vue实现pdf导出解决生成canvas模糊等问题(推荐)

Oct 18 Javascript

RxJS在TypeScript中的简单使用详解

Apr 13 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

MySQL相关说明

2007/01/15 PHP

台湾中原大学php教程孙仲岳主讲

2008/01/07 PHP

PHP使用CURL实现多线程抓取网页

2015/04/30 PHP

教你识别简单的免查杀PHP后门

2015/09/13 PHP

PHP 实现字符串翻转（包含中文汉字）的实现代码

2017/04/01 PHP

laravel 解决paginate查询多个字段报错的问题

2019/10/22 PHP

php实现JWT验证的实例教程

2020/11/26 PHP

js 复制或插入Html的实现方法小结

2010/05/19 Javascript

JavaScript高级程序设计读书笔记之八 Function类及闭包

2012/02/27 Javascript

JS判断iframe是否加载完成的方法

2016/08/03 Javascript

jquery select插件异步实时搜索实例代码

2017/10/20 jQuery

页面点击小红心js实现代码

2018/05/26 Javascript

vue2.0的虚拟DOM渲染思路分析

2018/08/09 Javascript

微信小程序文章详情页跳转案例详解

2019/07/09 Javascript

详解js location.href和window.open的几种用法和区别

2019/12/02 Javascript

js实现烟花特效

2020/03/02 Javascript

JS如何寻找数组中心索引过程解析

2020/06/01 Javascript

[02:51]2014DOTA2国际邀请赛 IG战队官方纪录片

2014/07/21 DOTA

跟老齐学Python之关于类的初步认识

2014/10/11 Python

python实现将html表格转换成CSV文件的方法

2015/06/28 Python

使用python为mysql实现restful接口

2018/01/05 Python

pytorch中获取模型input/output shape实例

2019/12/30 Python

Python定时器线程池原理详解

2020/02/26 Python

python模拟实现分发扑克牌

2020/04/22 Python

opencv 查找连通区域最大面积实例

2020/06/04 Python

pycharm激活码2020最新分享适用pycharm2020最新版亲测可用

2020/11/22 Python

CSS3实现DIV圆角效果完整代码

2012/10/10 HTML / CSS

Parts Express：音频、视频和扬声器的第一来源

2017/04/25 全球购物

美国在线印刷公司：PsPrint

2017/10/12 全球购物

意大利体育用品和运动服网上商店：Maxi Sport

2019/09/14 全球购物

Keds加拿大官网：购买帆布运动鞋和皮鞋

2019/09/26 全球购物

工业设计专业推荐信

2013/10/29 职场文书

新闻专业推荐信范文

2013/11/20 职场文书

高中生家长寄语大全

2014/04/03 职场文书

教师节随笔

2015/08/15 职场文书

python实现简单反弹球游戏

2021/04/12 Python