首页
所有分类
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 相关文章推荐
Javascript 继承机制实例
Aug 12 Javascript
利用js动态添加删除table行的示例代码
Dec 16 Javascript
Asp.Net alert弹出提示信息的几种方法总结
Jan 29 Javascript
21个值得收藏的Javascript技巧
Feb 04 Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
May 06 Javascript
javascript关于继承解析
May 10 Javascript
使用jquery提交form表单并自定义action的实现代码
May 25 Javascript
基于jQuery实现弹幕APP
Feb 10 Javascript
js轮播图无缝滚动效果
Jun 17 Javascript
Vue实现购物车详情页面的方法
Aug 20 Javascript
详解Vue3 Composition API中的提取和重用逻辑
Apr 29 Javascript
深入了解Vue3模板编译原理
Nov 19 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
发报机(1) 电磁辐射(1) 调幅(1) 电台(1) 电路图(1) SWL(1) GWEN(1) SW(1) FM(4) LW(1)
You might like
PHP快速按行读取CSV大文件的封装类分享（也适用于其它超大文本文件）
2014/04/10 PHP
分享一个php 的异常处理程序
2014/06/22 PHP
个人写的PHP验证码生成类分享
2014/08/21 PHP
PHP面向对象详解（三）
2015/12/07 PHP
javascript 写类方式之一
2009/07/05 Javascript
关于document.cookie的使用javascript
2010/10/29 Javascript
JavaScript中获取未知对象属性的代码
2011/04/27 Javascript
javascript 基础篇2 数据类型，语句，函数
2012/03/14 Javascript
jquery更换文章内容与改变字体大小代码
2013/09/30 Javascript
编写高性能Javascript代码的N条建议
2015/10/12 Javascript
微信小程序 教程之WXML
2016/10/18 Javascript
使用JavaScriptCore实现OC和JS交互详解
2017/03/28 Javascript
zTree获取当前节点的下一级子节点数实例
2017/09/05 Javascript
微信小程序实现电子签名功能
2020/07/29 Javascript
如何构建 vue-ssr 项目的方法步骤
2020/08/04 Javascript
JavaScript实现雪花飘落效果
2020/12/27 Javascript
[22:07]DOTA2-DPC中国联赛 正赛 iG vs Magma 选手采访
2021/03/11 DOTA
使用Python的turtle模块画图的方法
2017/11/15 Python
200 行python 代码实现 2048 游戏
2018/01/12 Python
pycharm重置设置,恢复默认设置的方法
2018/10/22 Python
在Python中获取两数相除的商和余数方法
2018/11/10 Python
python抓取多种类型的页面方法实例
2019/11/20 Python
keras获得某一层或者某层权重的输出实例
2020/01/24 Python
html5+css3之CSS中的布局与Header的实现
2014/11/21 HTML / CSS
html5.2 dialog简介详解
2018/02/27 HTML / CSS
ET Mall东森购物网：东森严选
2017/03/06 全球购物
英国最大的在线蜡烛商店：Candles Direct
2019/03/26 全球购物
澳大利亚美容产品及化妆品在线：Activeskin
2020/06/03 全球购物
New delete 与malloc free 的联系与区别
2013/02/04 面试题
列车长先进事迹材料
2014/01/25 职场文书
追悼会答谢词
2015/01/05 职场文书
2016幼儿园新学期寄语
2015/12/03 职场文书
Python OpenCV快速入门教程
2021/04/17 Python
SpringCloud之@FeignClient()注解的使用方式
2021/09/25 Java/Android
SQL优化老出错,那是你没弄明白MySQL解释计划用法
2021/11/27 MySQL
利用JavaScript写一个简单计算器
2021/11/27 Javascript