So ändern Sie das bootstrap-Grundfarbe?

Ist es möglich, ändern Sie das bootstrap-primary-Farbe übereinstimmen, um die Marke Farbe? Ich bin mit bootswatch ' s Papier Thema in meinem Fall.

Mögliche Duplikate von Wie ändern btn Farbe in Bootstrap
Ja, einfach überschreiben, es in Ihrer benutzerdefinierten CSS-Datei, aber Sie müssen, um verschiedene Regeln für die einzelnen Elemente und Ihre Zustände (aktiv, hover, focus etc)
Anstelle von überschreiben der CSS, ich empfehle das customizing-tool getbootstrap.com/customize

InformationsquelleAutor ashishjmeshram | 2016-08-05

  1. 19

    Update 2018 für die Bootstrap-4

    Ändern primäre, oder eine der Thema Farben in der Bootstrap-4-SASS, legen Sie die entsprechenden Variablen vor importieren bootstrap.scss. Damit können Sie Ihre benutzerdefinierten scss zu überschreiben !default-Werte...

    $primary: purple;
$danger: red;

@import "bootstrap";

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

    In einigen Fällen, möchten Sie vielleicht, um eine neue Farbe aus einem anderen bestehenden Bootstrap-Variablen. Für diesen @import-Funktionen und Variablen zuerst, so dass Sie verwiesen werden kann, in der Anpassungen...

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

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

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

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

    Siehe auch diese Antwort, oder diese Antwort für ändern Sie die Taste Farbe (CSS oder SASS)

    Es ist auch möglich, ändern Sie die primäre Farbe mit CSS nur aber es erfordert eine Menge von zusätzlichen CSS-da gibt es viele -primary Variationen (btn-primary, Alarm-primär -, bg-primär -, text-primär -, Tisch-primär -, Grenze-primär -, etc...) und einige von diesen Klassen haben leichte Farben, die Variationen an den Grenzen, hover und active-Zustände. Daher, wenn Sie die Verwendung von CSS, es ist besser Ziel eine Komponente wie das ändern der primäre Taste Farbe.

    Für diejenigen, SASS und scss, wie ich es war... bitte schauen Sie sich npm's gulp zum Abschluss der compile-Schritt.

    InformationsquelleAutor Zim

  2. 17

    gibt es zwei Möglichkeiten, die Sie gehen können, um 

    http://getbootstrap.com/customize/

    und ändern Sie die Farbe dieser Anpassungen und herunterladen des bootstrap angepasst werden.

    Oder verwenden Sie sass mit dieser version https://github.com/twbs/bootstrap-sass und importieren Sie in Ihr sass assets/stylesheets/_bootstrap.scss aber vor dem import können Sie die Standardwerte zu ändern, variable Farben

    //== 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;

    kompilieren und das Ergebnis

    ist jeder anpassen Tinte zur Verfügung, für die Bootstrap-4 ?

    InformationsquelleAutor Jorge Luis Saud Rosal

  3. 1

    Verwendung Von SaSS

    ändern Sie die Marke, die Farbe

    $brand-primary:#some-color;

    dies wird sich ändern in der Grundfarbe quer durch alle UI -.

    Mit css-
    angenommen, Sie möchten die Schaltfläche "ändern" primäre Farbe.So

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

    suchen Sie das element und fügen Sie eine neue css/sass
    in der Regel in eine neue Datei und hängen Sie es nach u laden Sie die bootstrap-css.

    InformationsquelleAutor manish kumar

  4. -1
    • Sie können nicht ändern die Farbe in cdn-Datei.
    • Laden Sie die bootstrap-Datei.
    • Suche Für bootstrap.css-Datei.
    • öffnen Sie diese(bootstrsap.css -) Datei und Suche nach "primären".
    • ändern Sie die Farbe, die Sie wünschen.
    Dies funktioniert nicht wirklich. Es ist keine gute übung ändern Sie das Bootstrap-CSS direkt. Stattdessen fügen Sie CSS-overrides in einer separaten Datei, folgt bootstrap.css. Auch, ändern von allen, die die -primary Farbe Verweise auf die gleiche Farbe verlieren würden, die beabsichtigten Variationen an der Grenze, hover, active, etc.. Farben, da Sie eine variation der primäre hintergrund-Farbe.
    yupp deine Lösung scheint mehr generalisierte Dank !

    InformationsquelleAutor Sourav

  5. -2

    Dies ist eine sehr einfache Lösung.

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

    ersetzen der Klasse-bg-dunkel, mit bg-custom.

    In CSS

    .bg-custom {
  background-color: red;
}
    Dies beantwortet nicht die Frage, die Frage genau Lesen.

    InformationsquelleAutor Rob

  6. -3

    Da Bootstrap-4 können Sie leicht ändern Sie die primäre Farbe der Bootstrap, indem Sie eine einfache CSS-Datei auf BootstrapColor.net. Sie brauchen nicht zu wissen, SASS und CSS-Datei ist bereit für Ihre Webseite nutzen. Sie können wählen Sie die Farbe, die Sie wollen, wie blau, indigo, lila, pink, rot, orange, gelb, grün, Blaugrün oder cyan-Farbe.

    Diese sind buchstäblich die einzigen Farben, die Sie wählen können, wie bootstrapcolor.net hat einfach neu kompiliert bootstrap mit einer neuen primären Farbe hardcoded.

    InformationsquelleAutor Alex1

  7. -9

    Ja,
    Ich schlage vor, öffnung der .css-Datei, überprüfen Sie die Seite und finden Sie die Farbe code, den Sie ändern möchten, und Alle Suchen und Ersetzen (je nach text-editor), um die Farbe, die Sie wollen. Tun, mit all den Farben, die Sie ändern möchten

    Dies ist eigentlich keine best-practice. Sicher, es wird funktionieren, aber wenn Sie eine Verbesserung der Rahmenbedingungen, die änderungen verschwinden (und Sie müssen wiederholen Sie den Vorgang jeder. single. Zeit, Sie tun eine upgrade) - verwenden Sie Stattdessen die customizer-tool (getbootstrap.com/customize) oder fügen Sie Ihre benutzerdefinierten änderungen an einem separaten .css-Datei (überschreiben der Klassen, die Sie überschreiben möchten)

    InformationsquelleAutor Jonas Sideravičius

Schreibe einen Kommentar