Wie ändere ich die Bootstrap-Primärfarbe?

Question 1

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.

Question 2

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

Question 3

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

Question 4

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).

Question 5

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/ .

Question 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";

Question 7

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!

Question 8

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

Question 9

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.

Question 10

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.

Question 11

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

Question 12

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.

Question 13

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.

Question 14

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

Question 15

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

Answer 1

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

Answer 2

1

Mögliches Duplikat von Wie man die BTN-Farbe in Bootstrap

ändert

Answer 3

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

Answer 4

3

Anstatt das CSS zu überschreiben, empfehle ich die Verwendung des Customizing-Tools getbootstrap.com/customize

blurfus

Answer 5

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

Answer 6

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

Answer 7

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

Answer 8

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

Answer 9

Für die Verwendung eines CDN muss also nur das CSS geändert werden ( lange Hauptversion), wie ich vermute?

Erik Philips

Answer 10

Für diejenigen von uns, die SASS nicht kennen, wo setzen Sie den $ primären Wert und geben den Import "Bootstrap" aus?

Steven Frank

Answer 11

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

Answer 12

5

Gibt es eine benutzerdefinierte Tinte für Bootstrap 4?

Ähm. Amit Joshi

Answer 13

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

Answer 14

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).

Answer 15

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

Deanwilliammills

Answer 16

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/ .

Answer 17

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

Answer 18

2

Dies ist der richtige Ansatz, wie in getbootstrap.com/docs/4.0/getting-started/theming

Gianpiero

Answer 19

@rauland Wie kompilierst du neu? Wird bei Bootstrap 3 der gleiche Ansatz verfolgt?

Umair

Answer 20

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

Answer 21

1

Beispiel: (asp.net auf .Net-Kern) "inputFile": "wwwroot \\ lib \\ bootstrap \\ scss \\ bootstrap.scss", "outputFile": "wwwroot \\ lib \\ bootstrap \\ dist \\ css \\ bootstrap.css "

Rauland

Answer 22

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!

Answer 23

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

Answer 24

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.

Answer 25

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.

Answer 26

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

Answer 27

-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

Answer 28

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

Answer 29

-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

Answer 30

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

Answer 31

@Zim yupp Ihre Lösung scheint allgemeiner zu sein, danke!

Sourav

Answer 32

-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

Answer 33

2

Dies beantwortet die Frage nicht, lesen Sie die Frage sorgfältig durch.

Munim Munna

Answer 34

-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

Answer 35

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

Wie ändere ich die Bootstrap-Primärfarbe?

Antworten:

Bootstrap 4-Regeln