实例


在导航栏内

下面的实例演示了在导航栏内的下拉菜单的用法:

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <link href="/stylesheets/bootstrap.min.css" rel="stylesheet" >
  5. <script src="/scripts/jquery.min.js"></script>
  6. <script src="/scripts/bootstrap.min.js"></script>
  7. </head>
  8. <body>
  9. <nav class="navbar navbar-default" role="navigation">
  10. <div class="navbar-header">
  11. <a class="navbar-brand" href="#">W3Cschool</a>
  12. </div>
  13. <div>
  14. <ul class="nav navbar-nav">
  15. <li class="active"><a href="#">iOS</a></li>
  16. <li><a href="#">SVN</a></li>
  17. <li class="dropdown">
  18. <a href="#" class="dropdown-toggle" data-toggle="dropdown">
  19. Java
  20. <b class="caret"></b>
  21. </a>
  22. <ul class="dropdown-menu">
  23. <li><a href="#">jmeter</a></li>
  24. <li><a href="#">EJB</a></li>
  25. <li><a href="#">Jasper Report</a></li>
  26. <li class="divider"></li>
  27. <li><a href="#">分离的链接</a></li>
  28. <li class="divider"></li>
  29. <li><a href="#">另一个分离的链接</a></li>
  30. </ul>
  31. </li>
  32. </ul>
  33. </div>
  34. </nav>
  35. </body>
  36. </html>

