编程 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常用运算符(Operators)-javascript基础教程

Dec 14 Javascript

基于jQuery的history历史记录插件

Dec 11 Javascript

jQuery使用数组编写图片无缝向左滚动

Dec 11 Javascript

Jquery实现图片左右自动滚动示例

Sep 25 Javascript

用js模拟struts2的多action调用示例

May 19 Javascript

纯javascript模仿微信打飞机小游戏

Aug 20 Javascript

bootstrap fileinput 上传插件的基础使用

Feb 17 Javascript

js禁止浏览器的回退事件

Apr 20 Javascript

一步步教你利用Docker设置Node.js

Nov 20 Javascript

ES6 Set结构的应用实例分析

Jun 26 Javascript

微信小程序—setTimeOut定时器的问题及解决

Jul 26 Javascript

在Vue中使用Echarts实例图的方法实例

Oct 10 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

短波收音机简介

2021/03/01 无线电

说明的比较细的php 正则学习实例

2008/07/30 PHP

js 动态选中下拉框

2009/11/26 Javascript

JQuery中的ready函数冲突的解决方法

2010/05/17 Javascript

js里怎么取select标签里的值并修改

2012/12/10 Javascript

JS实现的用来对比两个用指定分隔符分割的字符串是否相同

2014/09/19 Javascript

javascript编写实用的省市选择器

2015/02/12 Javascript

JavaScript模拟实现键盘打字效果

2015/06/29 Javascript

浅谈javascript的call()、apply()、bind()的用法

2016/02/21 Javascript

JavaScript事件学习小结（三）js事件对象

2016/06/09 Javascript

Node+Express+MongoDB实现登录注册功能实例

2017/04/23 Javascript

JS判断非空至少输入两个字符的简单实现方法

2017/06/23 Javascript

Angular.js中window.onload(),$(document).ready()的写法浅析

2017/09/28 Javascript

React全家桶环境搭建过程详解

2018/05/18 Javascript

vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法

2018/07/12 Javascript

python利用elaphe制作二维条形码实现代码

2012/05/25 Python

Python实现配置文件备份的方法

2015/07/30 Python

python3+PyQt5+Qt Designer实现扩展对话框

2018/04/20 Python

Python针对给定字符串求解所有子序列是否为回文序列的方法

2018/04/21 Python

Python走楼梯问题解决方法示例

2018/07/25 Python

python SQLAlchemy 中的Engine详解

2019/07/04 Python

基于sklearn实现Bagging算法（python）

2019/07/11 Python

python requests更换代理适用于IP频率限制的方法

2019/08/21 Python

python selenium操作cookie的实现

2020/03/18 Python

Python 实现PS滤镜的旋涡特效

2020/12/03 Python

Python实现淘宝秒杀功能的示例代码

2021/01/19 Python

Html5上传图片移动端、PC端通用代码

2016/06/08 HTML / CSS

Timex手表官网：美国运动休闲手表品牌

2017/01/28 全球购物

软件工程师岗位职责

2013/11/16 职场文书

运动会通讯稿100字

2014/01/31 职场文书

物理教学随笔感言

2014/02/22 职场文书

幼儿园秋游感想

2014/03/12 职场文书

有趣的广告词

2014/03/18 职场文书

调研座谈会发言材料

2014/08/23 职场文书

浅谈python数据类型及其操作

2021/05/25 Python

nginx刷新页面出现404解决方案(亲测有效)

2022/03/18 Servers