bootstrap插件使用
首先,针对导航栏(单页面导航插件(缓慢跳转))
引入插件:jquery.singlePageNav.min.js 下载链接:http://pan.baidu.com/s/1jHBaQxg 密码:42a3
为了实现缓慢跳转需要使用的方法为:.singlePageNav(option); option:为相对于导航的偏移量(向上偏移量),使用对象键值对{offset:70} 该方法为局部方法即针对导航的nav标签的nav类
示例代码:
$(function () {
$(".nav").singlePageNav({
offset:,
});
若有小屏幕导航菜单示例代码为:
$(".navbar-collapse a").click(function () {
$(".navbar-collapse").collapse("hide");//折叠隐藏
});
然后,插件效果的使用
第一步,引用插件
(1)wow.min.js
(2)animate.css
第二步,需要动画插件初始化
new WOW().init();//动画插件初始化
第三步,分析页面上需要使用效果的地方,然后在节点上添加wow+animate方法即可。animate方法通过链接http://daneden.github.io/animate.css/查找。
bootstrap插件使用的更多相关文章
- Bootstrap插件的使用
昨天,我偶然间发现了它——BootStrap插件,它是一一套功能强大的前端组件.说起来,我跟这插件还真算得上有缘,我本来并不是去找这个插件的,我本来是找BootStarp Paginator这个分页插 ...
- bootstrap插件学习-bootstrap.dropdown.js
bootstrap插件学习-bootstrap.dropdown.js 先看bootstrap.dropdown.js的结构 var toggle = '[data-toggle="drop ...
- bootstrap插件学习-bootstrap.modal.js
bootstrap插件学习-bootstrap.modal.js 先从bootstrap.modal.js的结构看起. function($){ var Modal = function(){} // ...
- Bootstrap -- 插件: 按钮状态、折叠样式、轮播样式
Bootstrap -- 插件: 按钮状态.折叠样式.轮播样式 1. 按钮(Button)插件:可以添加进一些交互,比如控制按钮状态. 如需向按钮添加加载状态,只需要简单地向 button 元素添加 ...
- Bootstrap -- 插件: 提示工具、弹出框、 警告框消息
Bootstrap -- 插件: 提示工具.弹出框. 警告框消息 1. 提示工具(Tooltip)插件:根据需求生成内容和标记. 使用提示工具: <!DOCTYPE html> <h ...
- Bootstrap -- 插件: 模态框、滚动监听、标签页
Bootstrap -- 插件: 模态框.滚动监听.标签页 1. 模态框(Modal): 覆盖在父窗体上的子窗体. 使用模态框: <!DOCTYPE html> <html> ...
- BootStrap插件
站点引用 Bootstrap 插件的方式有两种: 单独引用:使用 Bootstrap 的个别的 *.js 文件.一些插件和 CSS 组件依赖于其他插件.如果您单独引用插件,请先确保弄清这些插件之间的依 ...
- 使用Ajax+jQuery来实现前端收到的数据在console上显示+简单的主页设计与bootstrap插件实现图片轮播
1.实现前端输入的数据在console上显示 上一篇是解决了在前端的输入信息在cygwin上显示,这次要给前台们能看见的数据,因为数据库里插入的数据少,所以写的语句翻来覆去就那几个词,emmm···当 ...
- Bootstrap插件概述
前面的话 Bootstrap除了包含丰富的Web组件之外,如下拉菜单.按钮组.导航.分页等,还包括一些JavaScript的插件.插件为 Bootstrap 的组件赋予了“生命”.Bootstrap的 ...
- js插件---bootstrap插件daterangepicker是什么
js插件---bootstrap插件daterangepicker是什么 一.总结 一句话总结:日期段选择插件,也可选择日期 日期段选择插件,也可选择日期 1.daterangepicker 控件如何 ...
随机推荐
- 聊聊数据库~5.SQL运维上篇
1.6.SQL运维篇 运维这块逆天只能说够用,并不能说擅长,所以这篇就当抛砖之用,欢迎补充和纠错 PS:再说明下CentOS优化策略这部分的内容来源:首先这块逆天不是很擅长,所以主要是参考网上的DBA ...
- Computer Vision: Algorithms and ApplicationsのImage processing
实在是太喜欢Richard Szeliski的这本书了.每一章节(after chapter3)都详述了该研究方向比較新的成果.还有很多很多的reference,假设你感兴趣.全然能够看那些參考论文 ...
- READ_TEXT
[转自http://lz357502668.blog.163.com/blog/static/1649674320109119101907/]这里,定义ITAB内表来存储长文本,并放到内表ITAB_E ...
- GCC 常用选项详解
参考gcc man page 参考:http://www.cppblog.com/seman/archive/2005/11/30/1440.html gcc and g++分别是gnu的c & ...
- RLearning第1弹:初识R语言
R作为一种统计分析软件,是集统计分析与图形显示于一体的.体积小.开源.很强的互动性.自从学了R本人就很少再用matlab了... 一.R语言由函数和赋值构成. R使用<-(最好养成使用习惯),而 ...
- Data Structure Linked List: Function to check if a singly linked list is palindrome
http://www.geeksforgeeks.org/function-to-check-if-a-singly-linked-list-is-palindrome/ 这里的reverse可以re ...
- 剑指offer之 二叉搜索树的后续遍历序列
题目描述: 输入一个整数数组,判断该数组是不是某二叉搜索树的后序遍历的结果.如果是则输出Yes,否则输出No.假设输入的数组的任意两个数字都互不相同. public class Solution { ...
- 算法(Algorithms)第4版 练习 1.4.6
(1)sum = N + N/2 + N/4 + …… + 1 假设N是2的倍数(N = 2q),则sum = N -1 ~ N (2)sum = 1+2+……N/2 同(1)分析,sum = N/ ...
- jquery详解图片平滑滚动
jquery详解图片平滑滚动 随便写了个DOM,没有美观性,见谅 原理: 1.定义两组ul列表放图,第一个ul放5张图,第二个ul为空 2.为什么要用两个ul?因为要用到jQuery的克隆方法clon ...
- node Express安装和使用
1:在cmd命令行下执行npm install -g express,安装全局的express 2:进入需要创建项目的目录下执行express nodeExpressProject,创建express ...