zoukankan      html  css  js  c++  java

  • Bootstrap 中的插件的学习2(导航)

    实例

    在导航栏内

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

    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>
    23. 代码： 
      <!DOCTYPE HTML>
<html>
<head>
<link href="/stylesheets/bootstrap.min.css" rel="stylesheet" >
<script src="/scripts/jquery.min.js"></script>
<script src="/scripts/bootstrap.min.js"></script>
 </head>
<body>
<nav class="navbar navbar-default" role="navigation">
   <div class="navbar-header">
      <a class="navbar-brand" href="javascripts:void(0);">AAA</a>
   </div>
   <div>
      <ul class="nav navbar-nav">
         <li class="active"><a href="javascripts:void(0);">iOS</a></li>
         <li><a href="javascripts:void(0);">SVN</a></li>
         <li class="dropdown">
            <a href="javascripts:void(0);" class="dropdown-toggle" data-toggle="dropdown">
               Java
               <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
               <li><a href="javascripts:void(0);">jmeter</a></li>
               <li><a href="javascripts:void(0);">EJB</a></li>
               <li><a href="javascripts:void(0);">Jasper Report</a></li>
               <li class="divider"></li>
               <li><a href="javascripts:void(0);">分离的链接</a></li>
               <li class="divider"></li>
               <li><a href="javascripts:void(0);">另一个分离的链接</a></li>
            </ul>
         </li>
      </ul>
   </div>
</nav>
<p>带有下拉菜单的标签页</p>
<ul class="nav nav-tabs">
   <li class="active"><a href="javascripts:void(0);">Home</a></li>
   <li><a href="javascripts:void(0);">SVN</a></li>
   <li><a href="javascripts:void(0);">iOS</a></li>
   <li><a href="javascripts:void(0);">VB.Net</a></li>
   <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="javascripts:void(0);">
         Java <span class="caret"></span>
      </a>
      <ul class="dropdown-menu">
         <li><a href="javascripts:void(0);">Swing</a></li>
         <li><a href="javascripts:void(0);">jMeter</a></li>
         <li><a href="javascripts:void(0);">EJB</a></li>
         <li class="divider"></li>
         <li><a href="javascripts:void(0);">分离的链接</a></li>
      </ul>
   </li>
   <li><a href="javascripts:void(0);">PHP</a></li>
</ul>
</body>
</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.  
      6. <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
      7. ...
      8. </ul>
      9. </div>

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

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

        方法

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

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

        导航条实例

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

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

        <!DOCTYPE HTML>
<html>
<head>
<link href="/stylesheets/bootstrap.min.css" rel="stylesheet" > 
<script src="/scripts/jquery.min.js"></script>
<script src="/scripts/bootstrap.min.js"></script>
 </head>
<body>
<nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation">
   <div class="navbar-header">
      <button class="navbar-toggle" type="button" data-toggle="collapse" 
         data-target=".bs-js-navbar-scrollspy">
         <span class="sr-only">切换导航</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">教程名称</a>
   </div>
   <div class="collapse navbar-collapse bs-js-navbar-scrollspy">
      <ul class="nav navbar-nav">
         <li><a href="#ios">iOS</a></li>
         <li><a href="#svn">SVN</a></li>
         <li class="dropdown">
            <a href="#" id="navbarDrop1" class="dropdown-toggle" 
               data-toggle="dropdown">Java
               <b class="caret"></b>
            </a>
            <ul class="dropdown-menu" role="menu" 
               aria-labelledby="navbarDrop1">
               <li><a href="#jmeter" tabindex="-1">jmeter</a></li>
               <li><a href="#ejb" tabindex="-1">ejb</a></li>
               <li class="divider"></li>
               <li><a href="#spring" tabindex="-1">spring</a></li>
            </ul>
         </li>
      </ul>
   </div>
</nav>
<div data-spy="scroll" data-target="#navbar-example" data-offset="0" 
   style="height:200px;overflow:auto; position: relative;">
   <h4 id="ios">iOS</h4>
   <p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple 
      TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。
   </p>
   <h4 id="svn">SVN</h4>
   <p>Apache Subversion，通常缩写为 SVN，是一款开源的版本控制系统软件。Subversion 由 CollabNet 公司在 2000 年创建。但是现在它已经发展为 Apache Software Foundation 的一个项目，因此拥有丰富的开发人员和用户社区。
   </p>
   <h4 id="jmeter">jMeter</h4>
   <p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。
   </p>
   <h4 id="ejb">EJB</h4>
   <p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。
   </p>
   <h4 id="spring">Spring</h4>
   <p>Spring 框架是一个开源的 Java 平台，为快速开发功能强大的 Java 应用程序提供了完备的基础设施支持。
   </p>
   <p>Spring 框架最初是由 Rod Johnson 编写的，在 2003 年 6 月首次发布于 Apache 2.0 许可证下。
   </p>
</div>
</body>
</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. })

      4. 通过JavaScript

        通过JavaScript启动滚动监听：

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

        注意！ 必须为导航条中的链接指定相应的目标id。例如，<a href="#home">home</a>必须和dom中类似<div id="home"></div>的页面元素相呼应。
  • 相关阅读:
    快速搭建一个本地的FTP服务器
    Node.js安装及环境配置之Windows篇
    在win10上安装oracle10g
    win10安装oracle11g客户端
    解决：Java source1.6不支持diamond运算符,请使用source 7或更高版本以启用diamond运算符
    idea 右侧 无 meven 菜单
    idea导入maven项目不能识别pom.xml文件解决办法
    PostgresSQL客户端pgAdmin4使用
    PostgreSQL 创建数据库
    PostgreSQL 数据类型
  • 原文地址：https://www.cnblogs.com/airycode/p/5489948.html
Copyright © 2011-2022 走看看