当前位置: 首页 > 编程笔记 >

如何使用Bootstrap Scrollspy插件

范志勇
2023-03-14
本文向大家介绍如何使用Bootstrap Scrollspy插件,包括了如何使用Bootstrap Scrollspy插件的使用技巧和注意事项,需要的朋友参考一下

滚动间谍(自动更新导航)插件可让您根据滚动目标定位页面的各个部分

位置。在其基本实现中,滚动时,您可以根据以下内容将.active类添加到导航栏

滚动位置。

您可以尝试运行以下代码以在Bootstrap中实现scrollspy插件-

示例

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Example</title>
      <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet">
      <script src = "/scripts/jquery.min.js"></script>
      <script src = "/bootstrap/js/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">Toggle navigation</span>
               <span class = "icon-bar"></span>
               <span class = "icon-bar"></span>
               <span class = "icon-bar"></span>
            </button>
            <a class = "navbar-brand" href = "#">Tutorial Name</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>
                  </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 is a mobile operating system developed and distributed by Apple
            Inc. Originally released in 2007 for the iPhone, iPod Touch, and Apple
            TV. iOS is derived from OS X, with which it shares the Darwin
            foundation. iOS is Apple's mobile version of the OS X operating system
            used on Apple computers.</p>

         <h4 id = "svn">SVN</h4>
         <p>Apache Subversion which is often abbreviated as SVN, is a software
            versioning and revision control system distributed under an open source
            license. Subversion was created by CollabNet Inc. in 2000, but now it
            is developed as a project of the Apache Software Foundation, and as
            such is part of a rich community of developers and users.</p>

         <h4 id = "jmeter">jMeter</h4>
         <p>jMeter is an Open Source testing software. It is 100% pure Java
            application for load and performance testing.</p>

         <h4 id = "ejb">EJB</h4>
         <p>Enterprise Java Beans (EJB) is a development architecture for building
            highly scalable and robust enterprise level applications to be deployed
            on J2EE compliant Application Server such as JBOSS, Web Logic etc.</p>
      </div>
   </body>
</html>
 类似资料:
  • 我的目标是在angular2中应用jQuery插件。它可以是任何插件,如jQuery.DataTable,bootstrap-select等。 我做的是抓取的数据服务。爵士 这里的问题是时差。在第一步,我绑定数据,在第二步,我应用插件,但我认为绑定有点慢,所以插件的代码在实际绑定html呈现之前运行。这给我带来了问题。 示例代码如下: 请建议。

  • 问题内容: 我有一个带有2个下拉框的Wordpress网站。当我在第一个下拉框中选择一个选项时,我希望第二个选项被PHP函数中的数据刷新。为此,我需要ajax。但是我正在努力将Ajax绑定到Wordpress中。 HTML看起来像这样: 现在,例如,当用户选择“销售”时,我希望第二个选择标签重新加载来自PHP数组的匹配价格。 PHP函数如下所示: 我将jQuery Ajax调用保存在单独的.js文

  • 我想用gradle编译一个vertx项目。我想把它编译成一个独立的jar,我读到这可以通过gradle的shadow插件实现。 现在,我需要能够在离线环境中做到这一点。我下载了插件的源代码并将其编译成一个jar。现在,我想在我的项目中应用该jar中的插件build.gradle.我不知道如何做到这一点。 我知道这些答案,但似乎都不起作用。 目前,我有: 当我运行“gradle build”时,我得

  • 1.在自己网站需要调用的页面中用script引用cordova.js <script type="text/javascript" src="/cordova.js"></script> 注意:引用js,路径必须写/cordova.js。 2.在js中正确使用cordova插件 以下代码以扫描二维码插件为例: <script type="text/javascript"> var dev

  • 问题内容: 当我尝试使用此查询时,我收到一条错误消息,指出Perameter电子邮件不存在,我确定变量:email,login_pass,payment_method,operateur是有效的并且存在。 我尝试删除引号,但我得到了 您的Sql语法有错误,请在第1行的’:email,:login_pass,:payment_method,:avecpuce)’附近查看与您的SQL Server对应

  • 问题内容: 我正在使用此代码,而我感到无奈: 它们全部失败并抛出此错误: 致命错误 :无法在/ opt / …中通过引用传递参数2 问题答案: 我只是在学习PDO,但我认为您需要使用,而不是 接受要引用的变量,并且在调用时不提取值。我在对php文档的评论中发现了这一点: 编辑:PS您可能会想这样做,但是它并不适合所有人(感谢您将Shaver进行举报。)