在标签页内

  1. <p>带有下拉菜单的标签页</p>
  2. <ul class="nav nav-tabs">
  3. <li class="active"><a href="#">Home</a></li>
  4. <li><a href="#">SVN</a></li>
  5. <li><a href="#">iOS</a></li>
  6. <li><a href="#">VB.Net</a></li>
  7. <li class="dropdown">
  8. <a class="dropdown-toggle" data-toggle="dropdown" href="#">
  9. Java <span class="caret"></span>
  10. </a>
  11. <ul class="dropdown-menu">
  12. <li><a href="#">Swing</a></li>
  13. <li><a href="#">jMeter</a></li>
  14. <li><a href="#">EJB</a></li>
  15. <li class="divider"></li>
  16. <li><a href="#">分离的链接</a></li>
  17. </ul>
  18. </li>
  19. <li><a href="#">PHP</a></li>
  20. </ul>
  21. 代码:
    1. <!DOCTYPE HTML>
    2. <html>
    3. <head>
    4. <link href="/stylesheets/bootstrap.min.css" rel="stylesheet" >
    5. <script src="/scripts/jquery.min.js"></script>
    6. <script src="/scripts/bootstrap.min.js"></script>
    7. </head>
    8. <body>
    9. <nav class="navbar navbar-default" role="navigation">
    10. <div class="navbar-header">
    11. <a class="navbar-brand" href="javascripts:void(0);">AAA</a>
    12. </div>
    13. <div>
    14. <ul class="nav navbar-nav">
    15. <li class="active"><a href="javascripts:void(0);">iOS</a></li>
    16. <li><a href="javascripts:void(0);">SVN</a></li>
    17. <li class="dropdown">
    18. <a href="javascripts:void(0);" class="dropdown-toggle" data-toggle="dropdown">
    19. Java
    20. <b class="caret"></b>
    21. </a>
    22. <ul class="dropdown-menu">
    23. <li><a href="javascripts:void(0);">jmeter</a></li>
    24. <li><a href="javascripts:void(0);">EJB</a></li>
    25. <li><a href="javascripts:void(0);">Jasper Report</a></li>
    26. <li class="divider"></li>
    27. <li><a href="javascripts:void(0);">分离的链接</a></li>
    28. <li class="divider"></li>
    29. <li><a href="javascripts:void(0);">另一个分离的链接</a></li>
    30. </ul>
    31. </li>
    32. </ul>
    33. </div>
    34. </nav>
    35. <p>带有下拉菜单的标签页</p>
    36. <ul class="nav nav-tabs">
    37. <li class="active"><a href="javascripts:void(0);">Home</a></li>
    38. <li><a href="javascripts:void(0);">SVN</a></li>
    39. <li><a href="javascripts:void(0);">iOS</a></li>
    40. <li><a href="javascripts:void(0);">VB.Net</a></li>
    41. <li class="dropdown">
    42. <a class="dropdown-toggle" data-toggle="dropdown" href="javascripts:void(0);">
    43. Java <span class="caret"></span>
    44. </a>
    45. <ul class="dropdown-menu">
    46. <li><a href="javascripts:void(0);">Swing</a></li>
    47. <li><a href="javascripts:void(0);">jMeter</a></li>
    48. <li><a href="javascripts:void(0);">EJB</a></li>
    49. <li class="divider"></li>
    50. <li><a href="javascripts:void(0);">分离的链接</a></li>
    51. </ul>
    52. </li>
    53. <li><a href="javascripts:void(0);">PHP</a></li>
    54. </ul>
    55. </body>
    56. </html>

    用法


    可以切换下拉菜单(Dropdown)插件的隐藏内容:

      通过 data 属性:向链接或按钮添加 data-toggle="dropdown" 来切换下拉菜单,如下所示:

    1. <div class="dropdown">
    2. <a data-toggle="dropdown" href="#">下拉菜单(Dropdown)触发器</a>
    3. <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    4. ...
    5. </ul>
    6. </div>

      如果您需要保持链接完整(在浏览器不启用 JavaScript 时有用),请使用data-target 属性代替 href="#":

    1. <div class="dropdown">
    2. <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
    3. 下拉菜单(Dropdown) <span class="caret"></span>
    4. </a>
    5. <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    6. ...
    7. </ul>
    8. </div>

      通过 JavaScript:通过 JavaScript 调用下拉菜单切换,请使用下面的方法:

    1. $('.dropdown-toggle').dropdown()

      方法


      下拉菜单切换有一个简单的方法用来显示或隐藏下拉菜单。

      1. $().dropdown('toggle')

      导航条实例


      ScrollSpy插件根据滚动的位置自动更新导航条中相应的导航项。

      拖动下面区域的滚动条,使其低于导航条的位置,注意观察active类的变化。下拉菜单中的子项也会跟着变为高亮状态。

      1. <!DOCTYPE HTML>
      2. <html>
      3. <head>
      4. <link href="/stylesheets/bootstrap.min.css" rel="stylesheet" >
      5. <script src="/scripts/jquery.min.js"></script>
      6. <script src="/scripts/bootstrap.min.js"></script>
      7. </head>
      8. <body>
      9. <nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation">
      10. <div class="navbar-header">
      11. <button class="navbar-toggle" type="button" data-toggle="collapse"
      12. data-target=".bs-js-navbar-scrollspy">
      13. <span class="sr-only">切换导航</span>
      14. <span class="icon-bar"></span>
      15. <span class="icon-bar"></span>
      16. <span class="icon-bar"></span>
      17. </button>
      18. <a class="navbar-brand" href="#">教程名称</a>
      19. </div>
      20. <div class="collapse navbar-collapse bs-js-navbar-scrollspy">
      21. <ul class="nav navbar-nav">
      22. <li><a href="#ios">iOS</a></li>
      23. <li><a href="#svn">SVN</a></li>
      24. <li class="dropdown">
      25. <a href="#" id="navbarDrop1" class="dropdown-toggle"
      26. data-toggle="dropdown">Java
      27. <b class="caret"></b>
      28. </a>
      29. <ul class="dropdown-menu" role="menu"
      30. aria-labelledby="navbarDrop1">
      31. <li><a href="#jmeter" tabindex="-1">jmeter</a></li>
      32. <li><a href="#ejb" tabindex="-1">ejb</a></li>
      33. <li class="divider"></li>
      34. <li><a href="#spring" tabindex="-1">spring</a></li>
      35. </ul>
      36. </li>
      37. </ul>
      38. </div>
      39. </nav>
      40. <div data-spy="scroll" data-target="#navbar-example" data-offset="0"
      41. style="height:200px;overflow:auto; position: relative;">
      42. <h4 id="ios">iOS</h4>
      43. <p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple
      44. TV。iOS 派生自 OS X,它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上,iOS 是苹果的移动版本。
      45. </p>
      46. <h4 id="svn">SVN</h4>
      47. <p>Apache Subversion,通常缩写为 SVN,是一款开源的版本控制系统软件。Subversion 由 CollabNet 公司在 2000 年创建。但是现在它已经发展为 Apache Software Foundation 的一个项目,因此拥有丰富的开发人员和用户社区。
      48. </p>
      49. <h4 id="jmeter">jMeter</h4>
      50. <p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序,用于负载和性能测试。
      51. </p>
      52. <h4 id="ejb">EJB</h4>
      53. <p>Enterprise Java Beans(EJB)是一个创建高度可扩展性和强大企业级应用程序的开发架构,部署在兼容应用程序服务器(比如 JBOSS、Web Logic 等)的 J2EE 上。
      54. </p>
      55. <h4 id="spring">Spring</h4>
      56. <p>Spring 框架是一个开源的 Java 平台,为快速开发功能强大的 Java 应用程序提供了完备的基础设施支持。
      57. </p>
      58. <p>Spring 框架最初是由 Rod Johnson 编写的,在 2003 年 6 月首次发布于 Apache 2.0 许可证下。
      59. </p>
      60. </div>
      61. </body>
      62. </html>

      调用方式


      通过data属性

      只需将data-spy="scroll"添加到被监听的页面元素上(大部分情况是添加到body上),然后将data-target=".navbar"添加到导航部分,仅此而已,顶部导航条就拥有了监听滚动的功能。你可能希望将滚动监听应用到.nav组件上。

      1. <body data-spy="scroll" data-target=".navbar">...</body>

      方法


      .scrollspy('refresh')

      当滚动监听所作用的DOM有增删页面元素的操作时,需要调用下面的refresh方法:

      1. $('[data-spy="scroll"]').each(function () {
      2. var $spy = $(this).scrollspy('refresh')
      3. });
      4. 参数


        可以通过 data 属性或 JavaScript 传递参数。对于 data 属性,其名称是将参数名附着到 data- 后面组成,例如 data-offset=""

        名称 类型 默认值 描述
        offset number 10 计算滚动位置时相对于顶部的偏移量(像素数)。
    2. 事件


      下表列出了滚动监听中要用到事件。

      事件 描述 实例
      activate.bs.scrollspy 每当一个新项目被滚动监听激活时,触发该事件。
      1. $('#myScrollspy').on('activate.bs.scrollspy', function () {
      2. // 执行一些动作...
      3. })
    3. 通过JavaScript

      通过JavaScript启动滚动监听:

      1. $('#navbar').scrollspy()

      注意! 必须为导航条中的链接指定相应的目标id。例如,<a href="#home">home</a>必须和dom中类似<div id="home"></div>的页面元素相呼应。

