Gibt es eine Möglichkeit, alle .btn
Eigenschaften in Bootstrap zu ändern ? Ich habe unten versucht, aber manchmal zeigt es immer noch die standardmäßige blaue Farbe (etwa 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;
}
Antworten:
Der einfachste Weg, um zu sehen, welche Eigenschaften Sie überschreiben müssen, besteht darin, sich den Quellcode von Bootstrap anzusehen , insbesondere das
.button-variant
in mixins / button.less definierte Mixin . Sie müssen noch eine ganze Reihe von Eigenschaften außer Kraft zu setzen all das loswerden.btn-primary
Styling (zB:focus
,disabled
, Verwendung in Dropdown - Listen usw.).Ein besserer Weg könnte sein:
.btn-whatever
.button-variant
Mixin, um Ihre eigene Farbklasse zu erstellen, z.btn-whatever
quelle
Wenn Sie Standardeigenschaften in Bootstrap überschreiben möchten, müssen Sie die Eigenschaften als wichtig festlegen.
.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited { background-color: #8064A2 !important; }
Ich hoffe, das wird für Sie funktionieren.
quelle
!important
war der Schlüssel!2019 Update für Bootstrap 4
Jetzt, da Bootstrap 4 SASS verwendet, können Sie die Farbe der primären Schaltfläche mithilfe der
button-variant
Mixins einfach ändern :$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 )
Dieser SASS wird in folgendes CSS kompiliert ...
.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 )
Informationen zum Ändern der Primärfarbe für alle Klassen finden Sie unter: Anpassen der Bootstrap-CSS-Vorlage und Ändern der Bootstrap-Primärfarbe?
quelle
Ich denke, Sie haben die
.btn-primary:focus
Eigenschaft und das Komma vergessen, nachdem.btn-primary
Sie auch weniger verwendet und einige Farben in der Datei variables.less neu definiert haben.
In diesem Sinne sieht Ihr Code folgendermaßen aus:
.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited, .btn-primary:focus { background-color: #8064A2; border-color: #8064A2; }
quelle
background-image: -webkit-linear-gradient(top,#8064A2 0,#8064A2 100%);
oderbackground-image: none;
.Erstellen Sie einfach Ihre eigene Schaltfläche auf:
Prost
quelle
Sie haben einen Stil ".btn-primary: active: focus" verpasst, der dazu führt, dass während des BTN-Klicks noch eine Sekunde lang die Standard-Bootstrap-Farbe angezeigt wird. Das 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;}
quelle
Entfernen Sie die Schaltflächenfarbklasse wie "btn-success" und fügen Sie eine benutzerdefinierte Klasse wie "btn-custom" ein 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; }
quelle
Der einfachste Weg ist:
1) jeden Tastenzustand abfangen
2) Hinzufügen
!important
, um die Zustände zu überschreiben.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited, .btn-primary:focus { background-color: black !important; border-color: black !important; }
Die praktischere Methode für die Benutzeroberfläche besteht darin, den Schwebezustand der Schaltfläche dunkler als den ursprünglichen Zustand zu machen:
.btn-primary { background-color: Blue !important; border-color: Blue !important; } .btn-primary:hover, .btn-primary:active, .btn-primary:visited, .btn-primary:focus { background-color: DarkBlue !important; border-color: DarkBlue !important; }
quelle
Hier ist mein Geschmack ohne den Verlust von Schwebeflug. Ich persönlich mag es besser als den 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; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" /> <button class="btn btn-primary">Hover me!</button>
quelle
Ich war kürzlich auf ein ähnliches Problem gestoßen und konnte es durch Hinzufügen von 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; }
Achten Sie auch auf [deaktiviert] und [deaktiviert]: Hover, wenn diese Klasse bei der Eingabe verwendet wird [Typ = Senden]. So was:
body .btn-primary[disabled], body .btn-primary[disabled]:hover { background-color: #7bc143; border-color: #7bc143; }
quelle
Ich denke, die Verwendung
!important
ist keine sehr kluge Option. Dies kann zu vielen anderen Problemen führen, insbesondere wenn die Site reagiert. Meines Wissens nach ist dies der beste Weg, um die CSS-Klasse für benutzerdefinierte Schaltflächen mit der.btn
Bootstrap-Klasse zu verwenden..btn
ist die Basisstilklasse für die Bootstrap-Schaltfläche. Behalten Sie also das Layout bei, wir können andere Stile mithilfe unserer benutzerdefinierten CSS-Klasse ändern. Noch eine zusätzliche Sache, die ich hier erwähnen möchte. Einige Leute versuchen, blaue Umrisse von den Schaltflächen zu entfernen. Es ist keine gute Idee, da dieses Problem mit der Barrierefreiheit bei der Verwendung der Tastatur auftritt. Ändern Sieoutline-color:
stattdessen die Farbe mit .quelle
Hinzufügen einer Schritt-für-Schritt-Anleitung zu der obigen Antwort von @ Codeply-er für SASS / SCSS-Neulinge wie mich.
btnCustom.scss
./* import the necessary Bootstrap files */ @import 'bootstrap'; /* Define color */ $mynewcolor:#77cccc; .btn-custom { @include button-variant($mynewcolor, darken($mynewcolor, 7.5%), darken($mynewcolor, 10%), lighten($mynewcolor,5%), lighten($mynewcolor, 10%), darken($mynewcolor,30%)); } .btn-outline-custom { @include button-outline-variant($mynewcolor, #222222, lighten($mynewcolor,5%), $mynewcolor); }
_bootstrap.scss
Datei wie folgt erstellen . Dadurch kann der Compiler auf die Bootstrap-Funktionen und -Variablen zugreifen.@import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; @import "bootstrap/scss/mixins"; @import "bootstrap/scss/root"; @import "bootstrap/scss/reboot"; @import "bootstrap/scss/type"; @import "bootstrap/scss/images"; @import "bootstrap/scss/grid"; @import "bootstrap/scss/tables"; @import "bootstrap/scss/forms"; @import "bootstrap/scss/buttons"; @import "bootstrap/scss/utilities";
btnCustom.scss
mit dem zuvor heruntergeladenen Compiler nach CSS.quelle
Ich bin nicht der OP dieser Antwort, aber es hat mir so geholfen:
Ich wollte die Farbe der nächsten / vorherigen Schaltflächen des Bootstrap-Karussells auf meiner Homepage ändern.
Lösung: Kopieren Sie die Selektornamen aus bootstrap.css und verschieben Sie sie in Ihre eigene style.css (mit Ihren eigenen Einstellungen ..):
.carousel-control-prev-icon, .carousel-control-next-icon { height: 100px; width: 100px; outline: black; background-size: 100%, 100%; border-radius: 50%; border: 1px solid black; background-image: none; } .carousel-control-next-icon:after { content: '>'; font-size: 55px; color: red; } .carousel-control-prev-icon:after { content: '<'; font-size: 55px; color: red; }
quelle