首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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实现的简单提示信息插件
Dec 08 Javascript
javascript中数组和字符串的方法对比
Jul 20 Javascript
AngularJS入门教程之 XMLHttpRequest实例讲解
Jul 27 Javascript
node.js 和HTML5开发本地桌面应用程序
Dec 13 Javascript
jQuery代码实现实时获取时间
Jan 29 Javascript
JS中的phototype详解
Feb 04 Javascript
微信小程序 在线支付功能的实现
Mar 14 Javascript
Javascript别踩白块儿（钢琴块儿）小游戏实现代码
Jul 20 Javascript
JS组件系列之Gojs组件 前端图形化插件之利器
Nov 29 Javascript
JS学习笔记之数组去重实现方法小结
May 29 Javascript
微信小程序错误this.setData报错及解决过程
Sep 18 Javascript
js实现飞机大战游戏
Aug 26 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
海燕B411(1) 1 Tube Radio(1) TECSUN(1) 再生机(1) 德生(17) PL-365(1) 车机(1) 东方红(1) 修复(2) 电子管(5)
You might like
重置版战役片段
2020/04/09 魔兽争霸
PHP插入排序实现代码
2013/04/04 PHP
php图像处理函数大全(推荐收藏)
2013/07/11 PHP
thinkphp视图模型查询提示ERR: 1146:Table 'db.pr_order_view' doesn't exist的解决方法
2014/10/30 PHP
PHP高效获取远程图片尺寸和大小的实现方法
2017/10/20 PHP
兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码
2011/11/30 Javascript
JQuery 返回布尔值Is()条件判断方法代码
2012/05/14 Javascript
关于js new Date() 出现NaN 的分析
2012/10/23 Javascript
探讨JQUERY JSON的反序列化类 using问题的解决方法
2013/12/19 Javascript
javaScript中with函数用法实例分析
2015/06/08 Javascript
Bootstrap实现水平排列的表单
2016/07/04 Javascript
Bootstrap 3 进度条的实现
2017/02/22 Javascript
node.js的exports、module.exports与ES6的export、export default深入详解
2017/10/26 Javascript
浅谈webpack对样式的处理
2018/01/05 Javascript
详解html-webpack-plugin用法全解
2018/01/22 Javascript
基于vue.js 2.x的虚拟滚动条的示例代码
2018/01/23 Javascript
jQuery实现每日秒杀商品倒计时功能
2019/09/06 jQuery
webpack4 配置 ssr 环境遇到“document is not defined”
2019/10/24 Javascript
基于JavaScript实现十五拼图代码实例
2020/04/26 Javascript
javascript实现前端分页效果
2020/06/24 Javascript
element-ui中dialog弹窗关闭按钮失效的解决
2020/09/22 Javascript
python每次处理固定个数的字符的方法总结
2013/01/29 Python
Python Web框架Flask中使用百度云存储BCS实例
2015/02/08 Python
Python多线程编程（七）：使用Condition实现复杂同步
2015/04/05 Python
解读! Python在人工智能中的作用
2017/11/14 Python
python的pip安装以及使用教程
2018/09/18 Python
Django项目创建到启动详解（最全最详细）
2019/09/07 Python
python3 求约数的实例
2019/12/05 Python
Python偏函数Partial function使用方法实例详解
2020/06/17 Python
Python selenium爬取微信公众号文章代码详解
2020/08/12 Python
HTML5给汉字加拼音收起展开组件的实现代码
2020/04/08 HTML / CSS
荷兰的时尚市场：To Be Dressed
2019/05/06 全球购物
澳大利亚窗帘商店：Curtain Wonderland
2019/12/01 全球购物
《一个中国孩子的呼声》教学反思
2014/02/12 职场文书
出差报告范文
2014/11/06 职场文书
四风之害观后感
2015/06/09 职场文书