Popovers:提示信息

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

Popovers,是一种显示提示信息的方法 ..

我们可以在任何元素上使用 Popover 的方法显示提示信息 .. 这里我们可以添加一个 button ,上面加上 btn.btn-primary

按钮上的文字是 Pop ..

在元素上得添加一个 data-toggle ,设置成 popover ,提示内容的标题,放在 title 属性里面 .. . 一重山 ...

提示的主体内容可以放在 data-content 这个属性里面 ... 添加一段文字 ..

触发使用 Popover 显示提示信息,还得去配置一下 .. 打开自定义的脚本 .. 用 jquery 找到页面上所有的 data-toggle 属性的值是 popover 的元素 .. 在这些元素上用一下 Bootstrap 提供的 popover 这个方法 .. 这样会在元素上启用使用 Popover 显示提示信息 ..

点一下这个按钮 .. 会显示一个提示信息 ..

再按一下这个按钮可以隐藏它 ..

这个提示信息的显示位置默认是在元素的右边儿 ..

找到这个元素,我们可以使用 data-placement 去修改提示信息显示的内容 .. 可以是 left,right,top,还有 bottom ,这里我们把它设置成 bottom 再试一下 ..

默认显示提示信息以后,再按一下这个元素才能隐藏提示信息 .. 我们也可以设置成点击任何地方隐藏提示信息 .. 添加一个 data-trigger 设置成 focus ..

再去试一下 ..

点一下按钮,这次会在它的下边儿显示提示信息 .. 再点一下其它的地方 ...

可以隐藏提示信息 ..

Popovers:提示信息《 Bootstrap 4:界面组件 》

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点