Question

我想改变Bootstrap按钮的样式，使其没有默认外观。我可以轻松地从customization页面更改颜色，但我想要做的是删除渐变值，使其看起来平坦。

我可以看到还有其他一些方法可以做到这一点，我所做的就是创建自己的custom.css来覆盖任何Bootstrap元素的样式，并将它链接到html中的默认bootstrap css下面。我有.btn .btn-success以上的自定义样式，用于自定义绿色按钮，如文档here所示，但它没有做任何事情。

我基本上想知道覆盖默认样式的正确步骤在自定义按钮的上下文中。

Answer 1

在bootstrap .css上，找到btn-primary的所有样式并将它们复制到自定义.css。

现在将名称更改为您想要的颜色.btn-primary = .btn-blue

然后，删除或更改元素。

在按钮中使用您创建的课程：

<button class="btn btn-customcollor">Custom Button</button>

灰色按钮示例：

.btn.btn-gray {
    border: 1px solid #626e7f;
    -webkit-box-shadow: inset 0 1px 2px #9aa4b1;
    -moz-box-shadow: inset 0 1px 2px #9aa4b1;
    box-shadow: inset 0 1px 2px #9aa4b1;
    background: #758294;
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzhjOTdhNiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzc1ODI5NCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background-size: 100%;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #8c97a6), color-stop(100%, #758294));
    background-image: -webkit-linear-gradient(top, #8c97a6, #758294);
    background-image: -moz-linear-gradient(top, #8c97a6, #758294);
    background-image: -o-linear-gradient(top, #8c97a6, #758294);
    background-image: linear-gradient(top, #8c97a6, #758294); 
}


.btn.btn-gray:hover {
    background: #728092;
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzhjOTdhNiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzcyODA5MiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background-size: 100%;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #8c97a6), color-stop(100%, #728092));
    background-image: -webkit-linear-gradient(top, #8c97a6, #728092);
    background-image: -moz-linear-gradient(top, #8c97a6, #728092);
    background-image: -o-linear-gradient(top, #8c97a6, #728092);
    background-image: linear-gradient(top, #8c97a6, #728092);
    -webkit-transition: box-shadow 0.05s ease-in-out;
    -moz-transition: box-shadow 0.05s ease-in-out;
    -o-transition: box-shadow 0.05s ease-in-out;
  transition: box-shadow 0.05s ease-in-out; 
}


.btn.btn-gray:active {
    background: #818d9d;
    border-color: #5d6979;
    -webkit-box-shadow: 0 0 5px #818d9d inset;
    -moz-box-shadow: 0 0 5px #818d9d inset;
    box-shadow: 0 0 5px #818d9d inset; 
}

.btn-group.open .btn.btn-gray.dropdown-toggle {
    background-color: #8c97a6; 
}

Answer 2

我已经在这里写了关于此问题的解决方法。样式化引导按钮的简单方法。 https://stackoverflow.com/a/20960203/3167046

Bootstrap自定义按钮样式

2 个答案: