Bootstrap 附加导航(Affix)插件
附加导航(Affix)插件允许指定 <div> 固定在页面的某个位置。一个常见的例子是社交图标。它们将在某个位置开始,但当页面点击某个标记,该 <div> 会锁定在某个位置,不会随着页面其他部分一起滚动。
如果您想要单独引用该插件的功能,那么您需要引用 affix.js。或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js或压缩版的 bootstrap.min.js。
用法
您可以通过 data 属性或者通过 JavaScript 来使用附加导航(Affix)插件。
- 通过 data 属性:如需向元素添加附加导航(Affix)行为,只需要向需要监听的元素添加 data-spy="affix" 即可。请使用偏移来定义何时切换元素的锁定和移动。
Bootstrap 附加导航(Affix)插件的更多相关文章
- Bootstrap 附加导航(Affix)插件
bootstrap 附加导航(Affix)插件允许某个div元素固定到页面中的某个位置.您可以打开或关闭使用该插件之间进行切换 后续再写
- 第二百四十九节,Bootstrap附加导航插件
第二百四十九节,Bootstrap附加导航插件 学习要点: 1.附加导航插件 本节课我们主要学习一下 Bootstrap 中的附加导航插件 一.附加导航 注意:此插件要使用 bootstrap3.0. ...
- 使用附加导航(affix)实现内容切换
<!DOCTYPE html> <html> <head> <title> new document </title> <meta c ...
- bootstrap的 附加导航Affix导航 (侧边窄条式 滚动监控式导航) 附加导航使用3.
affix: 意思是粘附, 附着, 沾上. 因此, 附加导航就是 bootstrap的 Affix.js组件. bootstrap的 附加导航, 不是说导航分成主导航, 或者什么 副导航的 而是指, ...
- Bootstrap中的Affix插件
我们为什么要用bootstrap?因为懒!哦....不,是因为方便,呃...意思差不多. 今天来说说Affix这个插件,它可以使导航栏固定,免去了自己手写的麻烦,用着非常方便,废话不多说,下面是用法. ...
- 解决Bootstrap 附加导航(Affix)的问题和使用时若干注意事项
1.要清楚Affix分别赋予的class, 开始:affix-top 达到top参数:affix 达到bottom参数:affix-bottom 2.一定要自定义这些class,否则 插件会默认给你在 ...
- Bootstrap Affix(附加导航(Affix)插件的用法)
原文网址:http://www.runoob.com/bootstrap/bootstrap-affix-plugin.html Bootstrap 附加导航(Affix)插件 附加导航(Affix) ...
- Bootstrap-Plugin:附加导航(Affix)插件
ylbtech-Bootstrap-Plugin:附加导航(Affix)插件 1.返回顶部 1. Bootstrap 附加导航(Affix)插件 附加导航(Affix)插件允许某个 <div&g ...
- Bootstrap 学习笔记13 附加导航插件
附加导航代码: <style> a:focus { outline: none; } .nav-pills { width: 150px; } .nav-pills.affix { top ...
随机推荐
- CSS Sprite初探之原理、使用
CSS Sprite简介: 利用CSS Sprites能很好地减少了网页的http请求次数,从而大大的提高了页面的性能,节省时间和带宽.CSS Sprites在国内很多人叫css精灵, 是一种网页图片 ...
- autocad 2015 破解方法
下载 http://trial.autodesk.com/SWDLDNET4/2015/ACD/DLM/AutoCAD_2015_Simplified_Chinese_Win_64bit_dlm.sf ...
- linux更新grub内核启动参数的方法
#!/bin/bash set -x set -e export PS4=+{$LINENO:${FUNCNAME[0]}} trap 'echo "---NEWKERNARGS=$NEWK ...
- web前端Vue+Django rest framework 框架 生鲜电商项目实战✍✍✍
web前端Vue+Django rest framework 框架 生鲜电商项目实战 整个课程都看完了,这个课程的分享可以往下看,下面有链接,之前做java开发也做了一些年头,也分享下自己看这个视频 ...
- 【HDOJ】P2058 The sum problem
题意很简单就是给你一个N和M,让你求在1-N的那些个子序列的值等于M 首先暴力法不解释,简单超时 再仔细想一想可以想到因为1-N是一个等差数列,可以运用我们曾经学过的只是来解决 假设开始的位置为s,结 ...
- python_learn Ⅰ
基于 廖雪峰python3教程 学习. 目录: 01_输入输出.py 02_list.tuple.py 03_条件判断.py 04_循环.py 05_利用循环排序.py 06_自定义3元2次方程的根求 ...
- where I will go
为什么我选择了java? 作为一个0基础入门的编程小白,大一的时候我接触了C语言,写了我的第一个程序hello world,内心有点小骄傲(我也能编程了),那时候还不知道java是什么,然而实际公司的 ...
- nodejs jade 模板 引擎的使用方法
1.新建项目 2.使用模板引擎 app.set('view engine','jade'); 3.使用render渲染一个视图 res.render(用于指定需要被渲染的视图(必选),本地变量(可选) ...
- python异常整理
一.操作excel 时异常 1.PermissionError: [Errno 13] Permission denied (1)原因:权限错误:[Errno 13] 权限被拒绝 错误产生的原因是文件 ...
- Redis探索之路(二):Redis在linux下的安装
目前最新稳定版本为:2.4.17.tar.gz .redis-2.6.10.tar.gz wget http://redis.googlecode.com/files/redis-2.4.17.tar ...
如果您想要单独引用该插件的功能,那么您需要引用 affix.js。或者,正如