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下拉菜单的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript web页面刷新的方法收集
Jul 02 Javascript
JQuery实现简单时尚快捷的气泡提示插件
Dec 20 Javascript
node.js中的console.log方法使用说明
Dec 09 Javascript
javascript正则表达式定义(语法)总结
Jan 08 Javascript
jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
Aug 17 Javascript
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
Aug 17 Javascript
老生常谈angularjs中的$state.go
Apr 24 Javascript
vue不通过路由直接获取url中参数的方法示例
Aug 24 Javascript
解决低版本的浏览器不支持es6的import问题
Mar 09 Javascript
微信小程序实现留言板(Storage)
Nov 02 Javascript
vue登录页面cookie的使用及页面跳转代码
Jul 10 Javascript
关于JavaScript 中 if包含逗号表达式
Nov 27 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
Apache+php+mysql在windows下的安装与配置图解(最新版)
2008/11/30 PHP
PHP spl_autoload_register实现自动加载研究
2011/12/06 PHP
php使用指定编码导出mysql数据到csv文件的方法
2015/03/31 PHP
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
javaScript - 如何引入js代码
2021/03/09 Javascript
多广告投放代码 推荐
2006/11/13 Javascript
学习ExtJS TextField常用方法
2009/10/07 Javascript
jQuery代码优化 选择符篇
2011/11/01 Javascript
jQuery中:animated选择器用法实例
2014/12/29 Javascript
属于你的jQuery提示框(Tip)插件
2016/01/20 Javascript
原生js实现简单的Ripple按钮实例代码
2017/03/24 Javascript
node.js中debug模块的简单介绍与使用
2017/04/25 Javascript
Vue渲染函数详解
2017/09/15 Javascript
Windows下Node.js安装及环境配置方法
2017/09/18 Javascript
微信小程序实现页面分享onShareAppMessage
2019/08/12 Javascript
vue项目打包之开发环境和部署环境的实现
2020/04/23 Javascript
[41:17]完美世界DOTA2联赛PWL S3 access vs CPG 第二场 12.13
2020/12/17 DOTA
Python类的专用方法实例分析
2015/01/09 Python
Python找出9个连续的空闲端口
2016/02/01 Python
基于python3 类的属性、方法、封装、继承实例讲解
2017/09/19 Python
Windows下Anaconda的安装和简单使用方法
2018/01/04 Python
Python提取频域特征知识点浅析
2019/03/04 Python
基于Django的乐观锁与悲观锁解决订单并发问题详解
2019/07/31 Python
Python 切分数组实例解析
2019/11/07 Python
使用python快速在局域网内搭建http传输文件服务的方法
2019/11/14 Python
python 制作简单的音乐播放器
2020/11/25 Python
HTML5注册页面示例代码
2014/03/27 HTML / CSS
Fashion Eyewear美国:英国线上设计师眼镜和太阳镜的零售商
2016/08/15 全球购物
巴西图书和电子产品购物网站:Saraiva
2017/06/07 全球购物
VICHY薇姿英国官网:全球专业敏感肌护肤领先品牌
2017/07/04 全球购物
耐克波兰官方网站:Nike波兰
2019/09/03 全球购物
四年级数学教学反思
2014/02/02 职场文书
《中彩那天》教学反思
2014/02/22 职场文书
大学学风建设方案
2014/05/04 职场文书
乡镇党员干部四风对照检查材料思想汇报
2014/09/27 职场文书
2017大学生寒假社会实践心得体会
2016/01/14 职场文书