Styling Twitter'ın Bootstrap 3.x Düğmeleri

Question

Twitter's Bootstrap 3 düğmelerinin renkleri sınırlıdır. Varsayılan olarak 7 renk (varsayılan birincil, hata, uyarı, bilgi, başarı ve bağlantı) Bkz olacak:

Her buton var 3 devlet (varsayılan, aktif ve devre dışı bırakıldı)

Daha fazla renk ekleme veya özel düğme oluşturma nasıldır? Bu soru Twitter'ın Bootstrap 2.x: Styling twitter bootstrap buttons için zaten yanıtladı. Önyükleme 3 geriye doğru uyumlu değildir. Daha az ve css dosyalarında çok fazla değişiklik olacak. IE7 desteği düşürülecek. TB3 önce mobildir. İşaretleme kodları da değişecektir.

Answer 1

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

Answer 2

doğrudan sizin css kodunu almak. En son css stil dilini (daha az http://lesscss.org/) ve düğmelerini özelleştirmek için birkaç geçici çözüm takip ettim, ancak bunların hiçbiri yararlı değildi. http://www.plugolabs.com/twitter-bootstrap-button-generator/ ve daha birçokları gibi çevrimiçi olarak mevcut oldukça şaşırtıcı bir önyükleme düğmesi jeneratörü var. Ama benim için sürpriz bir şekilde css dosyasında bir satır kod benim için iyi çalıştı. (Not: "Arka plan rengi" yerine, düğme renginin adını belirtmek için "arka plan" işlevini kullandım. Html kodunda, ctr içinde yeniden tanımladığım sınıf adı olarak btn-custom kullanmıştım. dosya.)

HTML Kod

<a href="#" target="_blank" class="btn btn-custom pull-right"> 
<i class="fa fa-edit fa-lg"></i> 
Create an Event 
</a> 

CSS Kod

.btn-custom { 
    background: #colorname; 
} 

Answer 3

O da işlenmemiş css ile bunu yapmak oldukça kolay

CSS

.btn-purple { 
    background: #9b59b6; 
    border-color: #9b59b6; 
} 

.btn-purple:hover { 
    background: #8e44ad; 
    border-color: #8e44ad; 
} 

.btn-teal { 
    background: #1abc9c; 
    border-color: #1abc9c; 
} 

.btn-teal:hover { 
    background: #16a085; 
    border-color: #16a085; 
} 

0 En

HTML

<button class="btn btn-purple">purple</button> 

<button class="btn btn-teal">teal</button> 

Fiddle: google üzerinden bu çözüm bulma ve önyükleme düğmelerini anladıktan sonra http://jsfiddle.net/z7hV6/

Answer 4

daha iyi ben önyükleme düğmeleri için farklı renkler üretmek için aşağıdaki aracı buldum.

Bu, ayrı bir css'ye eklemeniz gerekeceği anlamına gelir, ancak ihtiyacım olan şey için mükemmeldir. İşte başkalarına yararlıdır umuyor: Burada

Answer 5

http://twitterbootstrap3buttons.w3masters.nl/ ek Bootstrap düğme renkleri

Aşağıda

Bootstrap Button Generator

kadar stil için güzel ve kolay bir yoldur o üretecektir CSS örnek:

.btn-sample { 
    color: #ffffff; 
    background-color: #611BBD; 
    border-color: #130269; 
} 

.btn-sample:hover, 
.btn-sample:focus, 
.btn-sample:active, 
.btn-sample.active, 
.open .dropdown-toggle.btn-sample { 
    color: #ffffff; 
    background-color: #49247A; 
    border-color: #130269; 
} 

.btn-sample:active, 
.btn-sample.active, 
.open .dropdown-toggle.btn-sample { 
    background-image: none; 
} 

.btn-sample.disabled, 
.btn-sample[disabled], 
fieldset[disabled] .btn-sample, 
.btn-sample.disabled:hover, 
.btn-sample[disabled]:hover, 
fieldset[disabled] .btn-sample:hover, 
.btn-sample.disabled:focus, 
.btn-sample[disabled]:focus, 
fieldset[disabled] .btn-sample:focus, 
.btn-sample.disabled:active, 
.btn-sample[disabled]:active, 
fieldset[disabled] .btn-sample:active, 
.btn-sample.disabled.active, 
.btn-sample[disabled].active, 
fieldset[disabled] .btn-sample.active { 
    background-color: #611BBD; 
    border-color: #130269; 
} 

.btn-sample .badge { 
    color: #611BBD; 
    background-color: #ffffff; 
} 

Answer 6

Çok sayıda "düğme eylemi" ekleyebilme avantajına sahip başka bir alternatif (renkler) istediğin gibi. İşte kısa demo video yer almaktadır:

$ubtn-colors: ('primary' #1B9AF7 #FFF) ('plain' #FFF #1B9AF7) ('inverse' #222 #EEE) ('action' #A5DE37 #FFF) ('highlight' #FEAE1B #FFF)('caution' #FF4351 #FFF) ('royal' #7B72E9 #FFF) !default; 

sayıda özel tipleri gibi ekleme: Using Unicorn-UI Buttons with Twitter Bootstrap

Eğer kütüphane kapmak ve kendinizi derlemek, gibi görünen bir Sass liste düzenleyerek birçok "butonu eylemleri" olarak tanımlanan olabilir İstersiniz (ve tabii ki de ihtiyacınız olmayanları da).