位置: 编程技术 - 正文

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)

  • 增值税专用发票怎么开
  • 原材料暂估入库怎么做账
  • 装修工程一切险
  • 企业清算的资产包括
  • 职工福利费专票账务处理
  • 附加税减半征收政策从什么时候开始
  • 外购无形资产的相关税费包括增值税吗
  • 行政事业单位凭证培训课件
  • 汇算清缴跨年发票
  • 生产企业外购商品经过加工
  • 对方收到发票不付款怎么办
  • 附加税的计提基数怎么算
  • 一般纳税人施工费税率是多少
  • 取得稳岗补贴后怎么办
  • 关联申报不报有影响吗
  • 用友软件报表公式
  • 数量和单价的乘积
  • 总分机构怎么纳税
  • 产品核算会计业务流程
  • 药品推广服务费怎么开票
  • php模板引擎语法
  • 交接目录excel
  • 单位人工成本计算公式
  • 财务费用核算的内容没有
  • php add
  • php加载mysql
  • 税率变更为13%的文件
  • framework怎么更新
  • html5旅游网页设计
  • vue项目首屏加载过慢
  • yolo训练参数
  • 固定资金的概念及其特点
  • 虚开增值税发票不是也要缴税吗
  • 帝国cms使用手册
  • 定期存款一次性可以存多少钱
  • phpcms v9网页禁止复制
  • phpcms使用教程
  • php环境配置教程
  • 用vue做的企业项目
  • 餐饮业税务申报
  • sql dbo
  • 应计入应付款项的科目
  • 一般纳税人应如何报税
  • 代扣代缴增值税要交附加税吗
  • 金税盘发票二维码怎么生成
  • 商品互换定义
  • 收到国税退回的税款分录
  • 预付款项怎么做分录
  • 个人所得税代扣代缴手续费
  • 预付账款的账务处理过程
  • 认证系统维护费可以全额抵扣吗
  • 存货跌价准备怎么结转成本
  • 服务器文件夹共享分组
  • qq windows
  • win7怎样安装摄像头驱动
  • win8.1官方
  • xp window
  • linux系统中的用户分为哪几类
  • fedora系统怎么安装
  • repair.exe是什么软件
  • win10选择一个选项
  • win7系统重装后没声音
  • win10dll丢失
  • linux安装fping
  • win8系统怎样
  • excel乱码怎么转换
  • 用linux搭建服务器
  • node管理工具
  • Android游戏开发pdf
  • uiview继承哪个类
  • unity音频导入设置
  • 值得收藏的十大收录机
  • javascript数据
  • jquery获取滚动条位置
  • javascript in
  • mongoose python
  • android打包v1v2
  • 深圳税务网上服务大厅官网
  • 智利有什么自然景观
  • 成都市地方税务局官网
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设