Zusätzliche Twitter Bootstrap-Label/Schaltfläche/Alarm/Abzeichen Farben

Question

Gibt es eine fertige Pack für Bootstrap, um zusätzliche Farben, andere als die Standardfarben hinzuzufügen?

Standardfarben sind (Label Beispiel):

<span class="label">Default</span> 
<span class="label label-success">Success</span> 
<span class="label label-warning">Warning</span> 
<span class="label label-important">Important</span> 
<span class="label label-info">Info</span> 
<span class="label label-inverse">Inverse</span> 

Answer 1

Einige 3rd-Party speziellen Wünsche erfüllen Farben hinzugefügt haben, aber ich bin mir nicht bewusst ein "ready-Pack verwenden". Es ist einfach, eigene hinzuzufügen, indem Sie einfach das CSS erweitern. Zum Beispiel hier sind "soziale" Tasten ..

CSS

.btn-facebook { 
    background-color:#3b5998; 
    color:#fff; 
} 
.btn-google { 
    background-color:#dd4b39; 
    color:#fff; 
} 
.btn-twitter { 
    background-color:#2ba9e1; 
    color:#fff; 
} 
.btn-pinterest { 
    background-color:#cb2027; 
    color:#fff; 
} 
.btn-tumblr { 
    background-color:#2c4762; 
    color:#fff; 
} 

Nutzungs

<button class="btn btn-facebook btn-lg">Facebook</button> 

EDIT

Sie auch CSS Platzhalter verwenden könnte Selektoren, um solche Stile zu erstellen.

Apple-Farben-Demo: http://bootply.com/112999

Answer 2

können Sie schnell und einfach Ihren eigenen Farbsatz für Etiketten-Set, mit dieser Art von CSS:

.label-default { 
    background-color: #999; 
} 
.label-default[href]:hover, 
.label-default[href]:focus { 
    background-color: #808080; 
} 
.label-primary { 
    background-color: #428bca; 
} 
.label-primary[href]:hover, 
.label-primary[href]:focus { 
    background-color: #3071a9; 
} 
.label-success { 
    background-color: #5cb85c; 
} 
.label-success[href]:hover, 
.label-success[href]:focus { 
    background-color: #449d44; 
} 
.label-info { 
    background-color: #5bc0de; 
} 
.label-info[href]:hover, 
.label-info[href]:focus { 
    background-color: #31b0d5; 
} 
.label-warning { 
    background-color: #f0ad4e; 
} 
.label-warning[href]:hover, 
.label-warning[href]:focus { 
    background-color: #ec971f; 
} 
.label-danger { 
    background-color: #d9534f; 
} 
.label-danger[href]:hover, 
.label-danger[href]:focus { 
    background-color: #c9302c; 
} 

Hier sind 2 Sätze:

• Standard: #95a5a6/#7f8c8d
• primär: #3498db/#2980b9
• Erfolg: #2ecc71/#27ae60
• info: #9b59b6/#8e44ad
• Warnung: #e67e22/#d35400
• Gefahr: #e74c3c/#c0392b

• default: #95a5a6/#7f8c8d
• primär: #00A388/#007D68
• Erfolg: #79BD8F/#659E78
• info: #BEEB9F/#A5CC8A
• Warnung: #FFFF9D/#D1D181
• Gefahr: #FF6138/#D6512F

Bootply example

Answer 3

Obwohl die OP ist für ein "ready-to-use-Pack" zu fragen, ich auf diesem während stolperte etwas selbst suchen. Bootstrap Button Generator bietet ein totes einfaches Online-Tool zum schnellen Erstellen zusätzlicher Schaltflächenfarben.

Auch diese, wird es die HTML und CSS für eine benutzerdefinierte Schaltfläche bauen aus: http://www.tutorialrepublic.com/twitter-bootstrap-button-generator.php

Answer 4

Obwohl zessx Antwort richtig ist, vielleicht noch einige Benutzer nicht verstehen, dass die Lösung für die Schaffung von Marken gültig ist neue Klassen, wie mein Beispiel unten:

.label-alarm { 
    background-color: #e0e000; 
} 
.label-alarm[href]:hover, 
.label-alarm[href]:focus { 
    background-color: #e0e12; 
} 

Durch diesen Code hinzufügen, werden wir eine neue Label-Klasse "Label-Alarm" neben all Standard-Bootstrap-Klassen (Label-default, Label-Primär usw. genannt haben)

Answer 5

Ich bin es ing dies mit dem Bootstrap weniger Mixins für Knöpfe, und so etwas wie die folgenden:

@import "path/to/bootstrap/mixins/buttons.less"; 
// Danger and error appear as red 
.btn-sample { 
    .button-variant(@btn-sample-color; @btn-sample-bg; @btn-sample-border); 
} 

Das spart Ihnen viel Zeit und mögliche Fehler über benutzerdefinierte CSS zu schreiben, vor allem, wenn Sie Etiketten möchten, Knöpfe, Platten, etc , alles in deiner neuen Farbe.

Aus welchen Gründen auch immer, ich kann keine Informationen über diese Option auf der Bootstrap Website finden, aber hier ist ein Dritte Leitfaden für einige diese Optionen: https://www.sitepoint.com/less-beyond-basics-bootstrap-mixins-library/