Bagaimanakah Saya Boleh Menukar Warna Utama dalam Bootstrap 4, 5 dan 5.3?

Menyesuaikan Warna Utama Bootstrap

Menukar warna utama lalai dalam Bootstrap boleh dilaksanakan, membolehkan anda menjajarkan skema warna dengan identiti jenama anda.

Bootstrap 5.3 (Dikemas kini 2023)

Untuk mengubah suai warna utama, anda boleh memanfaatkan pembolehubah warna sedia ada, $oren, seperti berikut:

// 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 (Dikemas kini 2021)

Dalam Bootstrap 5, pendekatannya tetap sama. Anda boleh menetapkan pembolehubah tema dan mengimport lembaran gaya Bootstrap:

$primary: rebeccapurple;

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

Bootstrap 4

Untuk Bootstrap 4, tetapkan pembolehubah warna tema yang sesuai sebelum mengimport bootstrap.scss :

$primary: purple;
$danger: red;

@import "bootstrap";

Dalam kes di mana anda ingin memperoleh warna baharu daripada warna sedia ada Pembolehubah Bootstrap, import fungsi dan fail pembolehubah dahulu:

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

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

@import "bootstrap";

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menukar Warna Utama dalam Bootstrap 4, 5 dan 5.3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!