1

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

我可以看到还有其他一些方法可以做到这一点，我所做的是创建自己的 custom.css 以覆盖任何 Bootstrap 元素的样式，并将其链接到 html 中的默认引导 css 下方。我有我的自定义样式，用于自定义此处.btn .btn-success记录的绿色按钮，但它没有做任何事情。

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

4

2 回答 2

3

在 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; 
}
于 2013-05-05T23:16:51.367 回答
1

我在这里写了关于这个问题的解决方法。一种对引导按钮进行样式化的简单方法。https://stackoverflow.com/a/20960203/3167046

于 2014-01-06T22:11:44.593 回答