Styling Twitter Bootstrap 3.x Tasten

Question

Twitter's Bootstrap 3 Schaltflächen sind in Farben begrenzt. Standardmäßig wird es 7 Farben sein (default primäre, Fehler, Warnung, Info, Erfolg und Link) Siehe:

Jede Taste bekam 3 Zustand (default, aktiv und deaktiviert)

Wie können Sie weitere Farben hinzufügen oder benutzerdefinierte Schaltflächen erstellen? Diese Frage wurde bereits für das Bootstrap 2.x von Twitter beantwortet: Styling twitter bootstrap buttons. Bootstrap 3 ist nicht abwärtskompatibel. Es wird viele Änderungen in den Dateien less und css geben. Unterstützung für IE7 wird fallengelassen. TB3 ist zuerst mobil. Markup-Codes werden ebenfalls geändert.

Answer 1

Fügen Sie Ihren weniger Dateien zusätzliche Farben hinzu und kompilieren Sie sie neu. Siehe auch Twitter Bootstrap Customization Best Practices. Update

Wie seit v3.0.3 Verwendung von @ ow3n erwähnt:

.btn-custom { 
    .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border); 
} 

Hinweis in den obigen @btn-default-color setzt die Schriftfarbe, @btn-default-bg die Hintergrundfarbe und @ btn-default-Grenze der Farbe die Grenze. Farben für Zustände wie aktiv, Hover und deaktiviert werden basierend auf diesen Parametern berechnet.

Zum Beispiel:

.btn-custom { 
    .button-variant(blue; red; green); 
} 

bewirkt:

Denn wer will die CSS direkt verwenden, ersetzen Sie die Farben in diesem Code:

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

Ende Aktualisierung

eine benutzerdefinierte Schaltfläche generieren:

.btn-custom { 
    .btn-pseudo-states(@yourColor, @yourColorDarker); 
} 

oben Das wird die folgende CSS erzeugen:

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

In der oben # 1dcc00 Ihre individuelle Farbe und # 19b300 Ihre dunklere Farbe sein. Anstelle der weniger Lösung können Sie diese CSS auch direkt zu Ihren HTML-Dateien hinzufügen (nach dem Bootstrap CSS).

Oder erhalten Sie Ihre CSS-Code direkt von Twitter's Bootstrap 3 Button Generator

Answer 2

Ich habe für eine mögliche Lösung für eine ganze Weile suchen Bootstrap-Tasten stilisieren. Ich folgte der neuesten CSS-Stil-Sprache (weniger http://lesscss.org/), und einige Workarounds, um die Schaltflächen anzupassen, aber keiner von ihnen war nützlich. Es gibt ziemlich erstaunliche Bootstrap-Button-Generatoren online wie http://www.plugolabs.com/twitter-bootstrap-button-generator/ und viele mehr. Aber zu meiner Überraschung funktionierte eine Codezeile in der CSS-Datei einigermaßen gut für mich. (Hinweis: Anstelle von "Hintergrundfarbe" habe ich "background" als Parameter verwendet, um den Namen der Schaltflächenfarbe anzugeben. Im HTML-Code habe ich btn-custom als den Klassennamen verwendet, den ich in der CSS neu definiert habe Datei.)

HTML-Code

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

CSS-Code

.btn-custom { 
    background: #colorname; 
} 

Answer 3

Es ist ziemlich einfach, dies mit nicht verarbeiteten CSS zu tun, wie gut

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 an: http://jsfiddle.net/z7hV6/

Answer 4

Nachdem diese Lösung über Google zu finden und das Verständnis der Bootstrap-Tasten besser fand ich folgendes Werkzeug verschiedene Farben für Bootstrap-Tasten zu erzeugen.

Es bedeutet, dass Sie dies zu einem separaten CSS hinzufügen müssen, aber es ist perfekt für das, was ich brauchte. Hier hofft, dass es für andere nützlich ist:

http://twitterbootstrap3buttons.w3masters.nl/

Answer 5

hier eine schöne und einfache Möglichkeit, zusätzliche Bootstrap-Taste Farben

Bootstrap Button Generator

Below stylen up wird eine Probe des CSS wird es generieren:

.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

Hier ist eine weitere Alternative mit dem Vorteil, dass Sie so viele "Tastenaktionen" (Farben) hinzufügen können wie du willst. Hier kurze Demo-Video: Using Unicorn-UI Buttons with Twitter Bootstrap

Wenn Sie die Bibliothek greifen und selbst kompilieren, können Sie so viele „Button-Aktionen“, definiert durch eine Sass Liste bearbeiten, die wie folgt aussieht:

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

Hinzufügen so viele benutzerdefinierte Typen als Sie möchten (und natürlich auch diejenigen entfernen, die Sie nicht brauchen).