更改BootStrap popover的默认样式及popover简单用法

下面通过一段代码给大家介绍更改BootStrap popover的认样式,具体代码如下所述:

rush:js;"> .popover { position: absolute; top: 0; left: 0; z-index: 1060; display: none; max-width: 276px; padding: 1px; font-size: 14px; font-weight: 400; line-height: 1.42857143; text-align: left; white-space: normal; background-color: #fff; -webkit-background-clip: padding-Box; background-clip: padding-Box; border: 1px solid #ccc; border: 1px solid rgba(0,.2); border-radius: 6px; -webkit-Box-shadow: 0 5px 10px rgba(0,.2); Box-shadow: 0 5px 10px rgba(0,.2); }

BootStrap popover弹出框认样式,需修改弹出框样式可在CSS中自定义修改的样式,例如:padding改为6px,背景颜色修改为黑色,字体颜色修改为白色

rush:js;"> .popover{ padding:6px; background-color:#000; color:#fff; }

补充:下面看下bootstrap popover简单用法

//添加

rush:js;"> $('#freqsComboCheckBox').addClass('has-popover').attr('data-content',"Please Select Frequency!") .popover({ placement: 'bottom',container: '.areaBox',//将popover附加到特定的元素上 trigger: 'manual' //manual触发方式 }).popover('show');

//移除

rush:js;"> $(".has-popover").not($('#freqsComboCheckBox')).removeClass('has-popover').popover('destroy');

总结

以上所述是小编给大家介绍的更改BootStrap popover的认样式及popover简单用法。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

相关文章

Bootstrip HTML 查询搜索常用格式模版 <form class=&...
如何在按钮上加红色数字 您可以使用Bootstrap的badge组件来在...
要让两个按钮左右排列,你可以使用 Bootstrap 的网格系统将它...
是的,可以将status设置为布尔类型,这样可以在前端使用复选...
前端工程师一般用的是Bootstrap的框架而不是样式,样式一般自...
起步导入:<linkrel="stylesheet"href="b...