样式引导表按钮 - btn-primary dropdown-toggle

Question

如何完全设置引导表按钮的样式，目前按钮保持蓝色并且悬停在我的表按钮上只会使按钮的一半成为我想要的颜色，我想要按钮黑色 (#282828)，然后稍微亮一点悬停或活动。

问题底部的 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 为所有内容设置样式，但按钮保持蓝色，当我将鼠标悬停在它上面时，只有一半的按钮变黑 - 虽然轮廓确实变黑 - 抱歉这么多 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-primary dropdown-toggle

谢谢

JSfiddle

Answer 1

我已尝试复制该问题。我想出了这个代码：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 的行为由 bootstrap-theme.min.css 文件中的 .btn-primary 类触发。所以你可以：

• 删除该主题。
• 进行适当的覆盖。
• 删除 btn-primary 类并在您自己的代码中创建一个自定义类。

Answer 2

如果您使用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; 
}