杭州网站建设
本内容完全由佚站互联成员原创并且免费提供交流学习,如有转载,请注明出处。

在Bootstrap的组件中,弹出框组件和提示组件的功能很相似,不过它们还是有其本质区别。
Bootstrap弹出框的触发形式是通过点击对应元素弹出信息,而提示组件是通过hover到对应元素上显示提示。
让我们看看如何使用Bootstrap弹出框组件来搭建自己的网站建设应用。


如何使用Bootstrap弹出框

在你引入Bootstrap弹出框之前,你需要保证自己的项目中已经引入了bootstrap.js文件,然后你就可以在想要触发弹出框的元素中引入对应的属性了:<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="佚站互联" data-content="佚站互联杭州网站建设">点击显示弹出框</button>通过以上代码我们可以看到,在button元素中引入data-toggle="popover"属性可以绑定弹出框事件,title属性表示弹出框的标题,data-content属性表示弹出框的内容。


如何改变Bootstrap弹出框方向

默认Bootstrap的显示位置是在元素右侧,如果我们想要在其他方向显示弹出框应该怎么做呢?
需要通过在元素中引入data-placement属性来设定方向,例如:<button type="button" class="btn btn-default" data-toggle="popover" data-placement="top" data-content="显示上方弹出框"> 触发弹出框</button>


改变Bootstrap弹出框触发方式

默认Bootstrap弹出框的触发方式是点击(click),如果我们想要通过点击按钮触发弹出框,点击屏幕其他位置关闭弹出框(在移动端比较实用),应该怎么做呢?
我们只需要通过JS代码改变元素的触发形式即可,这里我们要用focus的方式触发:<button type="button" class="btn btn-lg btn-danger popover-dismiss" data-toggle="popover" title="focus触发弹出框" data-content="弹出框触发形式">佚站互联</button>$('.popover-dismiss').popover({ trigger: 'focus'})通过上述的JS代码,我们将该按钮的Bootstrap弹出框触发方式改成了focus。


写在文章最后

Bootstra提示组件相比,Bootstrap弹出框的内容更为丰富,样式也更加好看,所以如果你想要实现这种提示功能,不妨考虑使用这两种方式。


佚站互联 YEAHZAN,杭州网站建设 创新团队。本文版权所有,转载时请注明出处。

对此文章有疑问?可以留言提问,或者通过 在线联系 我们来获得帮助。