it-swarm.com.de

Styling der Twitter Bootstrap 3.x Buttons

Twitter's Bootstrap Buttons sind farblich begrenzt. Standardmäßig wird es geben 5 7 Farben (Standardprimär, Fehler, Warnung, Info, Erfolg und Link) Siehe:

enter image description here

Twitter's Bootstrap Buttons

Jeder Button hat 3 Status (Standard, Aktiv und Deaktiviert)

Wie füge ich weitere Farben hinzu oder erstelle benutzerdefinierte Schaltflächen? Diese Frage wurde bereits für die Schaltflächen Bootstrap 2.x von Twitter beantwortet: Gestaltung der Schaltflächen bootstrap von Twitter . Bootstrap 3 ist nicht abwärtskompatibel. Es wird viele Änderungen in den less- und css-Dateien geben. Die Unterstützung für IE7 wird eingestellt. TB3 ist zuerst mobil. Markup-Codes werden ebenfalls geändert.

37
Bass Jobsen

Fügen Sie Ihren wenigen Dateien zusätzliche Farben hinzu und kompilieren Sie sie erneut. Siehe auch Twitter Bootstrap Customization Best Practices . update

Wie von @ ow3n seit v3.0.3 erwähnt, verwenden Sie:

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

Beachten Sie in der obigen @btn-default-color legt die Schriftfarbe fest, @btn-default-bg die Hintergrundfarbe und @ btn-default-border die Farbe des Rahmens. Farben für Status wie Aktiv, Schwebend und Deaktiviert werden basierend auf diesen Parametern berechnet.

Beispielsweise:

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

wird darin enden, dass:

enter image description here

Wenn Sie CSS direkt verwenden möchten, 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;
}

Update beenden

So generieren Sie eine benutzerdefinierte Schaltfläche:

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

Das Obige generiert das folgende 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;
}

Im obigen Beispiel ist # 1dcc00 Ihre benutzerdefinierte Farbe und # 19b300 Ihre dunklere Farbe. Anstelle der weniger Lösung können Sie diese CSS auch direkt zu Ihren HTML-Dateien hinzufügen (nach dem bootstrap css).

Oder holen Sie sich Ihren CSS-Code direkt von Twitter's Bootstrap 3 Button Generator

49
Bass Jobsen

Dies ist auch mit unverarbeitetem CSS recht einfach zu bewerkstelligen

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>

Geige bei: http://jsfiddle.net/z7hV6/

17
Matt Lambert

Nachdem ich diese Lösung über Google gefunden und die bootstrap Buttons besser verstanden habe, habe ich das folgende Tool gefunden, um verschiedene Farben für bootstrap Buttons zu generieren.

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

http://twitterbootstrap3buttons.w3masters.nl/

3
Onimusha

Hier ist eine schöne und einfache Möglichkeit, zusätzliche Bootstrap Tastenfarben zu erstellen

Bootstrap Button Generator

Unten sehen Sie ein Beispiel für das CSS, das generiert wird:

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

Ich habe eine ganze Weile nach einer möglichen Lösung gesucht, um bootstrap buttons zu stylen. Ich habe mich an die neueste CSS-Stilsprache gehalten (less http://lesscss.org/ ), und einige Problemumgehungen, um die Schaltflächen anzupassen, aber keine von ihnen war nützlich. Es gibt ziemlich erstaunliche bootstrap Schaltflächengeneratoren wie http: //www.plugolabs .com/Twitter-bootstrap-button-generator / und viele mehr. Aber zu meiner Überraschung funktionierte eine Codezeile in der CSS-Datei für mich anständig gut. (Hinweis: Statt "Hintergrundfarbe" habe ich benutze "background" als Parameter, um den Namen der Button-Farbe anzugeben. Im HTML-Code habe ich btn-custom als Klassennamen verwendet, den ich in der CSS-Datei neu definiert habe.)

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

Hier ist eine weitere Alternative mit dem Vorteil, dass Sie so viele "Tastenaktionen" (Farben) hinzufügen können, wie Sie möchten. Hier ist ein kurzes Demo-Video: Verwenden von Unicorn-UI-Schaltflächen mit Twitter Bootstrap

Wenn Sie sich die Bibliothek schnappen und selbst kompilieren, können Sie so viele "Schaltflächenaktionen" definieren, indem Sie 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;

Sie können beliebig viele benutzerdefinierte Typen hinzufügen (und natürlich auch diejenigen entfernen, die Sie nicht benötigen).

0
Rob