关于Bootstrap的插件ScrollSpy

今天没啥事做,就看看别人做的网站,发现自己有很多的不足。看下JS发现很多都不懂,或者以前懂的现在忘记了。现在要一点一点的拾起来了。

今天看的时候看到了scrollspy的方法,除了scroll是滚动的意思其余的我就不知道了。

$(‘body‘).scrollspy({

target: ‘.nav-menu‘,

offset: 95

})

.scrollspy 滚动监听。

target: ‘.nav-menu‘ 为监听的对象

offset: 95 从顶部向下移动95个像素

一般 offset属性很少用到,scroll还有一个更简单的用法

<body data-spy="scroll" data-target=".nav-menu">

这种方法用的更多也更简单。

时间: 2024-08-02 10:56:16

关于Bootstrap的插件ScrollSpy的相关文章

使用bootstrap的插件实现模态框效果方法步骤详解

本文和大家分享的主要是使用bootstrap 库的模态框插件 modal.js 来实现模态框效果相关内容,同时也使大家进一步熟悉 bootstrap 的插件使用,一起来看看吧,希望对大家学习bootstrap有所帮助. 一. bootstrap 的 js 插件的简单介绍 1.引入 我们在使用 bootstrap 库时,引入的文件 bootstrap.js 或者 bootstrap.min.js 就是 bootstrap的插件文件,这两种文件都集成了 bootstrap 的所有插件,区别在于 *.

使用bootstrap的插件实现模态框效果

在上一篇文章中,我们使用 js+css 实现了模态框效果,在理解了模态框的基本实现方法和实现效果后,我们就要寻找更快捷的方法,又快又好的来完成模态框开发需求,从而节约时间,提高效率.一个好的轮子,不仅能大幅减轻工作量,而且能让我们的代码更简明和优雅. 今天我们选择使用著名的 bootstrap 库的模态框插件 modal.js 来实现模态框效果,同时也使大家进一步熟悉 bootstrap 的插件使用. 一. bootstrap 的 js 插件的简单介绍 1.引入 我们在使用 bootstrap

Bootstrap按钮插件

前面的话 按钮插件提供了一组可以控制按钮多种状态的功能,比如按钮的禁用状态.正在加载状态.正常状态等.本文将详细介绍Bootstrap按钮插件 加载状态 通过按钮可以设计状态提示,当单击按钮时,会显示loading状态信息.例如,点击"加载"按钮,会触发按钮的加载的状态 通过添加 data-loading-text="Loading..." 可以为按钮设置正在加载的状态,但从 v3.3.5 版本开始,此特性不再建议使用,并且已经在 v4 版本中删除了 [注意]如果不

bootstrap时间插件 火狐不显示 完美解决方法

原文链接:http://www.phpbiji.cn/article/index/id/141/cid/4.html bootstrap时间插件火狐 bootstrap-datetimepicker火狐 不管用 不显示:解决方案:     在项目开发中用到了bootstrap-datetimepicker的时间插件,但是在火狐下却不能使用,在网上找到的方法什么外层模态框去掉tabindex="-1" role="dialog"属性,不管用的!!或许仅仅只是适用于他的

BootStrap iCheck插件全选与获取value值的解决方法

这篇文章主要介绍了BootStrap iCheck插件全选与获取value值的解决方法,解决方法其实很简单,下面小编给大家分享下这方面的知识 在使用jQuery iCheck 插件的时候遇到了一个问题,就是当我们使用普通的js全选功能无效了. $("#checkall").click( function(){ if(this.checked){ $("input[name='checkname']").each(function(){this.checked=tru

结合bootstrap fileinput插件和Bootstrap-table表格插件,实现文件上传、预览、提交的导入Excel数据操作流程

1.bootstrap-fileinpu的简单介绍 在前面的随笔,我介绍了Bootstrap-table表格插件的具体项目应用过程,本篇随笔介绍另外一个Bootstrap FieInput插件的使用,整合两者可以实现我们常规的Web数据导入操作,导入数据操作过程包括有上传文件,预览数据,选择并提交记录等一系列操作. 关于这个插件,我在早期随笔<Bootstrap文件上传插件File Input的使用>也做了一次介绍,这是一个增强的 HTML5 文件输入控件,是一个 Bootstrap 3.x

bootstrap/jQuery插件

基础组件:jquery,bootstrap.css,bootstrap.js 插件: 下拉框bootstrap-select 富文本编辑器summernote(jQuery) 输入校验bootstrapValidator 客户端模板mustache 翻页jquery.twbsPagination(jQuery) 页签  tab.js(包含在bootstrap.js里) css <link href="../../Content/bootstrap.css" rel="s

30 个惊艳的 Bootstrap 扩展插件

Bootstrap 是快速开发Web应用程序的前端工具包.它是一个CSS和HTML的集合,它使用了最新的浏览器技术,给你的Web开发提供了时尚的版式,表单,buttons,表格,网格系统等等. Bootstrap 的使用越来越广泛,而且越来越多为 Bootstrap 开发各种扩展和插件来增强 Bootstrap 的功能.本文介绍 30 个很棒的 Bootstrap 的扩展,希望你能喜欢. Bootstrap Maxlength Bootbox.js Bootbox.js 是一个小型的 JavaS

Bootstrap分页插件ajax返回数据,工具类的编写

使用Bootstrap分页插件时,需要返回指定的参数,这样Bootstrap才能够识别 需要引入的css: <!-- boostrap table --> <link href="css/bootstrap-table.min.css" rel="stylesheet" /> 需要引入的js: 1 <!-- boostrap table --> 2 <script type="text/javascript&quo