Daha az dosyalarınıza ekstra renkler katın ve yeniden derleyin. Ayrıca bkz. Twitter Bootstrap Customization Best Practices. güncelleme V3.0.3 kullanımı beri @ ow3n tarafından belirtildiği gibi
: @btn-default-color
yukarıda
.btn-custom {
.button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
}
Not tipi rengini, @btn-default-bg
arka plan rengini ve @ setleri btn-default-sınırındaki rengi arasında sınır. Aktif, vurgulu ve engelli durumları için renkler bu parametrelere göre hesaplanır. Örneğin
:
.btn-custom {
.button-variant(blue; red; green);
}
sonuçlanacaktır içinde:

için, doğrudan CSS kullanmak bu kod renkleri değiştirmek isteyen:
.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;
}
son güncellemeolacak özel bir renk yukarıdaki # 1dcc00 yılında
.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;
}
ve # 19b300 sizin koyu renk:
.btn-custom {
.btn-pseudo-states(@yourColor, @yourColorDarker);
}
yukarıdaki aşağıdaki css oluşturur: özel bir düğme oluşturmak için. Daha az çözüm yerine, bu css'yi doğrudan html dosyalarınıza ekleyebilirsiniz (bootstrap css'den sonra).
Ya önyükleme düğmeleri stilize ben uzunca bir süre için olası bir çözüm arıyorsanız edilmiş Twitter's Bootstrap 3 Button Generator
Bootcamp 3'teki .btn-sözde durumları mı? Yukarıdaki kodu derlemeye çalışırken "tanımsız" bir hata alıyorum. – ow3n
haklısınız değiştirildi. En son sürümde (3.0.3) '.button-variant (@ btn-default-color; @ btn-default-bg; @ btn-default-border); Ben de avukatımı güncelleyeceğim. –
Önyükleme 4.0-alfa için olduğu gibi, düğme türevi karışım işlevi için API, '@mixin düğme varyantı ($ background, $ border, $ active-background: koyu ($ background,% 7.5), $ active-; kenarlık: koyu ($ border, 10%)). Gelecekteki herhangi bir güncellemenin olup olmadığını görmek için lütfen dosyayı kendi bootstrap sürümünüz için 'scss/mixins/_buttons.scss' adresinden kontrol edin. – lyang