上传到服务器的网站打开是空白,网站报备流程,广州美容网站建设,怎么自创游戏软件目录
提示框
如何创建提示框
实例
指定提示框的位置
实例
弹出框
如何创建弹出框
实例
指定弹出框的位置
实例
关闭弹出框
实例 提示框
提示框是一个小小的弹窗#xff0c;在鼠标移动到元素上显示#xff0c;鼠标移到元素外就消失。
如何创建提示框
Bootstrap…目录
提示框
如何创建提示框
实例
指定提示框的位置
实例
弹出框
如何创建弹出框
实例
指定弹出框的位置
实例
关闭弹出框
实例 提示框
提示框是一个小小的弹窗在鼠标移动到元素上显示鼠标移到元素外就消失。
如何创建提示框
Bootstrap 5 提供了创建提示框的方式。你可以在需要添加提示框的元素上使用 data-bs-toggletooltip 属性来创建提示框并且使用 title 属性来指定提示框显示的内容。需要注意的是初始化提示框需要在 JavaScript 中进行设置然后在指定的元素上调用 tooltip() 方法。
实例
!DOCTYPE html
htmlheadtitleBootstrap5 实例/titlemeta charsetutf-8meta nameviewport contentwidthdevice-width, initial-scale1link hrefhttps://cdn.jsdelivr.net/npm/bootstrap5.1.2/dist/css/bootstrap.min.css relstylesheetscript srchttps://cdn.jsdelivr.net/npm/bootstrap5.1.2/dist/js/bootstrap.bundle.min.js/script/headbodydiv classcontainer mt-4h3提示框实例/h3button typebutton classbtn btn-primary data-bs-toggletooltip title这是一个提示框鼠标移动到我这里/button/divscriptvar tooltipTriggerList [].slice.call(document.querySelectorAll([data-bs-toggletooltip]))tooltipTriggerList.map(function (tooltipTriggerEl) {return new bootstrap.Tooltip(tooltipTriggerEl)})/script/body
/html
在这个示例中我们创建了一个按钮并在该按钮上使用了 data-bs-toggletooltip、title这是一个提示框属性。然后在 JavaScript 中初始化了该提示框使其在鼠标移动到按钮上时显示出来。
运行结果 指定提示框的位置
默认情况下提示框显示在元素上方。可以使用 data-bs-placement 属性来指定提示框的位置。该属性可以设置为以下值之一top、bottom、left或right。
实例
!DOCTYPE html
htmlheadtitleBootstrap5 实例/titlemeta charsetutf-8meta nameviewport contentwidthdevice-width, initial-scale1link hrefhttps://cdn.jsdelivr.net/npm/bootstrap5.1.2/dist/css/bootstrap.min.css relstylesheetscript srchttps://cdn.jsdelivr.net/npm/bootstrap5.1.2/dist/js/bootstrap.bundle.min.js/script/headbodydiv classcontainer mt-4h3指定提示框的位置/h3button typebutton classbtn btn-primary data-bs-toggletooltip data-bs-placementtoptitle这是一个顶部提示框鼠标移动到我这里/buttonbutton typebutton classbtn btn-primary data-bs-toggletooltip data-bs-placementbottomtitle这是一个底部提示框鼠标移动到我这里/buttonbutton typebutton classbtn btn-primary data-bs-toggletooltip data-bs-placementlefttitle这是一个左边提示框鼠标移动到我这里/buttonbutton typebutton classbtn btn-primary data-bs-toggletooltip data-bs-placementrighttitle这是一个右边提示框鼠标移动到我这里/button/divscriptvar tooltipTriggerList [].slice.call(document.querySelectorAll([data-bs-toggletooltip]))tooltipTriggerList.map(function(tooltipTriggerEl) {return new bootstrap.Tooltip(tooltipTriggerEl)})/script/body
/html
运行结果
弹出框
弹出框Popover组件类似于工具提示它是一种弹出框当用户点击元素时出现。不同之处在于弹出框可以包含更多内容。
如何创建弹出框
可以在需要添加弹出框的元素上使用 data-bs-togglepopover 属性来创建弹出框并且使用 title 属性来指定弹出框的标题使用 data-bs-content 属性来指定弹出框的内容。
实例
!DOCTYPE html
htmlheadtitleBootstrap5 实例/titlemeta charsetutf-8meta nameviewport contentwidthdevice-width, initial-scale1link hrefhttps://cdn.jsdelivr.net/npm/bootstrap5.1.2/dist/css/bootstrap.min.css relstylesheetscript srchttps://cdn.jsdelivr.net/npm/bootstrap5.1.2/dist/js/bootstrap.bundle.min.js/script/headbodydiv classcontainer mt-4h3如何创建弹出框/h3button typebutton classbtn btn-primary data-bs-togglepopover title这是一个弹出框data-bs-content这是弹出框的内容点击我/button/divscriptvar popoverTriggerList [].slice.call(document.querySelectorAll([data-bs-togglepopover]))popoverTriggerList.map(function(popoverTriggerEl) {return new bootstrap.Popover(popoverTriggerEl)})/script/body
/html
在这个示例中我们创建了一个按钮并在该按钮上使用了 data-bs-togglepopover、title这是一个弹出框和data-bs-content这是弹出框的内容属性。然后在 JavaScript 中初始化了该弹出框使其在鼠标点击按钮时显示出来。注意对于需要动态生成的元素在插入文档后需要手动调用 new bootstrap.Popover() 方法进行初始化。
运行结果 指定弹出框的位置
当使用 Bootstrap 5 弹出框时默认情况下弹出框显示在元素右侧。你可以使用 data-bs-placement 属性来指定弹出框的显示位置。该属性可以设置为以下位置之一
top显示在目标元素上方bottom显示在目标元素下方left显示在目标元素左侧right显示在目标元素右侧
除了以上四个位置之外Bootstrap 还支持使用详细的定位方式来精确控制弹出框的显示位置例如top-start、top-end、bottom-start、bottom-end、left-start、left-end、right-start和right-end。这些定位方式允许你在页面中更加自由地布置弹出框以适配不同的设计需求。
top-start弹出框或工具提示位于目标元素的上方开始位置。top-end弹出框或工具提示位于目标元素的上方结束位置。bottom-start弹出框或工具提示位于目标元素的下方开始位置。bottom-end弹出框或工具提示位于目标元素的下方结束位置。left-start弹出框或工具提示位于目标元素的左侧开始位置。left-end弹出框或工具提示位于目标元素的左侧结束位置。right-start弹出框或工具提示位于目标元素的右侧开始位置。right-end弹出框或工具提示位于目标元素的右侧结束位置。
实例
!DOCTYPE html
htmlheadtitleBootstrap5 实例/titlemeta charsetutf-8meta nameviewport contentwidthdevice-width, initial-scale1link hrefhttps://cdn.jsdelivr.net/npm/bootstrap5.1.2/dist/css/bootstrap.min.css relstylesheetscript srchttps://cdn.jsdelivr.net/npm/bootstrap5.1.2/dist/js/bootstrap.bundle.min.js/script/headbodydiv classcontainer mt-3 styledisplay: grid; place-items: center;h1指定弹出框的位置/h1br /h3top显示在目标元素上方/h3button typebutton classbtn btn-primary data-bs-togglepopover data-bs-placementtoptitle这是一个弹出框 data-bs-content这是弹出框的内容点击我/buttonbr /h3bottom显示在目标元素下方/h3button typebutton classbtn btn-primary data-bs-togglepopover data-bs-placementbottomtitle这是一个弹出框 data-bs-content这是弹出框的内容点击我/buttonbr /h3left显示在目标元素左侧/h3button typebutton classbtn btn-primary data-bs-togglepopover data-bs-placementlefttitle这是一个弹出框 data-bs-content这是弹出框的内容点击我/buttonbr /h3right显示在目标元素右侧/h3button typebutton classbtn btn-primary data-bs-togglepopover data-bs-placementrighttitle这是一个弹出框 data-bs-content这是弹出框的内容点击我/button/divscriptvar popoverTriggerList [].slice.call(document.querySelectorAll([data-bs-togglepopover]))popoverTriggerList.map(function(popoverTriggerEl) {return new bootstrap.Popover(popoverTriggerEl)})/script/body
/html
运行结果
关闭弹出框
可以使用 data-bs-trigger 属性来设置触发关闭弹出框的方式。以下是两种常用的方式
关闭方式为再次点击指定元素默认情况下当再次点击与弹出框关联的元素时弹出框会关闭无需特殊设置。关闭方式为点击元素外部区域可以通过添加 data-bs-triggerfocus 属性来实现此效果。这样当点击元素外部的任何位置时弹出框都会关闭。
另外如果想要实现当鼠标移动到元素上显示弹出框移开鼠标后消失的效果可以将 data-bs-trigger 属性设置为 hover。
实例
!DOCTYPE html
htmlheadtitleBootstrap5 实例/titlemeta charsetutf-8meta nameviewport contentwidthdevice-width, initial-scale1link hrefhttps://cdn.jsdelivr.net/npm/bootstrap5.1.2/dist/css/bootstrap.min.css relstylesheetscript srchttps://cdn.jsdelivr.net/npm/bootstrap5.1.2/dist/js/bootstrap.bundle.min.js/script/headbodydiv classcontainer mt-3h1关闭弹出框/h1br /h3关闭方式为再次点击指定元素默认情况下当再次点击与弹出框关联的元素时弹出框会关闭无需特殊设置。/h3button typebutton classbtn btn-primary data-bs-togglepopover title这是一个弹出框data-bs-content这是弹出框的内容点击我/buttonh3关闭方式为点击元素外部区域可以通过添加 data-bs-triggerfocus 属性来实现此效果。这样当点击元素外部的任何位置时弹出框都会关闭。/h3button typebutton classbtn btn-primary data-bs-togglepopover data-bs-triggerfocustitle这是一个弹出框 data-bs-content这是弹出框的内容点击我/buttonh3如果想要实现当鼠标移动到元素上显示弹出框移开鼠标后消失的效果可以将 data-bs-trigger 属性设置为 hover。/h3button typebutton classbtn btn-primary data-bs-togglepopover data-bs-triggerhovertitle这是一个弹出框 data-bs-content这是弹出框的内容鼠标移动到我上面/button/divscriptvar popoverTriggerList [].slice.call(document.querySelectorAll([data-bs-togglepopover]))popoverTriggerList.map(function(popoverTriggerEl) {return new bootstrap.Popover(popoverTriggerEl)})/script/body
/html
运行结果
