位置: 编程技术 - 正文

Bootstrap每天必学之滚动监听(bootstrap要学吗)

编辑:rootadmin

推荐整理分享Bootstrap每天必学之滚动监听(bootstrap要学吗),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:bootstrap入门,bootstrap需要学多久,bootstrap快速入门,bootstrap要学多久,bootstrap怎么学,bootstrap快速入门,bootstrap入门,bootstrap学习,内容如对您有帮助,希望把文章链接给更多的朋友!

本文为大家介绍Bootstrap滚动监听,供大家学习,具体内容如下

1. Scrollspy currently requires the use of a Bootstrap nav component for proper highlighting of active links.

---- 使用滚动监听的话,导航栏必须采用 class="nav"的nav组件才可以:

下面是源代码中的一段,标红的部分可以证明这一点:

使用ScrollSpy的时候,需要采用<ul class="nav">标签,并且在<li>下必须有<a>标签。

注:另外我们需要把<ul class="nav">标签放到另一个容器内(如div),并给父容器添加一个id属性(这一点在第4节有介绍)

2. Navbar links must have resolvable id targets. For example, a <a href="#home">home</a> must correspond to something in the DOM like <div id="home"></div>.

--- 简单的说,就是<li>下的<a>标签必须有一个href="#id"属性,并且在滚动的内容里面,必须有对应的<a id="id"></a>这样的标签;当内容滚动到<a id="id">标签时,对应的<li>的<a href="#id">就会自动被选中。

--其实这一点做过Web开发的朋友都知道,在之前的HTML版本中,锚标记 通常采用<a name="tag">这样的方式,但HTML5中的锚标记已经抛弃了name属性,而是采用id属性

3. No matter the implementation method, scrollspy requires the use of position: relative; on the element you're spying on. In most cases this is the <body>. When scrollspying on elements other than the <body>, be sure to have a height set and overflow-y: scroll; applied.

--- 如果监听Body的滚动,那么你必须给body添加position:relative样式

Bootstrap每天必学之滚动监听(bootstrap要学吗)

--- 如果监听的不是Body,而是其他得元素[貌似这种方式常见],那么你需要添加三个样式:position:relative;height:px;overflow-y:scroll;

4. To easily add scrollspy behavior to your topbar navigation, add data-spy="scroll" to the element you want to spy on (most typically this would be the <body>). Then add the data-target attribute with the ID or class of the parent element of any Bootstrap .navcomponent.

--- 你需要给滚动内容的标签添加 data-spy="scroll"属性和data-target属性

data-spy 属性指明了被监听的元素,data-target属性指明滚动时需要控制的nav高亮显示

再看一次下面的初始化源代码,标红的位置,this.options.target的值,就等于滚动内容元素的data-target的值,看到这里,你或许已经想到,在定义.nav组件的时候,我们需要把.nav放在另一个容器内(比如div),且该容器需要有一个id属性(与这里data-target需要设置的值相同)。

5. After adding position: relative; in your CSS, call the scrollspy via JavaScript:

$('yourTag').scrollspy({ target: 'nav-parent-div-id' })-- yourTag 就是要承载滚动内容的元素的ID,nav-parent-div-id 就是.nav元素的父元素的id(也就是data-target的值)

乱七八糟写了一堆,下面总结一个简单的几个步骤:

  1. 添加标签<div id="scrollSpyID">

  2. 在标签内添加.nav组件,并给li->a添加href="#tag"属性

  3. 添加<div id="content" data-spy="scroll" data-target="#scrollSpyID">;

  4. 添加样式#content{height:px;overflow-y:scroll;opsition:relative;}

  5. 添加脚本$('#content').scrollspy({target:'scrollSpyID'});

最后来个小栗子:

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

标签: bootstrap要学吗

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

上一篇:Javascript的表单验证长度(js表单事件有哪些)

下一篇:js实现内容显示并使用json传输数据(js如何显示日期和时间)

  • 小微企业印花税怎么算
  • 高新技术生物企业是否可减按15%的税率纳税?
  • 销项税额计算公式依据
  • 发票上的收款人复核开票人
  • 当月的进项当月可以认证吗
  • 小微企业注册流程及费用微
  • 增值税超过起征点填入哪个表格
  • 工会经费计税基数包含支付职工的辞退福利
  • 内账应收应付算利润吗
  • 实收资本未认缴资本还用填写吗
  • 2018年出口总值
  • 单位装饰
  • 会议费增值税专用发票税率
  • 股权转让个人所得税会计分录
  • 分工分类法
  • 非居民企业啥意思
  • 服务型企业管理体系
  • 自建仓库转让如何计算增值税
  • 电子发票没有纳税人识别号可以报销吗
  • 因为质量问题
  • 单位购买短期保本理财产品如何做账?
  • bios如何恢复默认值
  • 玩游戏时切换窗口怎么弄
  • win10夜间模式怎么打开不了
  • 苹果手机miracast在哪里找到
  • 安全系统不起作用或未正确安装 cad2016
  • win11我的电脑不在桌面显示
  • 美元汇款怎么汇
  • 税款申报成功但没有缴款怎么办
  • 企业出租经营权是否征税
  • 把输入法关闭
  • linux系统备份整个硬盘的命令
  • 出租车发票没有发票专用章是否能报销
  • 没有实际出资的股东怎么退出
  • 投资利润率用什么表示
  • hotkey可以卸载吗
  • json格式字符串提取值
  • 城镇土地使用税的计算公式
  • 公司清算的补偿方案是不是应该公布了
  • vite报错
  • 抵债资产怎么入账
  • php加密后的代码能运行吗?
  • vue实现文件上传和下载
  • Sublime Text 4 (Build 4143) 注册方法STEP BY STEP
  • 城建税减半吗
  • 金融资产的会计科目
  • 固定资产入账是税前还是税后
  • mysql查询一列数据
  • 企业为职工支付的补充医疗保险费
  • 如何解决私账流失问题
  • 在异地施工就要在异地交税吗
  • 公司汽车维修
  • 中标单位支付代理费
  • 公司购买汽车的购置税可以抵税吗
  • 发票入账有效期是多长时间
  • 一般纳税人增值税优惠政策2023
  • sqlserver数据库和mysql区别
  • ubuntu 手动安装
  • win10怎么设置有线网络
  • shell中awk命令
  • thinkpad 8高配版
  • macbookpro屏幕显示
  • win7打印错误怎么解决
  • 带上Windows 8去旅行 让你的旅途更轻松
  • 如何在手机上直接买彩票
  • socket pf_inet
  • perl 排序
  • 表单失去焦点事件
  • 守护进程和普通进程
  • Ubuntu 16.04 LTS中源码安装Python 3.6.0的方法教程
  • python的垃圾处理机制
  • jquery过滤选择器按照过滤规则分类包括?
  • JavaScript onkeydown事件入门实例(键盘某个按键被按下)
  • wordpress基于什么语言
  • 电子税务局存款账户备案
  • 国家税务总局2012年20号公告
  • 税控盘连接服务器失败是什么原因黑盘发票无法上传
  • 纳税人被列入非正常户超过三个月的情况
  • 生产变压器有什么危害
  • 税务uk数据怎么导出来
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设