首页 > 编程 > JavaScript > 正文

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

2019-11-19 12:56:51
字体:
来源:转载
供稿:网友

下面通过一段代码给大家介绍更改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;}

补充:下面看下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简单用法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持!

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表