怎么在BootStrap中更改popover的默認(rèn)樣式

本篇文章為大家展示了怎么在BootStrap中更改popover的默認(rèn)樣式，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

.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彈出框默認(rèn)樣式，需修改彈出框樣式可在CSS中自定義要修改的樣式，例如：padding改為6px，背景顏色修改為黑色，字體顏色修改為白色

 .popover{
   padding:6px;
  background-color:#000;
   color:#fff;
}

補(bǔ)充：下面看下bootstrap popover簡(jiǎn)單用法

//添加

$('#freqsComboCheckbox').addClass('has-popover').attr('data-content', "Please Select Frequency!")
            .popover({
               placement: 'bottom',
               container: '.areaBox',//將popover附加到特定的元素上
              trigger: 'manual' //manual觸發(fā)方式
            }).popover('show');

//移除

$(".has-popover").not($('#freqsComboCheckbox')).removeClass('has-popover').popover('destroy');

Bootstrap是什么

Bootstrap是目前最受歡迎的前端框架，它是基于 HTML、CSS、JAVASCRIPT 的，它簡(jiǎn)潔靈活，使得 Web 開發(fā)更加快捷，它還有一個(gè)響應(yīng)最好的Grid系統(tǒng)，并且能夠在手機(jī)端通用，而Bootstrap是使用許多可重用的CSS和JavaScript組件，可以幫助實(shí)現(xiàn)需要的幾乎任何類型的網(wǎng)站的功能，此外，所有這些組件都是響應(yīng)式的。

上述內(nèi)容就是怎么在BootStrap中更改popover的默認(rèn)樣式，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注億速云行業(yè)資訊頻道。