چطور میتونم استایل‌ های CSS بوت‌ استرپ رو بازنویسی کنم؟

سلام برای اینکه استایل‌ های پیش‌فرض بوت‌ استرپ رو بازنویسی کنی، میتونی از روش‌ های مختلفی استفاده کنی. چند تا از مهم‌ترین روش‌ ها رو برات توضیح میدم

می‌تونی یه کلاس سفارشی تعریف کنی و اون رو به المنتی که میخوای استایلش تغییر کنه اضافه کنی. برای مثال

<button class="btn btn-primary my-custom-button">Click me</button>

و بعدش توی فایل CSS

.my-custom-button {
    background-color: red;
    font-size: 20px;
}

یا اینکه می‌تونی مستقیما استایل‌ های بوت‌ استرپ رو با اضافه کردن کد CSS جدید بازنویسی کنی. این کار رو میتونی با سلکتور های پیشرفته تر یا با استفاده از !important انجام بدی

.btn-primary {
    background-color: green !important;
    border-color: green !important;
}

یا  اگه پروژه‌ ات از SASS یا SCSS استفاده میکنه، میتونی متغیر های بوت‌ استرپ رو تغییر بدی و بعد از فایل اصلی بوت‌ استرپ استفاده کنی تا استایل‌ های جدید بازنویسی بشن:

$primary: #ff5733;
@import "bootstrap";

این روش‌ها بهت این امکان رو میدن که استایل‌های بوت‌ استرپ رو به صورت دلخواه و بدون تغییر کلی تو فریم‌ورک سفارشی کنی.