学习Bootstrap组件之下拉菜单

更新时间：2015年07月28日 12:02:21 作者：bboyjoe

本文介绍了一款基于HTML，CSS，JAVASCRIPT的简洁灵活的流行前端框架，需要了解的朋友可以参考下

Bootstrap 是由Twitter 工程师推出的基于HTML，CSS，JAVASCRIPT的简洁灵活的流行前端框架，我们可以把它想象成一个定义了很多效果的CSS与JS的库，库里面已经定义好了各种组件的显示效果与动画。

.dropdown——设置父元素为下拉菜单组件，向下弹出子菜单；
.dropup——设置父元素为下拉菜单组件，向上弹出子菜单；
.dropdown-toggle——设置按钮为下拉菜单切换按钮；
.dropdown-menu——设置ul元素为下拉菜单；
.dropdown-menu-right——将菜单右对齐；
.pull-right——将菜单组件的父元素右对齐；
.dropdown-header——为菜单项添加标题；
.divider——为菜单项添加分割线；
.disabled——禁用相应菜单项；

实现代码如下：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <meta name="viewport" content="width=device-width,initial-scale=1"> 
 <title>CSS全局样式_下拉菜单</title> 
 <link rel="stylesheet" href="bootstrap.min.css" type="text/css"> 
 <script src="jquery-1.11.1.min.js"></script> 
 <script src="bootstrap.min.js"></script> 
</head> 
<body> 
<div class="container"> 
 <div class="dropdown pull-right"> 
 <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> 
 下拉菜单 
 <span class="caret"></span> 
 </button> 
 <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu1"> 
 <li role="presentation" class="dropdown-header">中超Big4</li> 
 <li><a href="#" role="menuitem">上海上港</a></li> 
 <li><a href="#" role="menuitem">广州恒大</a></li> 
 <li><a href="#" role="menuitem">山东鲁能</a></li> 
 <li class="disabled"><a href="#" role="menuitem">北京国安</a></li> 
 <li role="presentation" class="divider"></li> 
 <li role="presentation" class="dropdown-header">中超5-8</li> 
 <li><a href="#" role="menuitem">上海申花</a></li> 
 <li><a href="#" role="menuitem">江苏舜天</a></li> 
 <li><a href="#" role="menuitem">长春亚泰</a></li> 
 <li><a href="#" role="menuitem">河南建业</a></li> 
 </ul> 
 </div> 
</div> 
 
</body> 
</html>

实现效果：

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程

以上就是本文的全部内容，希望对于大家使用Bootstrap组件制作下拉菜单有所帮助。

您可能感兴趣的文章:

微信小程序实现一个自定义遮罩层效果
这篇文章主要介绍了微信小程序实现一个自定义遮罩层,大概效果是点击按钮Show显示遮罩层,再次点击屏幕任何地方隐藏遮罩层,本文结合实例代码给大家介绍的非常详细,需要的朋友可以参考下
2023-09-09
万字详解JavaScript手写一个Promise
这篇文章主要介绍了万字详解JavaScript手写一个Promise，Promise就是一个类，在执行这个类的时候，需要传递一个执行器(回调函数)进去，执行器会立即执行
2022-07-07
Javascript实现运算符重载详解
本文给大家汇总介绍了Javascript实现运算符重载的方法，实现的思路很简单，有需要的小伙伴可以来看看
2018-04-04
AngularJS实现textarea记录只能输入规定数量的字符并显示
AngularJS 是一个 MV* 框架，最适于开发客户端的单页面应用。它不是个功能库，而是用来开发动态网页的框架。接下来通过本文给大家介绍AngularJS实现textarea记录只能输入规定数量的字符并显示的相关内容，需要的朋友参考下吧
2016-04-04
BootStrap智能表单实战系列(八)表单配置json详解
这篇文章主要介绍了BootStrap智能表单实战系列(八)表单配置json详解的相关资料,本章节属于高级部分，介绍一些表单中的配置知识，非常不错具有参考借鉴价值，需要的朋友可以参考下
2016-06-06
创建一般js对象的几种方式
本文主要介绍了创建一般js对象的几种方式。具有很好的参考价值，下面跟着小编一起来看下吧
2017-01-01
JS使用parseInt解析数字实现求和的方法
这篇文章主要介绍了JS使用parseInt解析数字实现求和的方法,涉及javascript表单元素值的获取及parseInt解析转换字符串为数字的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-08-08
js 实现css风格选择器（压缩后2KB）
近日在做一些OA前端界面，为了更好管理页面代码想写个js选择器，写着写着发现很费力，索性在网上找找看，功夫不负有心人，找到一个mini css选择器，且性能不凡：以下代码是压缩后的，仅2KB
2012-01-01
eval的两组性能测试数据
最近对eval火爆的讨论，教主 @Franky 和灰大 @otakustay 也给了精彩的数据分析,刚好之前也做过类似的测试，我也跟风凑个热闹，提供两组数据供大家参考
2012-08-08
javascript中JSON对象与JSON字符串相互转换实例
这篇文章主要介绍了javascript中JSON对象与JSON字符串相互转换,实例分析了json对象与字符串常用的几种转换技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-07-07