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

相关文章

  • 屏蔽相应键盘按钮操作

    屏蔽相应键盘按钮操作

    本篇文章主要是对屏蔽相应键盘按钮的操作代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-03-03
  • JavaScript html5利用FileReader实现上传功能

    JavaScript html5利用FileReader实现上传功能

    这篇文章主要为大家详细介绍了JavaScript html5利用FileReader实现上传功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • JS清空多文本框、文本域示例代码

    JS清空多文本框、文本域示例代码

    点击按钮清空页面上所有的文本框、文本域,下面有个不错的示例,大家可以参考下其具体实现
    2014-02-02
  • xss文件页面内容读取(解决)

    xss文件页面内容读取(解决)

    xss文件页面内容读取(解决),需要的朋友可以参考下。
    2010-11-11
  • JavaScript 自动完成脚本整理(33个)

    JavaScript 自动完成脚本整理(33个)

    所谓的提升用户体验,其实就是把所有用户视为极度弱智和超级懒鬼。比如JavaScript自动完成(Autocomplete)脚本, 常用于表单,用户只需输入一两个字母,就为你扩展、联想、匹配和供君选择。
    2009-10-10
  • JS 非图片动态loading效果实现代码

    JS 非图片动态loading效果实现代码

    功能说明:譬如在按某个button时,显示消息"Loading”,然后每隔一秒后后面加上".",至一定数量的"."时如:"Loading...",再重置此消息为"Loading",继续动态显示,直至按钮事件处理完成。
    2010-04-04
  • 基于Bootstrap的Java开发问题汇总(Spring MVC)

    基于Bootstrap的Java开发问题汇总(Spring MVC)

    这篇文章主要为大家汇总了基于Bootstrap的Java开发问题,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • js实现在同一窗口浏览图片

    js实现在同一窗口浏览图片

    在同一窗口浏览图片的方法有很多,本例要为大家介绍的是使用js获取img的src属性后进行替换
    2014-09-09
  • Javascript中关于Array.filter()的妙用详解

    Javascript中关于Array.filter()的妙用详解

    大家应该都知道filter是Javascript中Array常用的操作,它用于把Array的某些元素过滤掉,然后返回剩下的元素。下面这篇文章就给大家介绍了关于Javascript中Array.filter()的妙用,有需要的朋友们可以参考借鉴,下面来一起看看吧。
    2016-12-12
  • 跟我学习javascript的定时器

    跟我学习javascript的定时器

    跟我学习javascript的定时器,告诉大家具体的使用方法,并向大家提出了一个消息要求,制作一个定时器,有没有朋友感兴趣,挑战一下
    2015-11-11

最新评论