Bootstrap 4、5、5.3 で原色を変更するにはどうすればよいですか?

Bootstrap の原色のカスタマイズ

Bootstrap のデフォルトの原色を変更することが可能で、配色をブランド アイデンティティに合わせることができます。

ブートストラップ 5.3 (更新済み) 2023)

原色を変更するには、次のように既存の色変数 $orange を利用できます:

// Import necessary Bootstrap files
@import "functions";
@import "variables";

// Set the $primary variable to your desired color
$primary: orange;

// Merge the custom color with the existing $theme-colors map
$theme-colors: map-merge($theme-colors, ("primary": $primary));

// Apply the changes by importing Bootstrap
@import "bootstrap";

Bootstrap 5 (Updated 2021)

Bootstrap 5 でも、アプローチは同じです。テーマ変数を設定して、Bootstrap スタイルシートをインポートできます。

$primary: rebeccapurple;

// Ensure you use the full path to bootstrap.scss
@import "bootstrap";

Bootstrap 4

Bootstrap 4 の場合は、bootstrap.scss をインポートする前に適切なテーマ カラー変数を設定します。 :

$primary: purple;
$danger: red;

@import "bootstrap";

新しい色を派生させたい場合既存のブートストラップ変数の場合は、最初に関数ファイルと変数ファイルをインポートします:

@import "bootstrap/functions";
@import "bootstrap/variables";

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

@import "bootstrap";

以上がBootstrap 4、5、5.3 で原色を変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。