如何更改引導程序面板頁腳顏色

我有一個引導面板，並且我想更改頁眉的顏色，如其標題。我在panel-footer類旁邊添加了panel-primary，但只有改變爲原色的頂部輪廓顏色。那麼，我該如何改變面板頁腳的顏色？如何更改引導程序面板頁腳顏色

代碼：

<div class="panel panel-primary"> 
    <div class="panel-heading">     
      Panel Heading 
    </div><!--.panel-heading--> 

    <div class="panel-body"> 
      Panel Body 
    </div><!--.panel-body--> 

    <div class="panel-footer panel-primary"> 
      Panel Footer 
     </div><!--.panel-footer--> 
</div>

來源

2015-10-13 Bayu Anggara

注意，對於標題的背景色設置在'.panel-heading' ** **不'.panel-primary'。 – misterManSam

你必須創建一個自定義的類應用到面板尺類：

注意事項使用情境的變化時，因爲它們並不意味着是在面板頁腳不繼承顏色和邊框前景。見docs。

.panel-footer.panel-custom { 
 
    background: red; 
 
    color: white; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="panel panel-primary"> 
 
    <div class="panel-heading">Panel Heading</div> 
 
    <!--.panel-heading--> 
 
    <div class="panel-body">Panel Body</div> 
 
    <!--.panel-body--> 
 
    <div class="panel-footer panel-custom">Panel Footer</div> 
 
    <!--.panel-footer--> 
 
</div>

來源

2015-10-13 22:47:03 vanburen

也許你可以顯示這些面板上的CSS？

很可能是因爲另一個CSS標籤比「panel-primary」標籤具有更高的優先級。您可以嘗試在Firefox/Chrome中使用網絡開發者工具來顯示覆蓋它的內容。

來源

2015-10-13 22:46:04 kainr2

你必須改變適當CSS來實現這一目標。

默認爲Bootatrap 3：

.panel-footer { 
    padding: 10px 15px; 
    background-color: #f5f5f5; 
    border-top: 1px solid #ddd; 
    border-bottom-right-radius: 3px; 
    border-bottom-left-radius: 3px; 
}

您可以覆蓋這個風格（你不應該panel-primary類添加到panel-footer，因爲引導CSS的結構）。

來源

2015-10-13 22:50:20 makshh

檢查了這一點：

CSS

.panel-footer{ 
    background-color:#337ab7; 
    border-color: #337ab7; 
    color: #FFFFFF; 

}

我重寫引導CSS，但這並不是一個很好的解決方案。更好的方法是宣佈自己的班級，然後改變顏色。

jsfiddle

來源

2015-10-13 22:52:13

如何更改引導程序面板頁腳顏色

回答

相關問題