案例

通过此插件可以为几乎所有东西添加下拉菜单,包括导航条、标签页、胶囊式按钮。

用于导航条

导航条分为四个部分。第一部分导航头,第二部分导航列,第三部分form查询表单,第四部分导航列。

  1. <nav class="navbar navbar-default" role="navigation">
  2. <div class="navbar-header">
  3. <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myCollapse">
  4. <span class="sr-only">Toggle navigation</span>
  5. <span class="icon-bar"></span>
  6. <span class="icon-bar"></span>
  7. <span class="icon-bar"></span>
  8. </button>
  9. <a class="navbar-brand" href="#">Brand</a>
  10. </div>
  11. <div class="collapse navbar-collapse" id="myCollapse">
  12. <ul class="nav navbar-nav">
  13. <li class="active"><a href="#">Link</a></li>
  14. <li><a href="#">Link</a></li>
  15. <li class="dropdown">
  16. <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
  17. <ul class="dropdown-menu">
  18. <li><a href="#">Action</a></li>
  19. <li><a href="#">Another action</a></li>
  20. <li><a href="#">Something else here</a></li>
  21. <li class="divider"></li>
  22. <li><a href="#">Separated link</a></li>
  23. <li class="divider"></li>
  24. <li><a href="#">One more separated link</a></li>
  25. </ul>
  26. </li>
  27. </ul>
  28. <form class="navbar-form navbar-left" role="search">
  29. <div class="form-group">
  30. <input type="text" class="form-control" placeholder="Search">
  31. </div>
  32. <button type="submit" class="btn btn-default">Submit</button>
  33. </form>
  34. <ul class="nav navbar-nav navbar-right">
  35. <li><a href="#">Link</a></li>
  36. <li class="dropdown">
  37. <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
  38. <ul class="dropdown-menu">
  39. <li><a href="#">Action</a></li>
  40. <li><a href="#">Another action</a></li>
  41. <li><a href="#">Something else here</a></li>
  42. <li class="divider"></li>
  43. <li><a href="#">Separated link</a></li>
  44. </ul>
  45. </li>
  46. </ul>
  47. </div>
  48. lt;/nav>

效果就是

用法一--通过data属性

通过向链接或按钮添加data-toggle="dropdown"可以打开或关闭下拉菜单。

      <li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>

用法二--通过JavaScript

通过JavaScript打开或关闭下拉菜单:

删除data-toggle属性,那么再次点击就不会出现下来菜单了,接下来我们通过给这个a标签添加一个onclick事件。

<script type="text/javascript">
function Test()
{
$('#myDropDown').dropdown();
} </script>

然后点击a标签就可以出现下拉菜单了。

可以绑定事件,然后在元素进行相应处理的时候会自动绑定到元素,并进行执行相关的代码。

$('#myDropdown').on('show.bs.dropdown', function () {
// 在显示的时候做一些处理代码
})

