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;
}
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:
.btn-whatever
.button-variant
mixin Ihre eigene Farbklasse, z. .btn-whatever
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.
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;
}
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?
Erstellen Sie einfach Ihren eigenen Button:
Prost
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;}
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; }
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;
}
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:
.
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;
}