更改BootStrap popover的默认样式及popover简单用法
编程学习 2021-07-04 16:46www.dzhlxh.cn编程入门
这篇文章主要介绍了更改BootStrap popover的默认样式及popover简单用法,需要的朋友可以参考下
狼蚁网站SEO优化通过一段代码给大家介绍更改BootStrap popover的默认样式，具体代码如下所述：
.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,0,0,.2);
border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
box-shadow: 0 5px 10px rgba(0,0,0,.2);
}
BootStrap popover弹出框默认样式，需修改弹出框样式可在CSS中自定义要修改的样式，例如：padding改为6px，背景颜色修改为黑色，字体颜色修改为白色
.popover{
padding:6px;
background-color:#000;
color:#fff;
}
补充：狼蚁网站SEO优化看下bootstrap popover简单用法
//添加
$('#freqsComboCheckbox').addClass('has-popover').attr('data-content', "Please Select Frequency!")
.popover({
placement: 'bottom',
container: '.areaBox',//将popover附加到特定的元素上
trigger: 'manual' //manual触发方式
}).popover('show');
//移除
$(".has-popover").not($('#freqsComboCheckbox')).removeClass('has-popover').popover('destroy');
总结
以上所述是长沙网络推广给大家介绍的更改BootStrap popover的默认样式及popover简单用法，希望对大家有所帮助，如果大家有任何疑问请给我留言，长沙网络推广会及时回复大家的。在此也非常感谢大家对狼蚁SEO网站的支持！
上一篇：vue实现动态列表点击各行换色的方法
下一篇：JSONP原理及应用实例详解