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

jquery和ajax的关系详细介绍

Nov 29 Javascript

jquery实现的随机多彩tag标签随机颜色和字号大小效果

Mar 27 Javascript

iframe的onreadystatechange事件在firefox下的使用

Apr 16 Javascript

自定义刻度jQuery进度条及插件

Sep 02 Javascript

jquery.validate 自定义验证方法及validate相关参数

Jan 18 Javascript

Bootstrap+jfinal实现省市级联下拉菜单

May 30 Javascript

微信小程序实现实时圆形进度条的方法示例

Feb 24 Javascript

Vue2递归组件实现树形菜单

Apr 10 Javascript

AngularJs 常用的过滤器

May 15 Javascript

webpack2.0配置postcss-loader的方法

Aug 17 Javascript

Express的HTTP重定向到HTTPS的方法

Jun 06 Javascript

Nuxt的动态路由和参数校验操作

Nov 09 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与C#的值类型指向区别的详解

2013/05/21 PHP

PHP设计模式之PHP迭代器模式讲解

2019/03/22 PHP

javascript preload&lazy load

2010/05/13 Javascript

jquery如何改变html标签的样式(两种实现方法)

2013/01/16 Javascript

原生js实现查找/添加/删除/指定元素的class

2013/04/12 Javascript

教你如何使用firebug调试功能了解javascript闭包和this

2015/03/04 Javascript

javascript实现漂亮的拖动层，窗口拖拽特效

2015/04/24 Javascript

JavaScript实现上下浮动的窗口效果代码

2015/10/12 Javascript

Express实现前端后端通信上传图片之存储数据库（mysql）傻瓜式教程（一）

2015/12/10 Javascript

Bootstrap基本插件学习笔记之Tooltip提示工具(18)

2016/12/08 Javascript

jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例

2017/09/20 jQuery

import与export在node.js中的使用详解

2017/09/28 Javascript

Node之简单的前后端交互(实例讲解)

2017/11/14 Javascript

vue.js使用v-model指令实现的数据双向绑定功能示例

2018/05/22 Javascript

微信小程序实现分享到朋友圈功能

2018/07/19 Javascript

js form表单input框限制20个字符，10个汉字代码实例

2019/04/12 Javascript

微信小程序遍历Echarts图表实现多个饼图

2019/04/25 Javascript

[48:20]OpTic vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.18

2018/08/19 DOTA

Python多层装饰器用法实例分析

2018/02/09 Python

python和flask中返回JSON数据的方法

2018/03/26 Python

Python中数组,列表:冒号的灵活用法介绍(np数组,列表倒序)

2018/04/18 Python

Python中利用xpath解析HTML的方法

2018/05/14 Python

Python3.4 tkinter,PIL图片转换

2018/06/21 Python

OpenCV 边缘检测

2019/07/10 Python

Python实现Singleton模式的方式详解

2019/08/08 Python

Django中自定义模型管理器(Manager)及方法

2019/09/23 Python

Python字典深浅拷贝与循环方式方法详解

2020/02/09 Python

python GUI库图形界面开发之PyQt5美化窗体与控件(异形窗体)实例

2020/02/25 Python

Hurley官方网站：扎根于海滩生活方式的全球青年文化品牌

2020/05/18 全球购物

2014年大学生自我评价

2014/01/19 职场文书

应届生求职信范文

2014/05/26 职场文书

国际残疾人日广播稿范文

2014/10/09 职场文书

文明礼仪倡议书

2015/04/28 职场文书

春节慰问简报

2015/07/21 职场文书

公司致全体员工的感谢信

2019/06/24 职场文书

使用css样式设计一个简单的html登陆界面的实现

2021/03/30 HTML / CSS