Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码

前端之家收集整理的这篇文章主要介绍了Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

1.Bootstrap弹出框示例

这里写图片描述

2.改进

有时提示内容较多,仅仅使用data-content,title,在html文档里写出来比较乱,我们可以借助提供的popover()方法,实现对弹出框内容、样式的修改

标题函数 content: function() { return keywords_content(); //内容函数 } }); //标题函数 function keywords_title() { return '结果说明:'; } //内容函数,同时对样式进行修改 function keywords_content() { var data = $('

提及结果列关键词不区分英文大小写

'); } //以下是弹出框样式,可以根据需要自定义修改 .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弹出框之自定义悬停框标题内容和样式示例代码。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

猜你在找的Bootstrap相关文章