webentwicklung-frage-antwort-db.com.de

So ändern Sie die Btn-Farbe in Bootstrap

Gibt es eine Möglichkeit, alle .btn-Eigenschaften in Bootstrap zu ändern? Ich habe es unten versucht, aber manchmal zeigt es immer die Standardfarbe Blau (sagen Sie nach dem Klicken und Entfernen der Maus usw.). Wie kann ich das gesamte Thema insgesamt ändern?

.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {
    background-color: #8064A2;
}
39
Sam

Der einfachste Weg, um herauszufinden, welche Eigenschaften Sie überschreiben müssen, ist der Bootstrap-Quellcode , insbesondere das in mixins/buttons.less definierte .button-variant mixin. Sie müssen immer noch eine Menge Eigenschaften überschreiben, um das gesamte .btn-primary-Styling (z. B. :focus, disabled, Verwendung in Dropdown-Listen usw.) zu entfernen.

Ein besserer Weg könnte sein:

  1. Erstellen Sie Ihre eigene angepasste Version von Bootstrap mit dem Online-Anpassungstool von Bootstrap
  2. Erstellen Sie manuell Ihre eigene Farbklasse, z. .btn-whatever
  3. Verwenden Sie einen LESS-Compiler und erstellen Sie mit .button-variant mixin Ihre eigene Farbklasse, z. .btn-whatever
15
ckuijjer

Wenn Sie Standardeinstellungen in Bootstrap überschreiben möchten, müssen Sie die Eigenschaften als wichtig definieren.

.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {
    background-color: #8064A2 !important;
}

ich hoffe, das funktioniert für Sie.

47
Gold Pearl

Ich denke, Sie haben .btn-primary:focus Eigenschaft und Komma nach .btn-primary vergessen

Sie können auch weniger Farben verwenden und einige Farben in der Datei variables.less neu definieren

In diesem Sinne wird Ihr Code so aussehen:

.btn-primary,
.btn-primary:hover,
.btn-primary:active,
.btn-primary:visited,
.btn-primary:focus {
    background-color: #8064A2;
    border-color: #8064A2;
}

28

2018 Update für Bootstrap 4

Da Bootstrap 4 nun SASS verwendet, können Sie ändern Sie die primäre Farbe der Schaltflächen mit den button-variant mixins:

$mynewcolor:#77cccc;

.btn-primary {
    @include button-variant($mynewcolor, darken($mynewcolor, 7.5%), darken($mynewcolor, 10%), lighten($mynewcolor,5%), lighten($mynewcolor, 10%), darken($mynewcolor,30%));
}

.btn-outline-primary {
    @include button-outline-variant($mynewcolor, #222222, lighten($mynewcolor,5%), $mynewcolor);
}

https://www.codeply.com/go/2bHYxYSC0n (SASS-Demo)

Diese SASS kompiliert sich in das folgende CSS ...

.btn-primary {
    color: #212529;
    background-color: #7cc;
    border-color: #5bc2c2
}

.btn-primary:hover {
    color: #212529;
    background-color: #52bebe;
    border-color: #8ad3d3
}

.btn-primary:focus,
.btn-primary.focus {
    box-shadow: 0 0 0 .2rem rgba(91, 194, 194, 0.5)
}

.btn-primary.disabled,
.btn-primary:disabled {
    color: #212529;
    background-color: #7cc;
    border-color: #5bc2c2
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show>.btn-primary.dropdown-toggle {
    color: #212529;
    background-color: #9cdada;
    border-color: #2e7c7c
}

.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.show>.btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(91, 194, 194, 0.5)
}

.btn-outline-primary {
    color: #7cc;
    background-color: transparent;
    background-image: none;
    border-color: #7cc
}

.btn-outline-primary:hover {
    color: #222;
    background-color: #8ad3d3;
    border-color: #7cc
}

.btn-outline-primary:focus,
.btn-outline-primary.focus {
    box-shadow: 0 0 0 .2rem rgba(119, 204, 204, 0.5)
}

.btn-outline-primary.disabled,
.btn-outline-primary:disabled {
    color: #7cc;
    background-color: transparent
}

.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.show>.btn-outline-primary.dropdown-toggle {
    color: #212529;
    background-color: #8ad3d3;
    border-color: #7cc
}

.btn-outline-primary:not(:disabled):not(.disabled):active:focus,
.btn-outline-primary:not(:disabled):not(.disabled).active:focus,
.show>.btn-outline-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(119, 204, 204, 0.5)
}

https://www.codeply.com/go/lD3tUE01lo (CSS-Demo)


Um die Primärfarbe für alle -Klassen zu ändern, siehe: Anpassen der Bootstrap-CSS-Vorlage und Wie ändert man die Primärfarbe des Bootstraps?

13
Zim

Erstellen Sie einfach Ihren eigenen Button:

Prost

10
Ron

Sie haben einen Stil ".btn-primary: active: focus" verpasst, der dazu führt, dass während des btn-Klickens die Standard-Bootstrap-Farbe für eine Sekunde angezeigt wird . Dies funktioniert in meinem Code:

.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited, .btn-primary:focus, .btn-primary:active:focus {
background-color: #8064A2;}
3

Ich hatte kürzlich ein ähnliches Problem und konnte es mit Klassen beheben

  body .btn-primary {
    background-color: #7bc143;
    border-color: #7bc143;
    color: #FFF; }
    body .btn-primary:hover, body .btn-primary:focus {
      border-color: #6fb03a;
      background-color: #6fb03a;
      color: #FFF; }
    body .btn-primary:active, body .btn-primary:visited, body .btn-primary:active:focus, body .btn-primary:active:hover {
      border-color: #639d34;
      background-color: #639d34;
      color: #FFF; }

Beachten Sie auch [disabled] und [disabled]: hover, wenn diese Klasse für die Eingabe [type = submit] verwendet wird. So was:

body .btn-primary[disabled], body .btn-primary[disabled]:hover {
  background-color: #7bc143;
  border-color: #7bc143; }
1
Taika

Entfernen Sie die Schaltfläche Farbklasse wie "BTN-Erfolg" und setzen Sie eine benutzerdefinierte Klasse wie "BTN-Benutzerdefiniert" und schreiben Sie CSS für diese Klasse. Das funktioniert einfach bei mir.

HTML :

<button class="btn btn-block login " type="submit">Sign In</button>

CSS:

 .login  {
    background-color: #0057fc;
    color: white;   
}
0
Manab Das

Ich denke, dass !important keine sehr kluge Option ist. Dies kann zu vielen anderen Problemen führen, insbesondere wenn die Site reaktionsfähig ist. Nach meinem Verständnis ist dies der beste Weg, um eine benutzerdefinierte Button-CSS-Klasse mit der .btn-Bootstrap-Klasse zu verwenden. .btn ist die Basisstilklasse für die Bootstrap-Schaltfläche. Behalten Sie dies als Layout bei, wir können andere Stile mit unserer benutzerdefinierten CSS-Klasse ändern. Noch etwas, was ich hier erwähnen möchte. Einige Leute versuchen, blaue Konturen von den Schaltflächen zu entfernen. Dies ist keine gute Idee, da dieses Problem bei der Verwendung der Tastatur auftritt. Ändern Sie die Farbe stattdessen mit outline-color:.

0
Tharanga

Hier ist mein Geschmack ohne Schwebeverlust. Mir persönlich gefällt es besser als der Standard bootstrap Übergang!

.btn-primary, .btn-primary:active, .btn-primary:visited {
    background-color: #8064A2 !important;
}

.btn-primary:hover {
    background-color: #594671 !important;
    transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
}
0
clamchoda