跳转到主内容
websoft网络软件专家 - 深耕网络技术,打造实用软件!

Bootstrap中怎么使用提示工具?提示组件用法浅析

bootstrap 中怎么使用提示工具?下面本篇文章给大家介绍一下 bootstrap 5中弹出提示和工具提示组件的用法,希望对大家有所帮助! 这几要讲两个控件:弹出提示(Popovers)和工具提示(Tooltips),这两个组件功能都很单一,用法也很简单,有很多相似之处。【相关推荐:《 bootstrap教程 》】 弹出提示(Popovers) 1  示例 1.1  注意事项 使用popover插件时需要注意的事项: 它必须依靠bootstrap.bundle.min.js才能工作! 由于性能原因,popover是可选加入的,所以您必须自己初始化它们。 1.2  在任何地方启用弹出窗口 初始化页面上所有popover的一种方法是通过其data-bs-toggle属性选择它们:
Popovers




1.3  使用容器选项 当父元素上的某些样式干扰popover时,您需要指定一个自定义容器,以便popover的HTML显示在该元素中。这个和上面一个在显示上没什么区别,只是在button类中增加了一个example-popover。
Popovers




你也可以使用id,这样看起来似乎更好懂
Popovers




2 改变弹出方向 我们可以让弹出的提示信息在四个方向:顶部,右侧,底部,左侧。 使用也很简单,只需要将data-bs-placement="位置" 添加到button属性即可,其中位置可以是top、bottom、left、right。 需要注意的是,要显示的位置必须有足够的空间,否则,会自动寻找合适的位置,如你设置了显示在上部,但上面已经在浏览器最上方了,则会显示在下面。
Popovers




3 再一次任意处关闭 默认情况下,单击按钮显示提示消息,再次点击此按钮消息隐藏,否则消息会一直显示。 我们想再次点击任意处就关闭此前显示的提示信息,则需要给按钮增加一个
data-bs-trigger="focus"
属性,并在js文件中增加
trigger: 'focus'
。 要实现正确的跨浏览器和跨平台行为,必须使用a标记,而不是button标记,并且还必须包含tabindex属性。 原生Bootstrap旋转木马特效 原生Bootstrap旋转木马特效是一款基于jQuery实现的图片轮播切换代码。 下载
Popovers




点此按钮弹出提示,点击空白处提示消失
工具提示(Tooltips) 工具提示(Tooltips)和弹出提示框(Popovers)非常类似,也是可选加载的,必须自己初始化。其显示方式也会 根据预留空间自动调整。与弹出提示不同的是,工具提示在鼠标悬停在按钮的时候就会显示,鼠标离开自动隐藏,不需要点击。 1 工具提示生效代码 和弹窗提示基本类似,页面中必须包含此代码,工具提示才能生效。
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')) var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { return new bootstrap.Tooltip(tooltipTriggerEl) })
2  工具提示示例 工具提示一般用在按钮和链接上,用以说明其功能,当然也可以用在图片上。title的值就是鼠标悬停显示的内容,可以使用html元素。 链接有默认的title属性,其提示文字显示在浏览器状态栏,这个显示的更直观。
工具提示




链接提示
3 工具提示显示位置 跟弹窗提示一样支持四个工具提示方向,分别是top、bottom、left、right。
吐司消息




4 用于文章中提示
吐司消息




最近B站 是迎来了自己12周年的纪念日, 之前吧,B站做过好些流行语盘点, 比如“awsl”一类的词,不少朋友都刷过,甚至有的梗还出圈了, 像是后那个什么浪一类的,我留意到B站官方很多时候还会做一些相关的科普盘点啥的,时不时有推送。

可以结合通用类做出更多效果 两种提示的文字部分都可以使用html和bootstrap的通用类,设置间隔、排版、字体、颜色等,你可以自己尝试一下做出更多很酷的效果。 更多关于bootstrap的相关知识,可访问: bootstrap基础教程 !!

相关文章