Wie ändere ich die Bootstrap-Primärfarbe?

93

Ist es möglich, die Bootstrap-Primärfarbe so zu ändern, dass sie mit der Markenfarbe übereinstimmt? In meinem Fall verwende ich das Papiermotiv von Bootswatch.

css  twitter-bootstrap  twitter-bootstrap-3  bootstrap-4 
— ashishjmeshram
quelle
1
Mögliches Duplikat von Wie man die BTN-Farbe in Bootstrap
— ändert
Ja, überschreiben Sie es einfach in Ihrer benutzerdefinierten CSS-Datei, aber Sie müssen viele verschiedene Regeln für jedes der Elemente und deren Status (aktiv, Hover, Fokus usw.) anwenden
— Lee
3
Anstatt das CSS zu überschreiben, empfehle ich die Verwendung des Customizing-Tools getbootstrap.com/customize
— blurfus

Antworten:

94

Update 2020 für Bootstrap 4

Um die Primärfarbe oder eine der Themenfarben in Bootstrap 4 SASS zu ändern , legen Sie vor dem Import die entsprechenden Variablen fest bootstrap.scss. Dadurch kann Ihr benutzerdefiniertes scss die! Standardwerte überschreiben ...

$primary: purple;
$danger: red;

@import "bootstrap";

Demo: https://codeply.com/go/f5OmhIdre3

In einigen Fällen möchten Sie möglicherweise eine neue Farbe aus einer anderen vorhandenen Bootstrap-Variablen festlegen . Dazu @importieren Sie zuerst die Funktionen und Variablen, damit in den Anpassungen auf sie verwiesen werden kann ...

/* import the necessary Bootstrap files */
@import "bootstrap/functions";
@import "bootstrap/variables";

$theme-colors: (
  primary: $purple
);

/* finally, import Bootstrap */
@import "bootstrap";

Demo: https://codeply.com/go/lobGxGgfZE

Siehe auch: diese Antwort , diese Antwort oder das Ändern der Tastenfarbe in (CSS oder SASS)

Es ist auch möglich, die Primärfarbe nur mit CSS zu ändern , es sind jedoch viele zusätzliche CSS erforderlich, da es viele -primaryVariationen gibt (BTN-Primär, Alarm-Primär, BG-Primär, Text-Primär, Tabellen-Primär, Rahmen-Primär usw. ...) und einige dieser Klassen weisen geringfügige Farbabweichungen an Rändern, Schwebeflügen und aktiven Zuständen auf. Wenn Sie CSS verwenden müssen, ist es daher besser, eine Zielkomponente zu verwenden, z. B. die Farbe der primären Schaltfläche zu ändern .

Diese Lösungen funktionieren auch für Bootstrap 5 alpha

— Zim
quelle
Für diejenigen, die neu bei SASS und scss sind, wie ich es war ... bitte überprüfen Sie die npm, gulpum den Kompilierungsschritt abzuschließen.
— Chris Conlan
2
@ Chris Warum? Die npm-Build-Skripte von Bootstrap sind in der Quelle enthalten. Eine vollständige Liste finden Sie in der Datei package.json.
— John E
1
Kein Front-End-Entwickler. Genau das, was mir die Dokumente meines Themas gesagt haben. Ich werde löschen, wenn das keinen Sinn ergibt.
— Chris Conlan
Für die Verwendung eines CDN muss also nur das CSS geändert werden ( lange Hauptversion), wie ich vermute?
— Erik Philips
Für diejenigen von uns, die SASS nicht kennen, wo setzen Sie den $ primären Wert und geben den Import "Bootstrap" aus?
— Steven Frank
28

Es gibt zwei Möglichkeiten 

http://getbootstrap.com/customize/

und ändern Sie die Farbe in diesen Anpassungen und laden Sie den angepassten Bootstrap herunter.

Oder Sie können sass mit dieser Version https://github.com/twbs/bootstrap-sass verwenden und in Ihre sass-Assets / Stylesheets / _bootstrap.scss importieren. Vor dem Import können Sie jedoch die Standardfarben der Variablen ändern

//== Colors
//
//## Gray and brand colors for use across Bootstrap.

