نحوه ی سفارشی سازی بوت استرپ – بخش اول
تم های سفارشی برای بوت استرپ ۴ با CSS یا SASS
دلایل مختلفی برای سفارشی کردن بوت استرپ وجود دارد. ممکن است بخواهید:
- سبک های موجودِ بوت استرپ مانند رنگ ها، فونت ها یا کادر ها را تغییر دهید.
- چیدمان شبکه بندی بوت استرپ مانند نقاط توقف / breakpoints یا gutter widths را تغییر دهید.
- کلاس های بوت استرپ را با کلاس های سفارشی جدید (به عنوان مثال: btn-custom) گسترش دهید.
به هر دلیلی که بخواهید بوت استرپ را سفارشی کنید، دو راه وجود دارد. کار را با روش CSS که ساده تر است شروع خواهیم کرد و سپس روش پیشرفته تر، با استفاده از SASS را توضیح خواهیم داد.(توصیه می شود دوره آموزشی طراحی سایت و پکیج آموزش طراحی سایت را مشاهده کنید)
- بازنشانی / Override ساده با استفاده از CSS
این روش با تعریف دستورات CSS که با دستورات CSS بوت استرپ مطابقت دارند، یک استایل « override» را ایجاد می کند. این روش بسیار آسان است و این امکان را فراهم می کند تا بدون از بین رفتن استایل های سفارشی خود، بوت استرپ را به نسخه های بعدی minor ارتقا دهید.
در CSS، ترتیب مهم است. آخرین تعریف یک دستور CSS همه ی دستورات تعریف شده ی قبلی را که در آن انتخابگر ها و خواص CSS مطابقت دارند، باطل می کند. و سفارشی سازی بازنشانی ها / Overrides در CSS، به این روش کار می کند.
سفارشی سازی CSS در یک فایل custom.css جداگانه قرار می گیرد، به طوری که bootstrap.css بدون تغییر باقی می ماند. ارجاع به custom.css پس از bootstrap.css قرار می گیرد که باعث عملکردِ بازنشانی می شود:
1 |
<link rel="stylesheet" type="text/css" href="bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="custom.css"> |
هر گونه تغییر مورد نیاز در فایل custom.css را اضافه می کنیم. مثلا می گویم می خواهم مرزهای گرد را از کارت ها، دکمه ها و فرم های ورودی حذف کنم.
و با اضافه کردن دستور CSS در custom.css خواهیم داشت:
1 2 |
/* remove rounding from cards, buttons and inputs */ .card, .btn, .form-control { border-radius: 0; } |
با استفاده از این بازنشانی ساده CSS، اکنون کارت ها، دکمه ها و فرم های ورودی، دارای گوشه های مربع هستند:
ویژگی های CSS مهم هستند و هنگام سفارشی سازی، نیاز به درک ویژگی های CSS دارید.
بازنشانی ها در custom.css نیازمند استفاده از سلکتور هایی است که به اندازه ی bootstrap.css خاص هستند. برای مثال، کد CSS برای Bootstrap 4 nav-link در پس زمینه ی تاریک Navbar (.navbar-dark navbar-nav) نمایش داده می شود.
1 2 3 |
.navbar-dark .navbar-nav .nav-link { color: rgba(255, 255, 255, 0.5); } |
برای بازنشانی رنگ nav-link، این کد کار نمی کند ❌:
1 2 3 |
.navbar-dark .nav-link { color: silver; } |
انتخاب گر در custom.css باید با انتخاب گر بوت استرپ مطابقت داشته باشد ✅:
1 2 3 |
.navbar-dark .navbar-nav .nav-link { color: silver; } |
البته، با استفاده از یک انتخابگر خاص نیز (اختصاصی تر) کار خواهد کرد. به عنوان مثال اگر فقط می خواستیم بازنشانی رنگnav-link را انجام دهیم، رنگ باید یک Navbar با id = “# navbar1” باشد ✅:
1 2 3 |
#navbar1 .navbar-nav .nav-link { color: silver; } |
توجه: نیازی به استفاده از important!
در CSS سفارشی وجود ندارد، مگر این که بخواهید یکی از کلاس های Bootstrap Utility را بازنشانی دهید. خصوصیت CSS همیشه برای یک کلاس CSS برای بازنشانی یکی کلاسِ دیگر کار می کند.
با قرار دادن همه ی بازنشانی های بوت استرپ در custom.css جداگانه، پیگیری تغییرات بسیار ساده تر است و در صورت لزوم می تواند به استایل های پیش فرض بوت استرپ بازگردانده شود. اگر تغییرات را مستقیما در استایل شیت پیش فرض bootstrap.css اعمال کنید، تغییر و نگهداری و پیگیری، بسیار دشوار خواهد بود.
هر گونه آپ گرید های جزئی به نسخه های بعدی بوت استرپ، می تواند bootstrap.css را جایگزین کند، بدون آن که استایل های سفارشی در custom.css از بین برود.
استفاده از بازنشانی های CSS برای سفارشی سازی های ساده ی بوت استرپ آسان است، اما برای تغییرات گسترده تر، SASS روش بهتری است. فرض کنید برای مثال می خواهید رنگ پیش فرض آبی “primary” را در بوت استرپ به رنگ دیگری (به عنوان مثال قرمز) تغییر دهید. می توانید یک بازنشانی ساده ی CSS را برای دکمه ی btn-primary انجام دهید:
1 |
.btn-primary { background-color: red; } |
بله، این کار باعث می شود دکمه ی btn-primary قرمز شود. با این حال، دیگر حالت های btn-primary مانند hover، active و disabled را تغییر نمی دهد. همچنین رنگ اصلی primary را در کل CSS برای .alert-primary، .text-primary، .bg-primary، .btn-outline-primary، .badge-primary و غیره تغییر نمی دهد.
برای این چنین سفارشی سازی های گسترده تر در بوت استرپ، باید از SASS استفاده کنید.
- سفارشی سازی بوت استرپ با استفاده از SASS
ابتدا درباره ی SASS صحبت می کنیم و نحوه ارتباط آن با بوت استرپ را می بینیم:
- SASS یک زبان شی گرا و پیش پردازنده ی CSS است.
- SASS باید به CSS کامپایل شود تا توسط یک مرورگر وب درک شود.
- فایل های نوشته شده در SASS معمولا دارای پسوند .scss هستند.
- کل سورس CSS بوت استرپ ۴ در SASS نوشته شده است.
از آن جا که کل سورس CSS بوت استرپ ۴ در زبان SASS نوشته شده است، فایل های Bootstrap 4 CSS با استفاده از یک کامپایلر SASS (پیش پردازنده ی A.K.A) کامپایل می شوند. بنابراین، تنها به این معنی است که SASS راه توصیه شده برای سفارشی سازی بوت استرپ است.
- ساختار پروژه
ابتدا اجازه دهید فایل ها و ساختار فولدر بوت استرپ ۴ SASS را بررسی کنیم …
1 2 3 4 5 6 7 8 9 10 11 |
|-- \bootstrap | |-- \scss | | |-- \mixins | | |-- \utilities | | |-- _functions.scss | | |-- _mixins.scss | | |-- _variables.scss | | |-- (...more bootstrap scss source files) | | |-- bootstrap-grid.scss | | |-- bootstrap-reboot.scss | | |-- bootstrap.scss |
آن چه در مورد فایل های سورس بوت استرپ SASS نیاز دارید
- فایل bootstrap.scss فایل اصلی است که تمام فایل های دیگر SCSS را با استفاده از عبارت های SASS @import “..” ارجاع می دهد.
- فایل _variables.scss شامل تمام متغیر های SASS است که برای سفارشی کردن و بازنشانی در دسترس هستند.
_variables.scss حاوی متغیر هایی است که وابسته به فایل های _functions.scss و _mixins.scss هستند.
- بوت استرپ CSS می تواند با Grid (bootstrap-grid.scss) و Reboot (bootstrap-reboot.scss) یا بدون آن ها، کامپایل کرد.
متغیرها و نقشه های بوت استرپ SASS مورد استفاده ی رایج
برای دانستن بوت استرپ، باید بدانید که یک هزاران متغیر SASS وجود دارد. در این جا موارد رایج تر که دانستن درباره ی آن ها مفید است، آورده شده است:
رنگ های تم
وقتی که صحبت از سفارشی کردن ظاهز پیش فرض بوت استرپ است، تغییر پالت رنگ 🎨 اغلب اولین چیزی است که به ذهن می آید. برای تغییر این رنگ ها از نقشه ی theme-colors SASS استفاده کنید …
1 2 3 4 5 6 7 8 9 10 |
$theme-colors: ( "primary": .., "secondary": .., "success": .., "info": .., "warning": .., "danger": .., "light": .., "dark": .. ); |
فعال کردن …
این متغیر های self-explanatory true/false variables را می توان به صورت دلخواه تغییر داد.
1 2 3 4 5 |
$enable-rounded: true; $enable-shadows: true; $enable-gradients: false; $enable-grid-classes: true; $enable-print-styles: true; |
نقاط Breakpointsشبکه بندی یا grid
به طور پیش فرض، Breakpoint های واکنش گرا بر اساس عرض دستگاه معمولی است، و در صورت نیاز می تواند تغییر یابد. تغییر نقشه ی SASS $grid-breakpoints، breakpoint را برای شبکه، و همچنین هر کلاس واکنش گرای دیگر (مانند text-md-center، navbar-expand-lg) را تغییر می دهد:
1 2 3 4 5 6 7 |
$grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px ); |
فاصله های عمودی و افقی
در بسیاری از بخش های CSS بوت استرپ، “spacer” به عنوان پایه و اساس حاشیه ها / margins و padding استفاده می شود. با اندکی افزایش در spacer (به عنوان مثال ۱٫۱rem)، فضای خالی بیشتری بین برخی از عناصر اضافه خواهد شد.
1 |
$spacer: 1rem; |
چنان چه به ادامه ي بحث جالبِ سفارشی سازی بوت استرپ علاقه مندید، با ما در بخش دوم این مقاله، همراه باشید.
با سلام و تشکر بابت این پست مفید که توضیحات عالی بود . یه سوال داشتم اینکه این فایل scss بوتسترپ رو چجوری به پروژه مون اضافه کنیم؟
ممنون میشم راهنمایی کنید