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

 更新时间:2018年09月13日 15:03:44   作者:Sumyn   我要评论

这篇文章主要介绍了更改BootStrap popover的默认样式及popover简单用法,需要的朋友可以参考下

下面通过一段代码给大家介绍更改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简单用法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • ECMAScript6中Set/WeakSet详解

    ECMAScript6中Set/WeakSet详解

    这篇文章主要介绍了ECMAScript6中Set/WeakSet详解的相关资料,需要的朋友可以参考下
    2015-06-06
  • d3.js中冷门却实用的内置函数总结

    d3.js中冷门却实用的内置函数总结

    D3.js是一个JavaScript库,它可以通过数据来操作文档。D3可以通过使用HTML、SVG和CSS把数据鲜活形象地展现出来。d3.js其实提供了很多内置的函数,可以却被大家忽略了,下面这篇文章就来给大家详细介绍了d3.js中冷门却实用的一些内置函数,需要的朋友可以参考借鉴。
    2017-02-02
  • 浅谈ES6 模板字符串的具体使用方法

    浅谈ES6 模板字符串的具体使用方法

    本篇文章主要介绍了浅谈ES6 模板字符串的具体使用方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • 深入理解JavaScript系列(12) 变量对象(Variable Object)

    深入理解JavaScript系列(12) 变量对象(Variable Object)

    JavaScript编程的时候总避免不了声明函数和变量,以成功构建我们的系统,但是解释器是如何并且在什么地方去查找这些函数和变量呢
    2012-01-01
  • 简单谈谈JS数组中的indexOf方法

    简单谈谈JS数组中的indexOf方法

    最近在工作中遇到一个小问题,这篇文章代码我会简化成小例子展示给大家。给大家详细的介绍JS数组中的indexOf方法,用心看到最后会有收获哈,有需要的朋友们下面来一起看看吧。
    2016-10-10
  • Bootstrap实现可折叠分组侧边导航菜单

    Bootstrap实现可折叠分组侧边导航菜单

    这篇文章主要介绍了Bootstrap实现可折叠分组侧边导航菜单的相关资料,需要的朋友可以参考下
    2018-03-03
  • bootstrap选项卡扩展功能详解

    bootstrap选项卡扩展功能详解

    这篇文章主要为大家详细介绍了bootstrap选项卡扩展功能,增加关闭,超出一行显示下拉,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • javascript获取表格 td 中的内容

    javascript获取表格 td 中的内容

    可以获取html table中的td中的内容。非常的不错。
    2009-07-07
  • 在javascript中随机数 math random如何生成指定范围数值的随机数

    在javascript中随机数 math random如何生成指定范围数值的随机数

    本篇文章给大家介绍在javascript中随机数math random如何生成指定范围数值的随机数,由于math.random生成了一个伪随机数,之后还要经过我们的后期处理。对随机数math random感兴趣的朋友一起了解了解吧
    2015-10-10
  • react+redux的升级版todoList的实现

    react+redux的升级版todoList的实现

    本篇文章主要介绍了react+redux的升级版todoList的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12

最新评论