Dodaj dodatkowe kolory do mniej plików i przekompiluj. Zobacz także Twitter Bootstrap Customization Best Practices. aktualizacja
Jak wspomniano przez @ ow3n od stosowania v3.0.3:
.btn-custom {
.button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
}
Uwaga wyżej @btn-default-color
ustawia kolor czcionki, kolor tła @btn-default-bg
i @ btn-default-granicy kolor granica. Kolory dla stanów takich jak aktywne, najeżdżanie i wyłączone są obliczane na podstawie tych parametrów.
Na przykład:
.btn-custom {
.button-variant(blue; red; green);
}
spowoduje:
Na którzy chcą korzystać z CSS bezpośrednie, zastąpić kolory w tym kodzie:
.btn-custom {
color: #0000ff;
background-color: #ff0000;
border-color: #008000;
}
.btn-custom:hover,
.btn-custom:focus,
.btn-custom:active,
.btn-custom.active,
.open .dropdown-toggle.btn-custom {
color: #0000ff;
background-color: #d60000;
border-color: #004300;
}
.btn-custom:active,
.btn-custom.active,
.open .dropdown-toggle.btn-custom {
background-image: none;
}
.btn-custom.disabled,
.btn-custom[disabled],
fieldset[disabled] .btn-custom,
.btn-custom.disabled:hover,
.btn-custom[disabled]:hover,
fieldset[disabled] .btn-custom:hover,
.btn-custom.disabled:focus,
.btn-custom[disabled]:focus,
fieldset[disabled] .btn-custom:focus,
.btn-custom.disabled:active,
.btn-custom[disabled]:active,
fieldset[disabled] .btn-custom:active,
.btn-custom.disabled.active,
.btn-custom[disabled].active,
fieldset[disabled] .btn-custom.active {
background-color: #ff0000;
border-color: #008000;
}
.btn-custom .badge {
color: #ff0000;
background-color: #0000ff;
}
aktualizacja końcowa
Aby wygenerować niestandardowy przycisk:
.btn-custom {
.btn-pseudo-states(@yourColor, @yourColorDarker);
}
Powyższy wygeneruje następujący CSS:
.btn-custom {
background-color: #1dcc00;
border-color: #1dcc00;
}
.btn-custom:hover,
.btn-custom:focus,
.btn-custom:active,
.btn-custom.active {
background-color: #19b300;
border-color: #169900;
}
.btn-custom.disabled:hover,
.btn-custom.disabled:focus,
.btn-custom.disabled:active,
.btn-custom.disabled.active,
.btn-custom[disabled]:hover,
.btn-custom[disabled]:focus,
.btn-custom[disabled]:active,
.btn-custom[disabled].active,
fieldset[disabled] .btn-custom:hover,
fieldset[disabled] .btn-custom:focus,
fieldset[disabled] .btn-custom:active,
fieldset[disabled] .btn-custom.active {
background-color: #1dcc00;
border-color: #1dcc00;
}
w powyższym # 1dcc00 będzie swój własny kolor i # 19b300 Twój ciemniejszy kolor. Zamiast mniejszego rozwiązania możesz również dodać to css bezpośrednio do plików html (po bootstrap css).
Albo dostać kod css bezpośrednio z Twitter's Bootstrap 3 Button Generator
Czy .btn-pseudo-stany w Bootcamp 3? Otrzymuję "niezdefiniowany" błąd podczas próby skompilowania powyższego kodu. – ow3n
masz rację, zostało zmienione. W najnowszej wersji (3.0.3) powinieneś użyć '.button-variant (@ btn-default-color; @ btn-default-bg; @ btn-default-border);'. Zaktualizuję też mój dowód. –
Jeśli chodzi o bootstrap 4.0-alpha, interfejs API funkcji button-variant mixin zmienił się w przycisk '@mixin button-variant ($ background, $ border, $ active-background: darken ($ background, 7.5%), $ active- border: darken ($ border, 10%)) '. Sprawdź plik w 'scss/mixins/_buttons.scss' dla swojej własnej wersji bootstrap, aby sprawdzić, czy jest jakaś nowa aktualizacja. – lyang