风格的引导程序表按钮 - 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

回答

相关问题