位置: 编程技术 - 正文

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)

  • 五险一金代缴费
  • 车辆租赁费发票备注栏怎么写
  • 异地预缴的企业所得税可以抵扣吗
  • 资源税类包括哪些税种
  • 小规模转一般纳税人需要什么条件
  • 税款滞纳金计入成本费用还是营业外
  • 分公司以前年度能弥补亏损吗
  • 行政单位其他收入包括哪些
  • 临时营业执照有效期多久
  • 报损失怎么报
  • 留样检测的产品计入什么科目?
  • 固定资产抵扣新政策2022
  • 收到社会保险基金管理局转来的失业保险金,社保代发
  • 何为独立核算
  • 劳务发票未收到做账
  • 出差补贴是否缴纳个人所得税 北京
  • 改扩建要计提折旧吗
  • 小规模附加税减免政策2023
  • 加计抵减什么时候做账务处理
  • 银行端查询缴税凭证在哪里缴费
  • 与军队发生业务应该取得哪种发票?
  • 国有资产拍买网
  • 电子发票服务平台诺诺发票官网
  • 现金流量表的编制原则为( ),是( )的概念
  • mac系统小技巧
  • linux CentOS WEB服务器分区方案
  • 留存收益在哪里可以查到
  • 重置组策略命令
  • linux中gzip的用法
  • php获取指定日期的时间戳
  • 怎么登明细分类账
  • 资产收购的账务处理
  • config.cfg是什么文件
  • css禁用button按钮
  • 材料明细账的登记范本手写
  • 预测编码方式
  • 民非企业保险支出包括
  • 浅水滩怎么样
  • 房产税为什么会退税
  • 资产负债表应收账款怎么计算
  • 收到政府扶持资金
  • 收到工程款怎么做凭证
  • 支出在记账凭证里怎么填
  • 公司组织员工旅游费可以在税前扣除吗
  • 可供出售金融资产是流动资产吗
  • 不抵扣的发票需要认证吗
  • python中myqr的用法
  • mysql5.7免安装版
  • python命令行进度条
  • 营业外收入汇算清缴时需要调增吗
  • 国外差旅费怎么入账
  • sql2008数据库维护计划
  • 企业计提五险一金会计分录怎么写
  • 平行结转分步法各步骤的费用
  • 有限合伙企业中有限合伙人承担责任的方式为
  • 创投收入
  • 开具红字发票后所冲销的销项税应该怎么处理?
  • 疫情防控免税政策
  • 减免的残保金怎么做分录
  • 河道工程修建维护管理费何时开始停征?
  • 收到劳务费发票如何申报个税
  • 小规模纳税人从三万到十万
  • 股东的义务是什么意思?
  • 销售如果对待不同客户
  • 开业建账到年末怎么做账
  • mysql的自动增长怎么表示的?
  • win8键盘f1到f12取消按fn
  • freebsd源代码开放?
  • window10运行框
  • windows7 停止服务
  • ie11打不开闪退解决办法win 7
  • 怎样解决windows照片查看器无法显示此图片
  • node.js入门教程
  • 网页制作范例
  • jquery时间戳转换日期格式
  • jquery删除table行
  • 自然人扣缴端重置密码操作流程
  • 房租收入影响个人所得税汇算
  • 哪个部门负责药品检验
  • 银行前置利息什么意思
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设