完全格式化默认按钮

Question

我有要求完全格式化bootstrap中的默认按钮3.我已经在定制器中更改了默认背景颜色。

但我不知道在哪里更改不同按钮状态（活动、悬停、焦点）的格式。有人知道我必须在哪里进行更改吗？

Answer 1

以下是负责默认按钮悬停、活动、焦点状态的样式...相应地更改它。

.btn-default:hover,
.btn-default:focus,
.btn-default.focus,
.btn-default:active,
.open > .dropdown-toggle.btn-default {
  color: #333333;
  background-color: #e6e6e6;
  border-color: #adadad;
}
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
  background-image: none;
}

到底发生了什么，定制器将背景颜色加深了 10%，将边框颜色加深了 12%。

Less Mixins.
 background-color: darken(@background, 10%);
 border-color: darken(@border, 12%);

因此您无法直接在定制器中完全更改颜色。

Answer 2

使用定制器，border-radius 和 border-color，以及 hover 和 active pseudo-类会自动计算（使用 LESS），相对于背景颜色。如果这不是您想要的，您可以分别更改它们：

.btn-default:hover{
  background-color:#eee;
  border-radius: 2px;
  border: 1px solid #000;
  color:#999;
  etc...
  }

.btn-defauot:active{
  background-color:...etc
  }

完全格式化默认按钮

Completely formatting default button

css

button

twitter-bootstrap-3