Bootstrap4-Tutorial zum Anpassen Ihrer eigenen Farben und Stile

Bootstrap ist derzeit das beliebteste CSS-Framework. Es gibt viele Websites und Hintergrundverwaltungssysteme, deren Stile auf Bootstrap basieren. Allerdings hat Bootstrap immer den Blau- und Hellgrau-Farbton beibehalten, und das gilt auch für das neueste Bootstrap 4. Nach längerem Anschauen ist es unvermeidlich, dass man eine gewisse ästhetische Ermüdung verspürt.

In diesem Artikel wird hauptsächlich beschrieben, wie Sie Ihre eigenen Farben und Stile in Bootstrap 4 anpassen. Der Herausgeber findet es ziemlich gut, daher werde ich es jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber, um einen Blick darauf zu werfen. Ich hoffe, es kann allen helfen.

Wie ändere ich das Farbthema von Bootstrap? In diesem Artikel erfahren Sie, wie Sie Bootstrap 4 anpassen, um Ihre Seite einzigartiger zu gestalten.

0. Erforderliche Tools

1. Node.js-Kompilierung

2. Bootstrap4, laden Sie Bootstrap herunter Auf dem Paket müssen Sie Node.jsBootstrap4 auf Ihrem Computer installieren. Um den Quellcode von Boosttrap zu ändern, benötigen Sie eine Kopie des Quellcodes, indem Sie die offizielle Bootstrap-Website besuchen (https://getbootstrap .com).

Einige Orte können möglicherweise nicht auf die offizielle Website von Bootstrap4 zugreifen. Sie können daher auch die chinesische Website von Bootstrap besuchen, um den Quellcode herunterzuladen.

1. Angepasstes Farbthema

Um die Anpassung zu erleichtern, hat Bootstrap einige Variablen extrahiert und in der Datei scss/_varaibles.scss abgelegt.

Öffnen Sie diese Datei und Sie werden feststellen, dass es viele Konfigurationen gibt. Finden Sie diesen Absatz:

$primary:    $blue !default;
$secondary:   $gray-600 !default;
$success:    $green !default;
$info:     $cyan !default;
$warning:    $yellow !default;
$danger:    $red !default;
$light:     $gray-100 !default;
$dark:     $gray-800 !default;

Hier konfigurieren Sie die Grundkonfigurationen Ändern Sie den Farbton von Bootstrap und ändern Sie ihn. Diese Farbwerte können dazu führen, dass die Website sehr unterschiedlich aussieht. Zusätzlich zur Hauptfarbe gibt es viele farbbezogene Variablen, die gesteuert werden können, und auch die Nachtfarbe des Randes eines Eingabefelds kann angepasst werden. Du kannst es langsam versuchen.

Ändern Sie beispielsweise diese Variablen in _variables.scss:

$primary:    #e95420 !default;
$secondary:   #0e8420 !default;
$success:    #fff !default;
$light:     #e8cd56 !default;
$dark:     #e95420 !default;

$input-bg: #c34113;
$input-border-color: #c34113;
$input-placeholder-color: #ccc;
$input-color: #fff;

$jumbotron-bg: rgb(247, 247, 247);

und Sie erhalten einen ähnlichen Farbstil wie auf der Ubuntu-Website:

2. Feinabstimmung des Erscheinungsbilds der Komponente

Zusätzlich zur Anpassung der Farbe verfügt _variables.scss auch über viele Variablen, die kann das Erscheinungsbild der Bootstrap-Komponente optimieren, z. B.:

$enable-shadows, steuert, ob Schatten um einige Popup-Komponenten angezeigt werden

$enable-rounded, steuert, ob Schatten um Komponenten (Schaltflächen, Eingabefelder, Dropdown-Boxen usw.) herum angezeigt werden. Als abgerundete Ecken angezeigt

$enable-gradients, steuert, ob Der Hintergrund der Komponente zeigt einen schwachen Verlaufseffekt

Dieses Steuerelement Es gibt viele weitere Variablen, daher werde ich sie nicht einzeln auflisten.

4. Kompilieren Sie Bootstrap

Wie generieren Sie nach dem Ändern der Variablen Ihre eigene Bootstrap-CSS-Datei? Erfordert Kompilierung mit npm.

Vor dem Kompilieren müssen Sie verschiedene Abhängigkeitspakete herunterladen, was über den Installationsbefehl erfolgen kann:

npm install

Tipp: Node.js wird heruntergeladen Abhängige Pakete von der offiziellen npm-Website können standardmäßig langsamer sein. Es wird empfohlen, vom Taobao NPM-Spiegel herunterzuladen, was sehr schnell ist:

Zuerst npm install -g cnpm --registry=https://registry.npm.taobao.org ausführen

Dann können Sie überall dort, wo der Befehl npm verwendet wird, stattdessen cnpm verwenden

Führen Sie nach dem Herunterladen der Abhängigkeiten die Kompilierung durch:

npm run dist

Warten Sie einen Moment, die kompilierte CSS-Datei wird im Verzeichnis dist/css/ angezeigt und Kann für Sie kopiert werden. Wird in Projekten verwendet!

5. Anpassen von Bootstrap im Webpack-Projekt

Im obigen Inhalt geht es um das Anpassen von Bootstrap 4 durch Kompilieren des Quellcodes. Was soll ich tun, wenn ich Bootstrap4 in meinem Webpack-Projekt anpassen möchte?

Es ist nicht angebracht, den Bootstrap-Quellcode in node_modules direkt zu ändern. Die offiziell empfohlene Methode besteht darin, eine neue custom.scss-Datei im Projekt zu erstellen und die Variablen, die Sie ändern möchten, darin zu schreiben:

// 如果想修改 _variables.scss 中的变量，请写在这里
$primary:    #e95420 !default;
$secondary:   #0e8420 !default;
...
// 文件末尾请这样引入 Bootstrap 的源码
@import "~bootstrap/scss/bootstrap";

Dann beim Kompilieren mit Webpack , Fügen Sie außerdem custom.scss zur Liste der kompilierten Dateien hinzu. Dies erfordert eine Änderung der webpack.config.js-Konfiguration im Projekt.

Also, wie schreibe ich webpack.config.js?

Die Antwort finden Sie in der offiziellen Dokumentation von Boostrap4, Sie können sie selbst lesen. Sie können mich über diese WeChat-ID auch für 1 Yuan sponsern und ich werde Ihnen die Antwort direkt mitteilen. Vielen Dank an alle, Ihre Unterstützung ist für mich die Motivation, weiter zu teilen! :-)

Verwandte Empfehlungen:

bootstrap4-Quellcode-Leseerfahrung_html/css_WEB-ITnose

Das obige ist der detaillierte Inhalt vonBootstrap4-Tutorial zum Anpassen Ihrer eigenen Farben und Stile. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!