Bootstrap学习js插件篇之下拉菜单的更多相关文章

  1. Bootstrap学习js插件篇之标签页

    简单的标签页 代码: <h1 class="page-header">4.3标签页</h1> <ul class="nav nav-tabs ...

  2. Bootstrap学习js插件篇之滚动监听

    1.滚动监听 案例 滚动监听插件可以根据滚动条的位置自动更新所对应的导航标记.Bootstrap中文网左侧就是一个滚动监听的例子. 代码段: <nav id="navbar-examp ...

  3. Bootstrap学习js插件篇之提示框

    案例 受到Jason Frame开发的jQuery.tipsy插件的启发,我们才把这个工具提示插件做的更好,而且此插件不依赖图片,只是使用CSS3来实现动画效果,并使用data属性存储标题. 将鼠标悬 ...

  4. 《玩转Bootstrap(JS插件篇)》笔记

    导入JavaScript插件 不论是单独导入还一次性导入之前必须先导入jQuery库. 一次性导入 <script src="js/bootstrap.min.js"> ...

  5. 玩转Bootstrap(JS插件篇)-第1章 模态弹出框 :1-1导入JavaScript插件

    导入JavaScript插件 Bootstrap除了包含丰富的Web组件之外,如前面介绍的下拉菜单.按钮组.导航.分页等.他还包括一些JavaScript的插件. Bootstrap的JavaScri ...

  6. bootstrap学习——javascript插件篇

    飞近期做的一个小项目须要用到一个模态框和一个图片浏览插件,并把二者结合,刚好bootstrap有相应插件,下面是学习应用流程: 1.    引入js文件: 能够单个引入相应插件文件,或一次所有引入.飞 ...

  7. 玩转Bootstrap(JS插件篇)-第1章 模态弹出框 :1-4 模态弹出框--结构分析

    模态弹出框--结构分析 Bootstrap框架中的模态弹出框,分别运用了“modal”.“modal-dialog”和“modal-content”样式,而弹出窗真正的内容都放置在“modal-con ...

  8. 玩转Bootstrap(JS插件篇)-第1章 模态弹出框 :1-2 动画过渡

    动画过渡(Transitions) 这一小节我们先来讲“动画过渡(Transitions)”这个插件的使用,源文件:transition.js Bootstrap框架默认给各个组件提供了基本动画的过渡 ...

  9. 玩转Bootstrap(JS插件篇)-第1章 模态弹出框 :1-3 模态弹出框

    模态弹出框(Modals) 这一小节我们先来讲解一个“模态弹出框”,插件的源文件:modal.js. 右侧代码编辑器(30行)就是单独引入 bootstrap 中发布出的“modal.js”文件. 样 ...

随机推荐

  1. NetCore+Dapper WebApi架构搭建(三):添加实体和仓储

    上一节讲了类库添加一些底层的基本封装,下面来添加实体和仓储 1.Entities文件夹添加一个实体类Users,继承BaseModel,即拥有BaseModel的主键 using System; na ...

  2. Home Assistant + 树莓派:强大的智能家居系统 · 安装篇

    Home Assistant + 树莓派:强大的智能家居系统 · 安装篇 转载:Home Assistant + 树莓派:强大的智能家居系统 · 安装篇 目录 1. 初始安装 3. Homebridg ...

  3. 【SQL】180. Consecutive Numbers

    Write a SQL query to find all numbers that appear at least three times consecutively. +----+-----+ | ...

  4. iOS 11开发教程(五)iOS11模拟器介绍二

    iOS 11开发教程(五)iOS11模拟器介绍二 3.iOS11模拟器中设置语言 对于不同国家的人来说,使用到的语言是不一样的.一般情况下iOS11模拟器默认使用的English(英语).对于英文不好 ...

  5. 1035 Password (20)(20 point(s))

    problem To prepare for PAT, the judge sometimes has to generate random passwords for the users. The ...

  6. python的可变与不可变数据类型

    <python的可变与不可变数据类型>     python与C/C++不一样,它的变量使用有自己的特点,当初学python的时候,一定要记住“一切皆为对象,一切皆为对象的引用”这句话,其 ...

  7. Django的orm中get和filter的不同

    Django的orm框架对于业务复杂度不是很高的应用来说还是不错的,写起来很方面,用起来也简单.对于新手来说查询操作中最长用的两个方法get和filter有时候一不注意就会犯下一些小错误.那么今天就来 ...

  8. 【51Nod 1222】最小公倍数计数

    http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1222 求\([a,b]\)中的个数转化为求\([1,b]\)中的个数减去 ...

  9. python数据库操作——sqlite3模块

    # -*- coding: utf-8 -*- ''' Version : Python27 Author : Spring God Date : 2012-4-26 ''' import sqlit ...

  10. codevs 1191 树轴染色 线段树区间定值,求和

    codevs 1191 树轴染色 Time Limit: 1 Sec  Memory Limit: 256 MB 题目连接 http://www.codevs.cn/problem/1191/ Des ...