更改引導按鈕的顏色

這是一個愚蠢的問題，因爲我覺得我應該知道答案，並認爲我的代碼可以完成這項工作。更改引導按鈕的顏色

但我使用bootstrap，我試圖將btn btn-primary類從默認藍色更改爲其他。

這裏是我的html：

<input type="text" class="form-control" placeholder="Search by user name, member type, genre..."> 
         <span class="input-group-btn"> 
          <button class="btn btn-primary" type="button"><i class="fa fa-search" aria-hidden="true"></i></button> 
         </span>

我的CSS：

.btn btn-primary:hover, 
.btn btn-primary:focus, 
.btn btn-primary:active, 
.btn btn-primary.active { 
    color: #ffffff; 
    background-color: pink; 
    border-color: pink; 
}

但它仍然是這樣的：

來源

2017-10-11 J.G.Sable

爲什麼不創建自定義btn而不是重寫引導默認顏色？ –

由於btn股同級車中相同的元素名爲btn-primary，您的CSS選擇器HOULD樣子

.btn.btn-primary:hover, 
 
.btn.btn-primary:focus, 
 
.btn.btn-primary:active, 
 
.btn.btn-primary.active { 
 
    color: #ffffff; 
 
    background-color: pink; 
 
    border-color: pink; 
 
}

來源

2017-10-11 21:15:53

謝謝！這改變了它的懸停，但如何定期改變它。 –

您應該在當前列表中添加另一個選擇器，匹配'.btn.btn-primary {}'。很高興我能幫上忙！ –

確保您的倍率加載後默認的引導，或者如果你正在使用NPM和自己編譯，請確保您的變量覆蓋在引導後放置默認

在bootstrap.css（BS4）

BTN-主類被定義爲如下：（注意，這是沒有必要前言這些類與.btn.btn-伯，只是.btn伯..以前的答案實際上並不正確，但因爲特異性而起作用。 :-)

.btn-primary { 
 
    color: #fff; 
 
    background-color: #007bff; 
 
    border-color: #007bff; 
 
} 
 

 
.btn-primary:hover { 
 
    color: #fff; 
 
    background-color: #0069d9; 
 
    border-color: #0062cc; 
 
} 
 

 
.btn-primary:focus, .btn-primary.focus { 
 
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5); 
 
} 
 

 
.btn-primary.disabled, .btn-primary:disabled { 
 
    background-color: #007bff; 
 
    border-color: #007bff; 
 
} 
 

 
.btn-primary:active, .btn-primary.active, 
 
.show > .btn-primary.dropdown-toggle { 
 
    background-color: #0069d9; 
 
    background-image: none; 
 
    border-color: #0062cc; 
 
}

如果您填寫所有這些出你的主題，只是一定的引導做負載後，你的主題變化。

來源

2017-10-11 21:26:14 WebDragon

更改引導按鈕的顏色

回答

相關問題