首页
所有分类
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 遍历对象中的子对象
Jul 03 Javascript
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
Mar 11 Javascript
jQuery提示插件alertify使用指南
Apr 21 Javascript
JS实现兼容性较好的随屏滚动效果
Nov 09 Javascript
JS实现Select的option上下移动的方法
Mar 01 Javascript
jquery+ajax+text文本框实现智能提示完整实例
Jul 09 Javascript
微信小程序 devtool隐藏的秘密
Jan 21 Javascript
JavaScript面向对象继承原理与实现方法分析
Aug 09 Javascript
详解关于表格合并span-method方法的补充(表格数据由后台动态返回)
May 21 Javascript
express如何解决ajax跨域访问session失效问题详解
Jun 20 Javascript
element实现合并单元格通用方法
Nov 13 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
定时任务(2) 计时器(1) offset(1) Mysql报错(1) 锁(1) 性能优化(3) MYSQL函数(1) limit(1) mysql.user(1) 逻辑架构(1)
You might like
PHP PDO函数库详解
2010/04/27 PHP
php Smarty初体验二 获取配置信息
2011/08/08 PHP
thinkPHP实现多字段模糊匹配查询的方法
2016/12/01 PHP
PHP的PDO大对象(LOBs)
2019/01/27 PHP
php输出控制函数和输出函数生成静态页面
2019/06/27 PHP
laravel5.2表单验证,并显示错误信息的实例
2019/09/29 PHP
网页中CDATA标记的说明
2010/09/12 Javascript
jQuery模拟点击A标记示例参考
2014/04/17 Javascript
jQuery实现自动切换播放的经典滑动门效果
2015/09/12 Javascript
JavaScript开发者必备的10个Sublime Text插件
2016/02/27 Javascript
使用JavaScript实现弹出层效果的简单实例
2016/05/31 Javascript
JS简单去除数组中重复项的方法
2016/09/13 Javascript
JS调用打印机功能简单示例
2016/11/28 Javascript
vue项目中vue-i18n和element-ui国际化开发实现过程
2018/04/25 Javascript
基于vue,vue-router, vuex及addRoutes进行权限控制问题
2018/05/02 Javascript
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
2019/11/13 Javascript
es6数组includes()用法实例分析
2020/04/18 Javascript
vue3.0 自适应不同分辨率电脑的操作
2021/02/06 Vue.js
[05:15]2018年度CS GO社区贡献奖-完美盛典
2018/12/16 DOTA
python连接mongodb操作数据示例(mongodb数据库配置类)
2013/12/31 Python
python使用urlparse分析网址中域名的方法
2015/04/15 Python
使用python实现生成用户信息
2017/03/20 Python
Python在OpenCV里实现极坐标变换功能
2019/09/02 Python
python如何利用paramiko执行服务器命令
2020/11/07 Python
美国休闲服装品牌：J.Crew Factory
2017/03/04 全球购物
琳达·法罗眼镜英国官网：Linda Farrow英国
2021/01/19 全球购物
教师自我评价范例
2013/09/24 职场文书
大学毕业生自荐书怎么写？
2014/01/06 职场文书
优秀本科毕业生自荐信
2014/07/04 职场文书
求职简历自我评价怎么写
2015/03/10 职场文书
2015年团支部工作总结
2015/04/03 职场文书
2015年信访维稳工作总结
2015/04/07 职场文书
有关浪费资源的建议书
2015/09/14 职场文书
先进个人主要事迹怎么写
2015/11/04 职场文书
Java面试题冲刺第十八天--Spring框架3
2021/08/07 面试题
SpringBoot项目多数据源及mybatis 驼峰失效的问题解决方法
2022/07/07 Java/Android