当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 更改BootStrap popover的默认样式及popover简单用法

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

2018年09月23日  | 移动技术网IT编程  | 我要评论

下面通过一段代码给大家介绍更改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简单用法，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网