Bootstrap 中的插件的学习2(导航)的更多相关文章

  1. Bootstrap 中的插件的学习

    一个静态的模态窗口实例,如下面的实例所示: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 模态 ...

  2. Bootstrap中DropDown插件显示下拉列表,点击下拉列表区域,不会再自动关闭。

    目标: Bootstrap中DropDown插件显示下拉列表,点击下拉列表区域,不会再自动关闭. 参考:http://v3.bootcss.com/javascript/#dropdowns    / ...

  3. yii2.0使用bootstrap中日期插件

    Yii2框架引用bootstrap中日期插件yii2-date-picker的方法. 使用composer安装 日期插件 php composer.phar require "2amigos ...

  4. 12、Bootstrap中文文档(其它插件分享)

    给大家介绍一个前端框架让你从此写起前端代码与之先前相比如有神助般的效果拉就是Bootstrap. 本片导航: Bootstrap的下载 css样式的使用 JavaScript 效果的引用 其他前端插件 ...

  5. bootstrap基础学习【导航条、分页导航】(五)

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. 在angular项目中使用bootstrap的tooltip插件时,报错Property 'tooltip' does no t exist on type 'JQuery<HTMLElement>的解决方法和过程

    在angular4的项目中需要使用bootstrap的tooltip插件. 1. 使用命令安装jQuery和bootstrap npm install bootstrap jquery --save ...

  7. Vue学习之--------Vue中自定义插件(2022/8/1)

    文章目录 1.插件的基本介绍 2.实际应用 2.1 目录结构 2.2 代码实例 2.2.1 学校组件(School.vue) 2.2.2 学生组件(Student.vue) 2.2.3 定义的插件 2 ...

  8. 57、Bootstrap中文文档

    给大家介绍一个前端框架让你从此写起前端代码与之先前相比如有神助般的效果拉就是Bootstrap. 一.Bootstrap的下载 Bootstrap,由Twitter的设计师Mark Otto和Jaco ...

  9. [Bootstrap]7天深入Bootstrap(5)JavaScript插件

    在bs3.X中,提供了12种JavaScript插件,分别是:动画过渡(Transition).模态弹窗(Modal).下拉菜单(Dropdown).滚动侦测(Scrollspy).选项卡(Tab). ...

