Bootstrap JS 插件 互动版

插件概览
插件概览 data 属性 编程方式的 API 避免命名空间冲突 事件 过渡效果
模态框
模态框 modal.js 实例 尺寸 禁止动画效果 用法 参数 方法 事件
下拉菜单（Dropdown）插件
实例 用法 方法
滚动监听
导航条实例 用法 方法 参数 事件
标签页
实例 用法 淡入淡出效果 方法 事件
工具提示（Tooltip）插件
实例 用法 参数 方法 事件
弹出框
实例 用法 参数 方法 事件
警告框
实例 用法 方法 事件
按钮
加载状态 单个切换 复选框（Checkbox） 单选按钮（Radio） 方法
折叠（Collapse）插件
实例 可折叠的实例 用法 参数 方法 事件
轮播（Carousel）插件
实例 用法 参数 方法 事件
附加导航（Affix）插件
用法 通过 CSS 定位 参数
  1. 全部教程
  2. Bootstrap JS 插件
  3. Bootstrap JS 插件
  4. 用法
在线工具推荐： Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

调用方式

通过data属性

只需将data-spy="scroll"添加到被监听的页面元素上（大部分情况是添加到body上），然后将data-target=".navbar"添加到导航部分，仅此而已，顶部导航条就拥有了监听滚动的功能。你可能希望将滚动监听应用到.nav组件上。

<body data-spy="scroll" data-target=".navbar">...</body>

通过JavaScript

通过JavaScript启动滚动监听：

$('#navbar').scrollspy()

注意！ 必须为导航条中的链接指定相应的目标id。例如，home必须和dom中类似

的页面元素相呼应。

在线互动课程