Bootstrap7:插件【模态框、工具提示、标签页、滚动监听】

一、模态框

【概念】模态框经过了优化,更加灵活,以弹出对话框的形式出现,具有最小和最实用的功能集

使用模态框的弹窗组件需要三层div容器元素,分别是modal(模态声明层)、dialog(窗口声明层)、content(内容层)。在内容层里面,还有三层:header(头部)、body(主体)、footer(注脚)

1.1 基本实例

创建模态框(Modal)

1.2 模态框大小

1.3 淡入淡出

1.4 主体结合栅格系统

1.5 模态框的其他参数

1.5.1 使用data属性实现

1.5.2 使用js的方式实现

二、工具提示

【概念】工具提示就是通过鼠标移动选定在特定的元素上时,显示相关的提示语

提示工具(Tooltip)插件 - 锚

这是一个 默认的 Tooltip . 这是一个 左侧的 Tooltip . 这是一个 顶部的 Tooltip . 这是一个 底部的 Tooltip . 这是一个 右侧的 Tooltip

提示工具(Tooltip)插件 - 按钮

三、标签页

【概念】标签页也就是通常所说的选项卡功能【tab页】

3.1 使用data属性实现

3.2 使用js的方式实现

四、滚动监听

【概念】滚动监听插件是用来根据滚动条所处的位置自动更新导航栏目,显示导航栏目高亮显示,其依赖于Bootstrap的导航组件

--导航区域--
--内容区域--