脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → Bootstrap组件之下拉菜单

学习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组件制作下拉菜单有所帮助。

您可能感兴趣的文章:

相关文章

  • js选项卡的制作方法

    js选项卡的制作方法

    这篇文章主要为大家详细介绍了js选项卡的制作方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-01-01
  • 基于JavaScript实现报警器提示音效果

    基于JavaScript实现报警器提示音效果

    这篇文章给大家分享分享一段代码基于JavaScript实现报警器提示音效果，非常不错，具有参考借鉴价值，需要的朋友参考下吧
    2017-10-10
  • Webpack中publicPath使用详解

    Webpack中publicPath使用详解

    最近自己在搭建一个基于webpack的react项目，遇到关于output.publicPath和webpack-dev-server中publicPath的问题，所以自己研究了下并写下本文记录。感兴趣的小伙伴们可以参考一下
    2021-06-06
  • 在JavaScript中如何使用宏详解

    在JavaScript中如何使用宏详解

    这篇文章主要给大家介绍了关于在JavaScript中如何使用宏的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05
  • JS实现手机号脱敏的方法详解

    JS实现手机号脱敏的方法详解

    脱敏指的是通过特定的技术手段对敏感数据进行处理,使其不再直接暴露给用户或系统,防止敏感信息泄露,通常在测试、开发、数据处理等场景中使用,本文给大家介绍了JS实现手机号脱敏的方法,需要的朋友可以参考下
    2025-03-03
  • JS数组push、unshift、pop、shift方法的实现与使用方法示例

    JS数组push、unshift、pop、shift方法的实现与使用方法示例

    这篇文章主要介绍了JS数组push、unshift、pop、shift方法,结合实例形式分析了JS数组push、unshift、pop、shift方法针对数组添加、删除等相关操作技巧,需要的朋友可以参考下
    2020-04-04
  • 夯基础之手撕javascript继承详解

    夯基础之手撕javascript继承详解

    这篇文章主要给大家介绍了关于手撕javascript继承的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-11-11
  • JS函数arguments数组获得实际传参数个数的实现方法

    JS函数arguments数组获得实际传参数个数的实现方法

    下面小编就为大家带来一篇JS函数arguments数组获得实际传参数个数的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • 小程序实现订单评价和商家评价

    小程序实现订单评价和商家评价

    这篇文章主要为大家详细介绍了小程序实现订单评价和商家评价功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-04-04
  • 微信小程序实现自定义modal弹窗封装的方法

    微信小程序实现自定义modal弹窗封装的方法

    这篇文章主要介绍了小程序自定义modal弹窗封装实现方法，本文通过实例代码相结合的形式给大家介绍的非常详细,需要的朋友可以参考下
    2018-06-06

最新评论