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

ExtJS4 动态生成的grid导出为excel示例

May 02 Javascript

JavaScript实现的内存数据库LokiJS介绍和入门实例

Nov 17 Javascript

基于javascript实现泡泡大冒险网页版小游戏

Mar 23 Javascript

JavaScript 2048 游戏实例代码(简单易懂)

Mar 25 Javascript

js字符串截取函数slice、substring和substr的比较

May 17 Javascript

浅析JavaScript函数的调用模式

Aug 10 Javascript

javascript简单写的判断电话号码实例

May 24 Javascript

bootstrap基本配置_动力节点Java学院整理

Jul 14 Javascript

vue打包使用Nginx代理解决跨域问题

Aug 27 Javascript

JS关闭子窗口并且刷新上一个窗口的实现示例

Mar 10 Javascript

如何解决jQuery 和其他JS库的冲突

Jun 22 jQuery

vue代码分块和懒加载非必要资源文件

Apr 11 Vue.js

使用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 in_array 函数使用说明与in_array需要注意的地方说明

2010/04/13 PHP

php 删除记录同时删除图片文件的实现代码

2010/05/12 PHP

基于initPHP的框架介绍

2013/04/18 PHP

PHP 函数call_user_func和call_user_func_array用法详解

2014/03/02 PHP

浅析iis7.5安装配置php环境

2015/05/10 PHP

4种PHP异步执行的常用方式

2015/12/24 PHP

利用javascript实现一些常用软件的下载导航

2009/08/03 Javascript

JavaScript 组件之旅（三）：用 Ant 构建组件

2009/10/28 Javascript

JavaScript高级程序设计读书笔记之九本地对象Array

2012/02/27 Javascript

JS控件的生命周期介绍

2012/10/22 Javascript

不同的jQuery API来处理不同的浏览器事件

2012/12/09 Javascript

javascript批量修改文件编码格式的方法

2015/01/27 Javascript

Angularjs注入拦截器实现Loading效果

2015/12/28 Javascript

js+css3制作时钟特效

2016/10/16 Javascript

老生常谈jquery id选择器和class选择器的区别

2017/02/12 Javascript

js 性能优化之快速响应的用户界面

2017/02/15 Javascript

微信小程序 ecshop地址三级联动实现实例代码

2017/02/28 Javascript

原生js封装自定义滚动条

2017/03/24 Javascript

Jquery EasyUI $.Parser

2017/06/02 jQuery

vue loadmore 组件滑动加载更多源码解析

2017/07/19 Javascript

基于Bootstrap table组件实现多层表头的实例代码

2017/09/07 Javascript

解决vue中无法动态修改jqgrid组件 url地址的问题

2018/03/01 Javascript

在Vue项目中使用d3.js的实例代码

2018/05/01 Javascript

vue cli4.0项目引入typescript的方法

2020/07/17 Javascript

Python 3.x读写csv文件中数字的方法示例

2017/08/29 Python

ubuntu 安装pyqt5和卸载pyQt5的方法

2020/03/24 Python

tensorflow2.0的函数签名与图结构(推荐)

2020/04/28 Python

Python爬虫进阶之爬取某视频并下载的实现

2020/12/08 Python

详解CSS3的perspective属性设置3D变换距离的方法

2016/05/23 HTML / CSS

CSS3制作缩略图的详细过程

2016/07/08 HTML / CSS

TUMI澳大利亚网站：美国旅行箱包品牌

2017/03/27 全球购物

长曲棍球装备：Lacrosse Monkey

2020/12/02 全球购物

数学高效课堂实施方案

2014/03/29 职场文书

市级文明单位申报材料

2014/05/07 职场文书

迎国庆横幅标语

2014/10/08 职场文书

财政局长个人总结

2015/03/04 职场文书