随机推荐

  1. 【BZOJ】1625: [Usaco2007 Dec]宝石手镯(01背包)

    http://www.lydsy.com/JudgeOnline/problem.php?id=1625 太水了. #include <cstdio> #include <cstri ...

  2. 【BZOJ】1682: [Usaco2005 Mar]Out of Hay 干草危机(kruskal)

    http://www.lydsy.com/JudgeOnline/problem.php?id=1682 最小生成树裸题.. #include <cstdio> #include < ...

  3. hdu 2105:The Center of Gravity(计算几何,求三角形重心)

    The Center of Gravity Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Ot ...

  4. MyBitis(iBitis)系列随笔之四:多表(多对一查询操作)

      前面几篇博客介绍的都是单表映射的一些操作,然而在我们的实际项目中往往是用到多表映射.至于多表映射的关键要用到mybitis的association来加以实现.          这篇介绍的是多表中 ...

  5. mysql更改utf8编码方式

    方法1: 一.查看数据库编码格式 1 mysql> show variables like 'character_set_database'; 二.查看数据表的编码格式 1 mysql> ...

  6. 提高ASP.NET网站性能的方法

    http://www.360doc.com/content/14/0705/18/7662927_392224856.shtml   Asp.NET有许多秘密,当你了解了这些秘密后,可以使得你的ASP ...

  7. 应用开发之Asp.net

    本章简言 上一章中笔者讲到关于Linq和EF的用法.并以hibernate来进行讲解.那么本章笔者来讲一下C#的Asp.Net.即是在B/S模式下开发.现在企业大部分的业务都是面向B/S模式的.所以对 ...

  8. 《C++ Primer Plus》第5章 循环和关系表达式 学习笔记

    C++提供了3种循环: for 循环. while 循环 和 do while 循环 .如果循环测试条件为 true 或非零,则循环将重复执行一组指令: 如果测试条件为 false 或 0 , 则结束 ...

  9. 《Shiro框架》shiro学习中报错解决方法

    [1] 最近在学习shiro,在学习过程中出现了一个问题,报错如下: org.apache.shiro.UnavailableSecurityManagerException: No Security ...

  10. 『AngularJS』一点小小的理解

    AngularJS 是一个前端的以Javascript为主的MVC框架.与AngularJS相类似的还有EmberJS. 随着时代在进步,各种各样的开发理念与开发框架不断的提出与发展,而就目前来说,除 ...