So ändern Sie die BTN-Farbe in Bootstrap

81

Gibt es eine Möglichkeit, alle .btnEigenschaften 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;
}
Sam
quelle
Sie können einfach override_default.css erstellen und es in der nächsten Zeile der Bootstrap-Bibliothek css einfügen. Anschließend können Sie alles überschreiben.
Kunst-Fan-Vikram

Antworten:

29

Der einfachste Weg, um zu sehen, welche Eigenschaften Sie überschreiben müssen, besteht darin, sich den Quellcode von Bootstrap anzusehen , insbesondere das .button-variantin mixins / button.less definierte Mixin . Sie müssen noch eine ganze Reihe von Eigenschaften außer Kraft zu setzen all das loswerden .btn-primaryStyling (zB :focus, disabled, Verwendung in Dropdown - Listen usw.).

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 WENIGER Compiler und verwenden Sie das .button-variantMixin, um Ihre eigene Farbklasse zu erstellen, z.btn-whatever
ckuijjer
quelle
Ich denke auch, dass das Erstellen einer angepassten Version von Bootstrap der ideale Weg sein sollte, um dies zu erreichen, da möglicherweise viele Eigenschaften geändert werden müssen. Vielen Dank.
Sam
in Schritt 3 - Ich versuche, WENIGER Mixin bei Verwendung von .btn-primary zu erstellen, aber: hover funktioniert nicht. Wie soll ich den Schwebezustand mischen?
Jewgenij Afanasjew
78

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.

Goldperle
quelle
8
Das !importantwar der Schlüssel!
Cdonts
5
Dies ist keine gute Möglichkeit, Bootstrap zu ändern. Die Änderungen sollten über Less- oder Sass-Variablen vorgenommen werden, wenn Sie Ihr eigenes benutzerdefiniertes Bootstrap-CSS erstellen.
Tim
Wenn Sie nur eine Verknüpfung zu Bootstrap herstellen, bevor Sie eine Verknüpfung zu Ihrem benutzerdefinierten Stylesheet herstellen, hat Ihr benutzerdefiniertes Stylesheet Vorrang.
dillon.harless
42

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-variantMixins 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?

Zim
quelle
Dieser Beitrag hat mir beim Erstellen eines lila Buttons geholfen, wie auf der Homepage von Bootstrap zu sehen.
Priyamtheone
Und für die Langsamen wie mich ist zu beachten, dass Sie das Überschreiben ausführen müssen, nachdem Sie den Bootstrap selbst importiert haben, da dieser Import das Material enthält, das Sie einschließen und neu definieren möchten.
Philw
34

Ich denke, Sie haben die .btn-primary:focusEigenschaft 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;
}

Semyon Zhikharev
quelle
Dann gibt es Randfarbe, die immer noch blau bleibt. Ich denke, weniger ist der richtige Weg, oder?
Sam
Sie können den Rand auch neu definieren.
Semyon Zhikharev
Ich musste auch das Hintergrundbild ändern, bevor es die Farbe änderte: background-image: -webkit-linear-gradient(top,#8064A2 0,#8064A2 100%);oder background-image: none;.
SharpC
13

Erstellen Sie einfach Ihre eigene Schaltfläche auf:

Prost

Ron
quelle
Das ist schön und einfach
ow3n
6

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;}
Stanislav Vincent
quelle
Sie haben das Problem gesehen, das andere nicht gesehen haben, aber das behebt es nicht für mich.
Steve Lautenschlager
4

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;   
}
Manab Das
quelle
4

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;
}
GavinBelson
quelle
3

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>

Clamchoda
quelle
1

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; }
Taika
quelle
0

Ich denke, die Verwendung !importantist 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 .btnBootstrap-Klasse zu verwenden. .btnist 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 Sie outline-color:stattdessen die Farbe mit .

Tharanga
quelle
0

Hinzufügen einer Schritt-für-Schritt-Anleitung zu der obigen Antwort von @ Codeply-er für SASS / SCSS-Neulinge wie mich.

  1. Speichern 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);
}
  1. Laden Sie einen SASS-Compiler wie Koala herunter, damit die obige SCSS-Datei zu CSS kompiliert werden kann.
  2. Klonen Sie das Bootstrap- Github-Repo, da der Compiler irgendwo die Mixins der Button-Variante benötigt.
  3. Importieren Sie Bootstrap-Funktionen explizit, indem Sie eine _bootstrap.scssDatei 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";
  1. Kompilieren Sie btnCustom.scssmit dem zuvor heruntergeladenen Compiler nach CSS.
Adam
quelle
0

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;
}

Nebisis
quelle