$gray-base:              #000 !default;
$gray-darker:            lighten($gray-base, 13.5%) !default; // #222
$gray-dark:              lighten($gray-base, 20%) !default;   // #333
$gray:                   lighten($gray-base, 33.5%) !default; // #555
$gray-light:             lighten($gray-base, 46.7%) !default; // #777
$gray-lighter:           lighten($gray-base, 93.5%) !default; // #eee

$brand-primary:         darken(#428bca, 6.5%) !default; // #337ab7
$brand-success:         #5cb85c !default;
$brand-info:            #5bc0de !default;
$brand-warning:         #f0ad4e !default;
$brand-danger:          #d9534f !default;


//== Scaffolding
//
//## Settings for some of the most global styles.

//** Background color for `<body>`.
$body-bg:               #fff !default;
//** Global text color on `<body>`.
$text-color:            $gray-dark !default;

//** Global textual link color.
$link-color:            $brand-primary !default;
//** Link hover color set via `darken()` function.
$link-hover-color:      darken($link-color, 15%) !default;
//** Link hover decoration.
$link-hover-decoration: underline !default;

und kompilieren Sie das Ergebnis

— Jorge Luis Saud Rosal
quelle
5
Gibt es eine benutzerdefinierte Tinte für Bootstrap 4?
— Ähm. Amit Joshi
1
Sie sollten die !defaultFlags weglassen , es sei denn, es gibt andere benutzerdefinierte Stildateien, die Ihnen einen Grund geben, dies nicht zu tun.
— John E
16

Ich habe dieses Tool erstellt: https://lingtalfi.com/bootstrap4-color-generator. Geben Sie einfach primär in das erste Feld ein, wählen Sie dann Ihre Farbe aus und klicken Sie auf Generieren.

Kopieren Sie dann den generierten scss- oder css-Code und fügen Sie ihn in eine Datei mit dem Namen my-colours.scss oder my-colours.css (oder einen beliebigen Namen) ein.

Sobald Sie den SCS in CSS kompiliert haben , können Sie diese CSS- Datei NACH dem Bootstrap-CSS einfügen , und schon kann es losgehen.

Der gesamte Vorgang dauert ungefähr 10 Sekunden, wenn Sie das Wesentliche wissen, vorausgesetzt, die Datei my-colours.scss ist bereits erstellt und in Ihrem Head-Tag enthalten.

Hinweis: Mit diesem Tool können Sie die Standardfarben des Bootstraps (Primär, Sekundär, Gefahr, ...) überschreiben. Sie können jedoch auch benutzerdefinierte Farben erstellen, wenn Sie möchten (Blau, Grün, Ternär, ...).

Hinweis 2: Dieses Tool wurde für die Verwendung mit Bootstrap 4 entwickelt (dh derzeit keine nachfolgende Version).

— ling
quelle
Ich musste den Boostrap-Import verschieben, nachdem dieses CSS generiert wurde, damit es funktioniert. Tolles Tool, danke.
— Deanwilliammills
6

Jedes Element mit dem Tag 'primay' hat die Farbe @ brand-primary. Eine der Optionen zum Ändern ist das Hinzufügen einer benutzerdefinierten CSS-Datei wie folgt:

.my-primary{
  color: lightYellow ;
  background-color: red;
}

.my-primary:focus, .my-primary:hover{
  color: yellow ;
  background-color: darkRed;
}

a.navbar-brand {
  color: lightYellow ;
}

.navbar-brand:hover{
  color: yellow;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <br>
  <nav class="navbar navbar-dark bg-primary mb-3">
    <div class="container">
      <a class="navbar-brand" href="/">Default (navbar-dark  bg-primary)</a>
    </div>
  </nav>
  <button type="button" class="btn btn-primary">Default (btn btn-primary)</button>
  </div>


<br>

<div class="container">
  <nav class="navbar my-primary mb-3">
    <div class="container">
      <a class="navbar-brand" href="/">Customized (my-primary)</a>
    </div>
  </nav>
  <button type="button" class="btn my-primary">Customized (btn my-primary)</button>
  </div>
Erweitern Sie das Snippet

Weitere Informationen zu benutzerdefinierten CSS-Dateien mit Bootstrap finden Sie hier: https://bootstrapbay.com/blog/bootstrap-button-styles/ .

— N. Osil
quelle
6

Bootstrap 4

Das hat bei mir funktioniert:

Ich habe meine eigene _custom_theme.scss Datei mit ähnlichen Inhalten erstellt: 

/* To simplify I'm only changing the primary color */
$theme-colors: ( "primary":#ffd800);

Fügte es oben in die Datei ein bootstrap.scssund kompilierte es neu (in meinem Fall hatte ich es in einem Ordner namens! Scss)

@import "../../../!scss/_custom_theme.scss";
@import "functions";
@import "variables";
@import "mixins";
— Rauland
quelle
2
Dies ist der richtige Ansatz, wie in getbootstrap.com/docs/4.0/getting-started/theming
— Gianpiero
@rauland Wie kompilierst du neu? Wird bei Bootstrap 3 der gleiche Ansatz verfolgt?
— Umair
1
Hallo @Umair, ich verwende Visual Studio mit der Erweiterung Web Compiler von Mads Kristensen. Es fügt meiner Lösung eine compilerconfig.json hinzu, in der ich definiere, wie jede .scss-Datei kompiliert wird, wobei die eingegebene .scss- und die ausgegebene .css-Datei angegeben werden. Weitere Informationen: github.com/madskristensen/WebCompiler
— Rauland
1
Beispiel: (asp.net auf .Net-Kern) "inputFile": "wwwroot \\ lib \\ bootstrap \\ scss \\ bootstrap.scss", "outputFile": "wwwroot \\ lib \\ bootstrap \\ dist \\ css \\ bootstrap.css "
— Rauland
3

Dies mag eine etwas alte Frage sein, aber ich möchte Ihnen mitteilen, wie ich Bootstrap am besten anpassen kann. Es gibt ein Online-Tool namens bootstrap.build https://bootstrap.build/app . Es funktioniert hervorragend und es sind keine Installations- oder Build-Tools erforderlich!

— Rami Alloush
quelle
2

Der richtige Weg, um die Standardprimärfarbe in Bootstrap 4.x mithilfe von SASS oder anderen Farben wie Sekundärfarbe, Erfolg usw. zu ändern.

Erstellen Sie die folgende SASS-Datei und importieren Sie Bootstrap SASS wie angegeben:

// (Required) Import Bootstrap
@import "bootstrap/functions";
@import "bootstrap/variables";
@import "bootstrap/mixins";

$primary: blue;
$secondary: green;
$my-color: red;

$theme-colors: (
  primary: $primary,
  secondary: $secondary,
  my-color: $my-color
);

// Add below your SASS or CSS code

// (Required) Import Bootstrap
@import "bootstrap/bootstrap";
— Alvin Konda
quelle
1

Mit SaSS
ändern Sie die Markenfarbe

$brand-primary:#some-color;

Dadurch wird die Primärfarbe für alle Benutzeroberflächen geändert.

CSS- Mit
Angenommen , Sie Taste primäre color.So ändern möchten

btn.primary{
  background:#some-color;
}

Durchsuchen Sie das Element, fügen Sie eine neue CSS / Sass-Regel in eine neue Datei ein und hängen Sie sie an, nachdem Sie das Bootstrap-CSS geladen haben.

— manish kumar
quelle
0

Bootstrap 4-Regeln

Die meisten Antworten hier sind mehr oder weniger richtig, aber alle mit einigen Problemen (für mich). Beim Googleing fand ich schließlich das richtige Verfahren, wie im dedizierten Bootstrap-Dokument angegeben: https://getbootstrap.com/docs/4.0/getting-started/theming/ .

Nehmen wir an, dass Bootstrap in installiert ist node_modules/bootstrap.

A. Erstellen Sie Ihre your_bootstrap.scssDatei:

@import "your_variables_theme";    // here your variables

// mandatory imports from bootstrap src
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables"; // here bootstrap variables
@import "../node_modules/bootstrap/scss/mixins";

// optional imports from bootstrap (do not import 'bootstrap.scss'!)
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
etc...

B. Erstellen Sie die _your_variables_theme.scssDatei im selben Ordner .

C. Passen Sie die Bootstrap-Variablen in der _your_variables_theme.scssDatei nach folgenden Regeln an:

Kopieren Sie _variables.scssnach Bedarf Variablen und fügen Sie sie ein, ändern Sie ihre Werte und entfernen Sie das! Standard-Flag . Wenn eine Variable bereits zugewiesen wurde, wird sie nicht durch die Standardwerte in Bootstrap neu zugewiesen.

Variablenüberschreibungen innerhalb derselben Sass-Datei können vor oder nach den Standardvariablen erfolgen. Allerdings , wenn sie über Sass Dateien überschreiben, Ihre Überschreibungen kommen müssen , bevor Sie Bootstrap der Sass - Dateien importieren .

Standardvariablen sind in verfügbar node_modules/bootstrap/scss/variables.scss.

— Gianpiero
quelle
0

Bootstrap 5

Für Bootstrap 5 können Sie einfach zu Ihrer Haupt-SCSS-Datei gehen und Folgendes hinzufügen:

$primary: #d93eba;
$body-bg: #fff;
$secondary: #8300d9;

oder was auch immer du ändern willst ...

Und vergessen Sie nicht, den Bootstrap gleich danach zu importieren.

Ihre endgültige Datei main.scss sollte folgendermaßen aussehen:

$primary: #d93eba;
$body-bg: #fff;
$secondary: #8300d9;


@import "~node_modules/bootstrap/scss/bootstrap";
— user4264972
quelle
-4

Seit Bootstrap 4 können Sie die Primärfarbe Ihres Bootstraps einfach ändern, indem Sie eine einfache CSS-Datei auf BootstrapColor.net herunterladen . Sie müssen SASS nicht kennen und die CSS-Datei kann für Ihre Website verwendet werden. Sie können die gewünschte Farbe wie Blau, Indigo, Lila, Rosa, Rot, Orange, Gelb, Grün, Blaugrün oder Cyan wählen.

— Alex01
quelle
2
Dies sind buchstäblich die einzigen Farben, die Sie auswählen können, da bootstrapcolor.net den Bootstrap einfach mit einer neuen, fest
— codierten
-7
  • Sie können die Farbe in der CDN-Datei nicht ändern.
  • Laden Sie die Bootstrap-Datei herunter.
  • Suchen Sie nach der Datei bootstrap.css.
  • Öffnen Sie diese Datei (bootstrsap.css) und suchen Sie nach 'primary'.
  • Ändern Sie es in die gewünschte Farbe.
— Sourav
quelle
1
Das funktioniert nicht wirklich. Es wird nicht empfohlen, das Bootstrap-CSS direkt zu ändern. Fügen Sie stattdessen CSS-Überschreibungen in einer separaten Datei hinzu, die auf bootstrap.css folgt. Außerdem ändern alle die die -primaryFarbreferenzen auf die gleiche Farbe verlieren würde die beabsichtigten Veränderungen Rand, schwebt, aktiv, etc .. Farben , da sie eine Änderung der primären Hintergrundfarbe ist.
— Zim
@Zim yupp Ihre Lösung scheint allgemeiner zu sein, danke!
— Sourav
-8

Dies ist eine sehr einfache Lösung.

<h4 class="card-header bg-dark text-white text-center">Renew your Membership</h4>

Ersetzen Sie die Klasse bg-dark durch bg-custom .

In CSS

.bg-custom {
  background-color: red;
}
— rauben
quelle
2
Dies beantwortet die Frage nicht, lesen Sie die Frage sorgfältig durch.
— Munim Munna
-14

Ja, ich würde vorschlagen, die CSS-Datei zu öffnen, die Seite zu überprüfen und den Farbcode zu finden, den Sie ändern möchten, und alle zu finden und zu ersetzen (abhängig von Ihrem Texteditor), um die gewünschte Farbe zu erhalten. Tun Sie dies mit allen Farben, die Sie ändern möchten

— Jonas Sideravičius
quelle
3
Dies ist eigentlich keine bewährte Methode. Sicher, es wird funktionieren, aber wenn Sie das Framework aktualisieren, verschwinden Ihre Änderungen (und Sie müssen den Vorgang jedes Mal wiederholen, wenn Sie ein Upgrade durchführen). Verwenden Sie stattdessen das Customizer-Tool ( getbootstrap.com/customize ) oder fügen Sie hinzu Ihre benutzerdefinierten Änderungen in eine separate CSS-Datei (Überschreiben der Klassen, die Sie überschreiben möchten)
— Blurfus
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.