Stylizacja przycisków Bootstrap 3.x na Twitterze Przyciski

Question

Twitter's Bootstrap 3 mają ograniczone kolory. Domyślnie będzie 7 kolorów (domyślnie podstawowy, błąd, ostrzeżenie, informacja, sukces i łącznik) Patrz:

Każdy przycisk dostał 3 stan (domyślnie aktywny i wyłączone)

Jak dodać więcej kolorów lub utworzyć niestandardowe przyciski? Na to pytanie odpowiada już Bootstrap 2.x: Styling twitter bootstrap buttons na Twitterze. Bootstrap 3 nie jest kompatybilny wstecznie. W plikach less i css będzie dużo zmian. Wsparcie dla IE7 zostanie usunięte. TB3 jest najpierw mobilny. Kody znaczników również zostaną zmienione.

Answer 1

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

Answer 2

czekałem na możliwe rozwiązanie na dłuższą chwilę do stylizacji bootstrap przycisków. Śledziłem najnowszy język w stylu css (mniej http://lesscss.org/) i kilka obejść, aby dostosować przyciski, ale żaden z nich nie był przydatny. W Internecie dostępne są całkiem niesamowite generatory przycisków startowych, takie jak http://www.plugolabs.com/twitter-bootstrap-button-generator/ i wiele innych. Ale ku mojemu zdziwieniu skromnie jedna linia kodu w pliku css pracowała dla mnie całkiem dobrze. (Uwaga: Zamiast "kolor tła" użyłem "tła" jako parametru do określenia nazwy koloru przycisku.W kodzie HTML użyłem btn-custom jako nazwy klasy, które mam na nowo zdefiniowane w css plik.)

HTML kod

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

kod CSS

.btn-custom { 
    background: #colorname; 
} 

Answer 3

Jest to dość proste do zrobienia tego z nieprzetworzonego css oraz

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; 
} 

HTML

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

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

Fiddle w: http://jsfiddle.net/z7hV6/

Answer 4

Po znalezieniu takiego rozwiązania poprzez google i zrozumieniu przycisków bootstrap lepiej Znalazłem następujące narzędzia do generowania różnych kolorów dla przycisków startowej.

To znaczy, że musisz dodać to do oddzielnego css, ale jest idealny do tego, czego potrzebowałem. Oto nadzieję, że to przydatne dla innych:

http://twitterbootstrap3buttons.w3masters.nl/

Answer 5

tutaj jest miły i łatwy sposób projektować dodatkowych Bootstrap przycisk kolory

Bootstrap Button Generator

Poniżej próbka CSS będzie generować:

.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

Oto kolejna alternatywa z tą zaletą, że można dodać tyle "przycisków" (kolory) jak chcesz. Oto krótki film demonstracyjny: Using Unicorn-UI Buttons with Twitter Bootstrap

Jeśli chwycić biblioteki i skompilować samemu, można zdefiniować jako wielu „działań przycisk” edytując listę Sass, która wygląda tak:

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

Dodanie jak wielu typów niestandardowych jak chciałbyś (i oczywiście także usunąć te, których nie potrzebujesz).