風格的引導程序表按鈕 - btn-primary dropdown-toggle

如何完全引導引導程序表按鈕，當前按鈕保持藍色並且懸停在我的表按鈕上只會使按鈕的一半變爲我想要的顏色，我希望按鈕黑色（＃282828），然後在盤旋或活動時稍微輕一些。風格的引導程序表按鈕 - btn-primary dropdown-toggle

的jsfiddle在問題的底部

我的表是由JavaScript

function bootstrapTableStateHandler(origin, msg, type) { 
    console[type]("[bootstrapTable." + origin + "]", msg) 
} 
var $table = $('#results'); 
     $table.bootstrapTable({ 
       url: 'getresults.php', 
       search: true, 
       buttonsClass: 'primary', 
       showFooter: false, 
       minimumCountColumns: 2, 
       columns: [{ 
        field: 'results', 
        title: 'results', 
        sortable: true, 
       }, ....So on and so forth

而且降表

<table id="results" data-show-columns="true" data-show-toggle="true"></table>

我下來打開這個產生試圖使用下面的CSS和butto來設計樣式ñ呈藍色，當我將鼠標懸停在它只有一半的按鈕變成黑色 - 輪廓也變成黑色，但 - 對不起，這麼多的CSS

.btn-primary { 
    color: #ffffff !important; 
    background-color: #282828 !important; 
    border-color: #292730; 
} 

.btn-primary:hover, 
.btn-primary:focus, 
.btn-primary:active, 
.btn-primary.active, 
.open .dropdown-toggle.btn-primary { 
    color: #ffffff; 
    background-color: #282828 !important; 
    border-color: #282828 !important; 
} 

.btn-primary:active, 
.btn-primary.active, 
.open .dropdown-toggle.btn-primary { 
    background-image: none; 
} 

.btn-primary.disabled, 
.btn-primary[disabled], 
fieldset[disabled] .btn-primary, 
.btn-primary.disabled:hover, 
.btn-primary[disabled]:hover, 
fieldset[disabled] .btn-primary:hover, 
.btn-primary.disabled:focus, 
.btn-primary[disabled]:focus, 
fieldset[disabled] .btn-primary:focus, 
.btn-primary.disabled:active, 
.btn-primary[disabled]:active, 
fieldset[disabled] .btn-primary:active, 
.btn-primary.disabled.active, 
.btn-primary[disabled].active, 
fieldset[disabled] .btn-primary.active { 
    background-color: #1F1B1B; 
    border-color: #282828 !important; 
} 

.btn-primary .badge { 
    color: #1F1B1B; 
    background-color: #282828 !important; 
} 
.dropdown-toggle { 
    color: #ffffff; 
    background-color: #282828 !important; 
    border-color: #292730; 
} 

.dropdown-toggle:hover, 
.dropdown-toggle:focus, 
.dropdown-toggle:active, 
.dropdown-toggle.active, 
.open .dropdown-toggle.dropdown-toggle { 
    color: #ffffff; 
    background-color: #282828 !important; 
    border-color: #282828 !important; 
} 

.dropdown-toggle:active, 
.dropdown-toggle.active, 
.open .dropdown-toggle.dropdown-toggle { 
    background-image: none; 
} 

.dropdown-toggle.disabled, 
.dropdown-toggle[disabled], 
fieldset[disabled] .dropdown-toggle, 
.dropdown-toggle.disabled:hover, 
.dropdown-toggle[disabled]:hover, 
fieldset[disabled] .dropdown-toggle:hover, 
.dropdown-toggle.disabled:focus, 
.dropdown-toggle[disabled]:focus, 
fieldset[disabled] .dropdown-toggle:focus, 
.dropdown-toggle.disabled:active, 
.dropdown-toggle[disabled]:active, 
fieldset[disabled] .dropdown-toggle:active, 
.dropdown-toggle.disabled.active, 
.dropdown-toggle[disabled].active, 
fieldset[disabled] .dropdown-toggle.active { 
    background-color: #282828 !important; 
    border-color: #282828 !important; 
} 

.dropdown-toggle .badge { 
    color: #1F1B1B; 
    background-color: #282828 !important; 
}

需要什麼樣式強制表按鈕是黑色（＃282828）望着頁面的輸出，當檢查按鈕被稱爲BTN BTN-主要下拉撥動

謝謝

JSfiddle

來源

2017-07-31 Anthony

你能僅提供按鈕的HTML和CSS？最好在一個工作的JS小提琴。如果您提供html，我認爲用於生成html的JavaScript可能與問題無關。 – RMo

新增JSFiddle我的問題 – Anthony

如果使用background代替background-color你應該可以覆蓋設置。這是因爲這些引導程序使用線性漸變，這是一個背景圖像，並將在最前面。所以你需要重寫這個屬性才能看到你的顏色。您也可以使用background-image: none和background-color: #282828，但只需使用background: #282828即可完成工作，管理起來更少。

https://jsfiddle.net/bonez0607/0qkubms6/

.btn-primary { 
    color: #ffffff !important; 
    background: #282828; 
    border-color: #292730; 
} 

.btn-primary:hover, 
.btn-primary:focus, 
.btn-primary:active, 
.btn-primary.active, 
.open .dropdown-toggle.btn-primary { 
    color: #ffffff; 
    background: #484848; 
    border-color: #282828 !important; 
} 

.btn-primary:active, 
.btn-primary.active, 
.open .dropdown-toggle.btn-primary { 
    background-image: none; 
} 

.btn-primary.disabled, 
.btn-primary[disabled], 
fieldset[disabled] .btn-primary, 
.btn-primary.disabled:hover, 
.btn-primary[disabled]:hover, 
fieldset[disabled] .btn-primary:hover, 
.btn-primary.disabled:focus, 
.btn-primary[disabled]:focus, 
fieldset[disabled] .btn-primary:focus, 
.btn-primary.disabled:active, 
.btn-primary[disabled]:active, 
fieldset[disabled] .btn-primary:active, 
.btn-primary.disabled.active, 
.btn-primary[disabled].active, 
fieldset[disabled] .btn-primary.active { 
    background-color: #1F1B1B; 
    border-color: #282828; 
} 

.btn-primary .badge { 
    color: #1F1B1B; 
    background-color: #282828 !important; 
} 
.dropdown-toggle { 
    color: #ffffff; 
    background: #282828; 
    border-color: #292730; 
} 

.dropdown-toggle:hover, 
.dropdown-toggle:focus, 
.dropdown-toggle:active, 
.dropdown-toggle.active, 
.open .dropdown-toggle.dropdown-toggle { 
    color: #ffffff; 
    background: #484848; 
    border-color: #282828 !important; 
}

來源

2017-07-31 23:47:05

謝謝你這個 – Anthony

我試圖複製的問題。我想出了這個代碼：https://jsfiddle.net/gemkzwva/。它解釋了代碼中發生了什麼。

<button></button> 
<button id="fixed"></button> 

button{ 
    height: 50px; 
    width: 100px; 
    background-image: linear-gradient(red, blue);/*bootstrap-theme behaviour*/ 
} 
button:hover{ 
    background-position: 0 25px;/*bootstrap-theme behaviour*/ 
} 
#fixed:hover{ 
    background-position: 0; /*override background-position */ 
    background-image: none; /*remove the bootstrap-theme image/linear-gradient*/ 
    background-color: green; 
}

的background-image和background-position的行爲是通過在引導-theme.min.css文件.btn小學級觸發。所以你可以：

刪除該主題。
作出適當的覆蓋。
刪除btn-primary類並在您自己的代碼中創建一個自定義類。

來源

2017-08-01 01:03:05 RMo

風格的引導程序表按鈕 - btn-primary dropdown-toggle

回答

相關問題