怎么在BootStrap中更改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是什么

Bootstrap是目前最受欢迎的前端框架，它是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷，它还有一个响应最好的Grid系统，并且能够在手机端通用，而Bootstrap是使用许多可重用的CSS和JavaScript组件，可以帮助实现需要的几乎任何类型的网站的功能，此外，所有这些组件都是响应式的。

上述内容就是怎么在BootStrap中更改popover的默认样式，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联成都网站设计公司行业资讯频道。

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

文章名称：怎么在BootStrap中更改popover的默认样式-创新互联
标题路径：http://mswzjz.cn/article/cshods.html