位置: 编程技术 - 正文

Bootstrap每天必学之附加导航(Affix)插件(bootstrap入门)

编辑:rootadmin

推荐整理分享Bootstrap每天必学之附加导航(Affix)插件(bootstrap入门),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:bootstrap基础教程,bootstrap要学多久,bootstrap快速入门,bootstrap要学多久,bootstrap入门,bootstrap要学到什么程度,bootstrap基础教程,bootstrap要学到什么程度,内容如对您有帮助,希望把文章链接给更多的朋友!

附加导航(Affix)插件允许某个 <div> 固定在页面的某个位置。您也可以在打开或关闭使用该插件之间进行切换。一个常见的例子是社交图标。它们将在某个位置开始,但当页面点击某个标记,该 <div> 会锁定在某个位置,不会随着页面其他部分一起滚动。如果您想要单独引用该插件的功能,那么您需要引用 affix.js。

一、用法

可以通过 data 属性或者通过 JavaScript 来使用附加导航(Affix)插件。1、通过 data 属性:如需向元素添加附加导航(Affix)行为,只需要向需要监听的元素添加 data-spy="affix" 即可。请使用偏移来定义何时切换元素的锁定和移动。2、通过 JavaScript:您可以通过 JavaScript 手动为某个元素添加附加导航(Affix)

二、通过 CSS 定位

在上面两种使用附加导航(Affix)插件的方式中,您都必须通过 CSS 定位内容。附加导航(Affix)插件在三种 class 之间切换,每种 class 都呈现了特定的状态: .affix、.affix-top 和 .affix-bottom。请按照下面的步骤,来为这三种状态设置您自己的 CSS(不依赖此插件)。1、在开始时,插件添加 .affix-top 来指示元素在它的最顶端位置。这个时候不需要任何的 CSS 定位。2、当滚动经过添加了附加导航(Affix)的元素时,应触发实际的附加导航(Affix)。此时 .affix 会替代 .affix-top,同时设置 position: fixed;(由 Bootstrap 的 CSS 代码提供)。3、如果定义了底部偏移,当滚动到达该位置时,应把 .affix 替换为 .affix-bottom。由于偏移是可选的,假如设置了该偏移,则要求同时设置适当的 CSS。在这种情况下,请在必要的时候添加 position: absolute;。

三、选项

有一些选项是通过 data 属性或 JavaScript 来传递的。下表列出了这些选项:

Bootstrap每天必学之附加导航(Affix)插件(bootstrap入门)

四、实例附加导航即粘贴在屏幕某处实现锚点功能。1、基本实例

2、导航的 CSS 部分

我们默认使用的是 top,当然也可以默认居底 bottom。这个定位方式是直接通过 CSS定位的。

Affix 包含几个事件,如下:

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程

标签: bootstrap入门

本文链接地址:https://www.jiuchutong.com/biancheng/373514.html 转载请保留说明!

上一篇:Bootstrap项目实战之子栏目资讯内容(bootstrap范例)

下一篇:第十章之巨幕页头缩略图与警告框组件(巨幕prime)

  • 所得税季度预缴纳税申报表
  • 实际发生的坏账准备可以税前扣除吗
  • 一般纳税人附加税优惠政策2023
  • 缴纳个税会计分录是什么
  • 个税计算方法和规定
  • 出口发票开错了如何处理
  • 非员工私车公用怎么进行账务处理
  • 分公司撤销跨区域转固定资产到总公司
  • 出口合同包括哪些条款
  • 减免增值税款怎么算
  • 文化建设税是含税价吗
  • 为什么社保账户有钱但是卡里没钱
  • 红字发票没有地址和银行信息跨月了无法作废
  • 私募基金超募如何购买
  • 现金管理规定有哪些主要内容
  • 销售退回 账务处理
  • 农产品加计扣除政策2023最新
  • 个人取得投资收益是否缴纳个税
  • 营改增后自产产品用于在建工程
  • 资产负债表日是什么意思
  • 六税两费减半征收政策2022
  • 支票能够拿来付款吗
  • 增值税抄税报税流程2021
  • 不动产广告位出租税率是多少
  • 结转出租设备的会计分录
  • 华为mate手机sim卡怎么插
  • 员工招待费会计分录
  • php类型判断
  • 高薪技术企业的有效期是几年
  • vue public assets
  • 增值税减免后按3%记提税款吗
  • 补发工资怎么做账
  • 米尔巴特之战
  • 约克大教堂是基督教吗
  • 育空领地
  • 跨年度退货的账务处理
  • 杭州西湖古风
  • php常用命令
  • javascript手机版
  • html+css+javascript编程入门指南
  • cnpm安装成功为什么用不了
  • XF86Setup命令 设置XFee86
  • 银行存放中央银行准备金的会计处理
  • 命名空间 php
  • 收到劳务派遣发票可以抵扣吗
  • 普通发票作废要做账吗
  • 织梦cms要钱吗
  • 大数据sql教程
  • 收入不足3000
  • 机票的退票费可以开具发票吗
  • 诉讼期间的利息法院支不支持
  • 暂估入库的商品作暂估冲红会计分录
  • 国有资产划转实施方案
  • 印花税是如何计征的
  • 绩效工资定义及标准
  • 员工意外险的费用怎么算
  • 教育类退费
  • rpm方式安装samba软件
  • windows7开机黑屏安全模式也进不去
  • linux 的ll
  • linux系统汉化教程
  • unix系统复制命令
  • ubuntu独立显卡黑屏
  • 苹果电脑如何访问windows共享文件
  • macbookzen
  • windows10周年更新
  • perl $?
  • 查找重复字符串
  • codeblocks使用技巧
  • 如何旋转图片30度
  • unity射击游戏完整案例
  • android存储方式
  • 开量贩ktv一年能赚多少
  • 无锡税务app
  • 行政服务事项包含哪些
  • 西藏五个确保是什么?
  • 乾升黄酒好吗值得买吗
  • 地方公安局归谁管
  • 外贸高新技术企业认定
  • 2023个税税率及速算扣除数
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设