Bootstrap Scrollspy源码学习
本文实例为大家分享了Bootstrap Scrollspy插件的具体代码，供大家参考，具体内容如下
导航栏Scrollspy例子
<!-- The scrollable area --> <body data-spy="scroll" data-target=".navbar" data-offset="50"> <!-- The navbar - The <a> elements are used to jump to a section in the scrollable area --> <nav class="navbar navbar-inverse navbar-fixed-top"> ... <ul class="nav navbar-nav"> <li><a href="#section1" rel="external nofollow" rel="external nofollow" >Section 1</a></li> ... </nav> <!-- Section 1 --> <div id="section1"> <h1>Section 1</h1> <p>Try to scroll this page and look at the navigation bar while scrolling!</p> </div> ... </body>
垂直Scrollspy例子
<body data-spy="scroll" data-target="#myScrollspy" data-offset="20"> <div class="container"> <div class="row"> <nav class="col-sm-3" id="myScrollspy"> <ul class="nav nav-pills nav-stacked"> <li><a href="#section1" rel="external nofollow" rel="external nofollow" >Section 1</a></li> ... </ul> </nav> <div class="col-sm-9"> <div id="section1"> <h1>Section 1</h1> <p>Try to scroll this page and look at the navigation list while scrolling!</p> </div> ... </div> </div> </div> </body>
Scrollspy的使用
使用Scrollspy只需在对应的HTML元素里添加几个关键的属性：
- data-spy=”scroll”
添加到需要滚动的元素中，比如最常见的body元素，或者container。
- data-target=”selector”
添加到需要滚动的元素中，selector指示的是控制滚动的元素比如”.navbar”, “#myScrollspy”。
- <a href=”#section”>section</a>
在控制滚动的元素中用link链接到对应的位置。注意链接的id要跟对应位置元素的id相匹配。例如，<div id=”section1”>与<a href=”#seciton1”。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
MyBatis 本是 apache 的一个开源项目 iBatis，2010年这个项目由apache software foundation 迁移到了 google code，并且改名为MyBatis 。2013年11月迁移到 Github。
-
本文向大家介绍学习php开源项目的源码指南，包括了学习php开源项目的源码指南的使用技巧和注意事项，需要的朋友参考一下 一。先把源代码安装起来，结合它的文档和手册，熟悉其功能和它的应用方式。 二。浏览源代码的目录结构，了解各个目录的功能。 三。经过以上两步后相信你对这个开源的产品有了一个初步的了解了，那现在就开始分析它的源码吧。这一步我们开始分析源代码框架。例如入口方式是单入口还是多入口，页面之间
-
本文向大家介绍通过JDK源码学习InputStream详解，包括了通过JDK源码学习InputStream详解的使用技巧和注意事项，需要的朋友参考一下 概况 本文主要给大家介绍了通过JDK源码学习InputStream的相关内容，JDK 给我们提供了很多实用的输入流 xxxInputStream，而 InputStream 是所有字节输入流的抽象。包括 ByteArrayInputStream 、
-
本文向大家介绍angular源码学习第一篇 setupModuleLoader方法，包括了angular源码学习第一篇 setupModuleLoader方法的使用技巧和注意事项，需要的朋友参考一下 angular源码其实结构非常清晰，划分的有条有理的，大概就是这样子： 其实阅读angular源码重要的是angular的整个架构思路，至于服务过滤器和指令可以先抛开。 setupModuleLoad
-
Redux 文档旨在教授 Redux 的基本概念，并解释在实际应用程序中使用的关键概念。但是，文档无法涵盖所有内容。令人高兴的是，还有许多其他很好的资源可用于学习 Redux。我们鼓励你仔细查看一下。 其中许多内容涵盖了超出文档范围的主题 , 或以可能更适合您学习方式的方法阐述相同的内容。 此页面包含我们对可用于学习 Redux 的一些最佳外部资源的建议。有关 React，Redux，Javasc
-
学习资源 有很多社区资源可以帮助你开发应用。如果你对Meteor感兴趣，希望你能参与其中！ 教程 快速开始Meteor 官方教程! Stack Overflow 对于技术问题，提问、寻找答案最好的去处就是 Stack Overflow. 确保给你的问题添加 meteor 标签。 论坛 访问 Meteor discussion forums宣布项目，寻求帮助，讨论社区或是讨论核心模块的变动。 Git