自分のブランドに合わせて Bootstrap の原色を変更するにはどうすればよいですか?

ブランド調整のための Bootstrap のプライマリ カラーの変更

Bootstrap をカスタム ブランド カラーと組み合わせて利用する場合、プライマリ カラーを調整する必要があります。一貫性を保つため。 Bootstrap 内には原色を変更するための直接ボタンはありませんが、SASS (または CSS) を使用するとこのカスタマイズが可能になります。

Bootstrap 5 (v5.3 以降)

Bootstrap 5.3 以降では、Bootstrap の SASS ファイルから関数と変数をインポートすることで、特定の色を正確に制御できるようになります変数。既存の $orange 変数を使用した例:

@import "functions"; 
@import "variables";

$primary: $orange; 
$theme-colors: map-merge($theme-colors, ("primary": $primary));

@import "bootstrap";

Bootstrap 5 (v5.3 以前)

Bootstrap 5.3 と同様に、SASS オーバーライド方法は同じです。 Bootstrap 5 の $primary 変数を直接設定すると、デフォルトのプライマリ変数がオーバーライドされます。 color.

$primary: rebeccapurple;

@import "bootstrap"; 

Bootstrap 4

Bootstrap 4 では、アプローチが少し異なります。 bootstrap.scss をインポートする前に $primary 変数 (またはその他のテーマの色) を定義します。

$primary: purple;
$danger: red;

@import "bootstrap";

追加オプション

特定のシナリオでは、既存のブートストラップ変数を参照します色のカスタマイズが必要な場合があります。 $purple 変数に基づいて原色を設定する例を次に示します。

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

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

@import "bootstrap";

注: CSS のみを使用して原色を変更するのは、多数の -primary があるため、より複雑なプロセスになります。バリエーション。ボタンなどの特定のコンポーネントを色の変更にターゲットとする場合は、CSS を使用することをお勧めします。

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