it-swarm.com.de

Wie ändern Sie die Farbe von Twitter's Bootstrap-CSS?

Ich habe heute weniger gebraucht.

Ich habe die Farbe in preboot.less geändert in:

// Color Scheme
@baseColor:         @orange;                  // Set a base color

Ich habe dann die weniger Dateien erfüllt. Es kam alles heraus, aber alles war immer noch blau.

Also habe ich die js.less-Route ausprobiert. Immer noch blau. 

17
speg

Hier ist ein Bootstrap-Theme-Generator, der von einem Bild aus funktioniert. Sie können also einfach ein Foto von Ihrer "alten" Website machen, es hier hochladen, und es wird ein Thema generiert, das Ihrem alten Farbschema entspricht!

Hinweis: Diese Site scheint momentan offline zu sein. Wenn Sie diese Funktion weiterhin benötigen, können Sie Sie können die Site über ihr Github-Repo installieren und von dort aus versuchen.

http://www.lavishbootstrap.com/

und natürlich können Sie mit Bootstrap die Farben anpassen, wenn Sie es jetzt herunterladen, aber dazu müssen Sie die Farbschemas sehr viel ausschneiden und einfügen. Das obige Werkzeug zeigt Ihnen alles ...

http://getbootstrap.com/customize/

11
Brad Parks

Möglicherweise finden Sie den Bootstrap Generator nützlich - hier können Sie Farben usw. auswählen und eine kompilierte Boostrap-CSS-Datei für Sie erstellen.

4
Phil Gyford

Wenn Sie die 2.0-wip-Version verwenden, ist dies die Vereinbarung.

die Klasse .primary verwendet die Variablen @blue und @blueDark zum Erstellen des Farbverlaufs der Schaltfläche. Diese Variablen werden in der Datei variables.less festgelegt.

In der Datei buttons.less sind die anderen Button-Klassen mit Hex-Werten hartcodiert. 

// Danger and error appear as red
  &.danger {
    .gradientBar(#ee5f5b, #c43c35);
  }
  // Success appears as green
  &.success {
    .gradientBar(#62c462, #57a957);
  }
  // Info appears as a neutral blue
  &.info {
    .gradientBar(#5bc0de, #339bb9);
  }

Sie müssen diese Hex-Werte ändern oder Variablen erstellen, mit denen Sie die Hex-Werte ersetzen. Ich bin selbst neu mit Bootstrap von Twitter, aber das scheint die Situation zu sein.

2
wuliwong

Um die Farbe Ihrer Links und .btn-primary (was sich meiner Meinung nach auf die Frage bezieht) anzupassen, passen Sie @linkColor an:

@linkColor: @orange;
0
Josh W Lewis

Dies für die # 01a4d9 Farbe BTN

.btn {
    border-color:#c5c5c5;
    border-color:rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.25);
 }

.btn-primary {
    color:#ffffff;
    text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color:#007cc5;
    background-image:-moz-linear-gradient(top, #01a4d9, #0193c5);
    background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#01a4d9),  to(#0193c5));
    background-image:-webkit-linear-gradient(top, #01a4d9, #0193c5);
    background-image:-o-linear-gradient(top, #01a4d9, #0193c5);
    background-image:linear-gradient(to bottom, #01a4d9, #0193c5);
    background-repeat:repeat-x;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0096c5', endColorstr='#ff0054c5', GradientType=0);
    border-color:#0193c5 #0193c5 #003479;
    border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    *background-color:#0193c5;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);
 }

.btn-primary:hover,.btn-primary:active,.btn-primary.active,.btn-primary.disabled,.btn-primary[disabled] {
    color:#ffffff;
    background-color:#0193c5;
    *background-color:#0049ac;
 }

.btn-primary:active,.btn-primary.active {
    background-color:#003f92 \9;
 }
0
goldyorchita

Haben Sie die Variable @orange wie folgt auf eine Farbe gesetzt

@orange: #FF2400;

0
Jason Gennaro