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 控件如何 ...
随机推荐
- Android LockScreen (锁屏弹窗)
在要弹窗的Activity需要进行以下设置,才可以在锁屏状态下弹窗 @Override protected void onCreate(Bundle savedInstanceState) { fin ...
- python3里面的图片处理库 pillow
在python2下用pil,而在python3下可以安装pillow 功能,在图片上加上几个字 #coding: utf-8 myPath = "./" fontPath = &q ...
- 改善程序与设计的55个具体做法 day5
条款12:复制对象时勿忘其每一个成分 这里的复制是拷贝构造和operator= 每一个成分有几个维度: 1.每个成员变量 这个很好理解,添加新的成员时也要记得为每个新添加的成员执行合适的复制操作 2. ...
- 【leetcode刷题笔记】Distinct Subsequences
Given a string S and a string T, count the number of distinct subsequences of T in S. A subsequence ...
- poj 1419Graph Coloring 【dfs+补图+计算最大团+计算最大独立集 【模板】】
题目地址:http://poj.org/problem?id=1419 Graph Coloring Time Limit: 1000MS Memory Limit: 10000K Total S ...
- Shiro-自定义realm
Shiro自定义 realm package com.zhen.realm; import org.apache.shiro.authc.AuthenticationException; import ...
- 针对firefox ie6 ie7 ie8的css样式中的line-height属性
针对firefox ie6 ie7 ie8的css样式中的line-height属性 以前我们大部分都是用!important来hack,对于ie6和firefox测试可以正常显示,但是ie7以上对! ...
- HTML5坦克大战1
在JavaScript中,不要在变量为定义之前去使用,这样很难察觉并且无法运行. 颜色不对. 当我的坦克移动时,敌人坦克消失. tankGame3.html <!DOCTYPE html> ...
- vps 虚拟机 云服务器
vps :wxmp 03服务器 虚拟主机: 万网免费主机 云服务器:wxmp阿里云
- Delphi 读取 c# webservice XML的base64编码图片字符串转化图片并显示
Delphi 读取 c# webservice XML的base64编码图片字符串转化图片并显示 在 开发中遇到应用c#及asp.net的在的webservice 保存图片并以xml文件形式现实出来 ...