نحوه ی سفارشی سازی بوت استرپ – بخش دوم
در بخش اول این مقاله، لزوم سفارشی سازی بوت استرپ شرح داده شد و دو روش برای این منظور معرفی گردید: بازنشانی / Override ساده با استفاده از CSS و سفارشی سازی بوت استرپ با استفاده از SASS. در این بخش از مقاله، به مباحث تکمیلی سفارشی سازی با SASS می پردازیم.(توصیه می شود دوره آموزشی طراحی سایت و پکیج آموزش طراحی سایت را مشاهده کنید)
همان طور که در اسناد بوت استرپ توضیح داده شده است، سفارشی سازی باید در یک فایل جداگانه ی custom.scss نگهداری شود که در خارج از فایل های سورس بوت استرپ SASS است. در هنگام ایجاد custom.scss، مطمئن شوید که _variables.scss را به عنوان مرجع، در دسترس نگه دارید.
1 2 3 4 5 6 |
|-- \bootstrap | |-- \scss | | |-- \mixins | | |-- \utilities | | |-- (...more bootstrap .scss source files) | custom.scss <-- changes go here outside bootstrap's SASS source |
همانند بازنشانی های CSS که قبلا توضیح داده شد، استفاده از یک فایل جداگانه ی custom.scss به ما اجازه می دهد تا تغییراتی را ایجاد کنیم که بر سورس بوت استرپ تأثیری نگذارد، و تغییرات و ارتقا های آینده را با عدم از بین بردن تغییرات در custom.scss، آسان تر می کند.
- سفارشی سازی
همانطور که قبلا بیان شد، جنبه های مختلفی از بوت استرپ وجود دارد که شما ممکن است بخواهید با استایل های خود تغییر دهید و یا بازنشانی کنید. در این جا، نمونه ای از هر کدام، آورده می شود:
تغییر یک استایل موجود مانند رنگ، فونت یا کادر ها …
بیایید یک تغییر (سفارشی سازی) را که قبلا برای btn-primary انجام دادیم بازبینی کنیم. به جای این که فقط btn-primary را تغییر دهیم، می خواهیم رنگ تم primary را در کلِ CSS تغییر دهیم. در این جا نحوه ی انجام این کار در custom.scss آورده شده است:
1 2 3 4 5 6 7 8 9 10 11 12 |
custom.scss /* import only the necessary Bootstrap files */ @import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; /* -------begin customization-------- */ /* change the primary theme color to red */ $theme-colors: ( primary: red; ); /* -------end customization-------- */ /* finally, import Bootstrap to set the changes! */ @import "bootstrap"; |
توجه: مسیر @import بوت استرپ، به custom.scss بستگی دارد و متناسب با محیط پروژه ی شما تغییر می کند.
همان طور که می بینید در custom.scss، فایل های بوت استرپی را که برای بازنشانی مورد نیاز است، @import می کنیم. (که معمولا فقط _variables.scss است. در بعضی از موارد، با سفارشی سازی های پیچیده تر، به functions و mixins نیز نیاز خواهید داشت). تغییرات را انجام دهید، سپس “bootstrap” را @import کنید. مهم است که قبل از وارد کردن “bootstrap”، تغییرات را انجام دهید. در این جا، مثال دیگری آورده شده است:
اضافه کردن یک رنگ تم جدید (btn-purple، bg-purple، text-purple، و …):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
custom.scss /* import only the necessary Bootstrap files */ @import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; /* -------begin customization-------- */ /* change the primary theme color, and add a new theme color */ $theme-colors: ( primary: red; purple: $purple; // $purple is defined in _variables.scss ); /* -------end customization-------- */ /* finally, import Bootstrap to set the changes! */ @import "bootstrap"; |
تغییرِ breakpoint های طرح بندی گرید:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
custom.scss /* import only the necessary Bootstrap files */ @import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; /* --- begin customization ---- */ /* change the primary theme color to red */ $theme-colors: ( primary: red; ); /* increase the width of the grid lg and xl breakpoints */ $grid-breakpoints: ( lg: 1024px, xl: 1366px ); /* increase container width for the wider lg and xl breakpoints */ $container-max-widths: ( lg: 1050px, xl: 1400px ); /* --- end customization ------ */ /* finally, import Bootstrap to set the changes! */ @import "bootstrap"; |
گسترش دادنِ کلاس های بوت استرپ، با کلاس های سفارشیِ جدید (به عنوان مثال: row-dark):
می توان کلاس های بوت استرپ موجود را برای ایجاد کلاس های سفارشیِ جدید گسترش داد. به عنوان مثال، در این جا، یک کلاس .row-dark جدید وجود دارد که کلاس.row بوت استرپ را گسترش می دهد؛ و سپس یک رنگ پس زمینه و یک رنگ را اضافه می کند. توجه کنید که چگونه این سفارشی سازی ها، بعد از @import bootstrap.css قرار می گیرد.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
custom.scss /* 1. import only the necessary Bootstrap files */ @import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; /* 2. begin customization ---- */ (variable changes as before here...) /* --- end customization ------ */ /* 3. import Bootstrap to set the changes! */ @import "bootstrap"; /* 4. add @mixin or @extend customizations here */ /* create new custom classes from existing classes */ .row-dark { @extend .row; background-color: #333333; color: #ffffff; } /* use @mixins */ .btn-custom { @include button-variant(red, white, red, red); } |
هنگامی که custom.scss حاوی سفارش سازی های مناسب باشد، باید SASS را برای تولید CSS حاصل از آن، کامپایل کنید.
- کامپایل کردنِ SASS
چندین ابزار وجود دارد که می تواند برای کامپایل کردن SASS و ایجاد CSS، استفاده شود. تمام ابزارها بر روی یک وب سرور اجرا می شوند، زیرا، همان طور که قبلا گفته شد، مرورگرهای وب، “SASS” را درک نمی کنند. محبوب ترین ابزار های ساخت SASS عبارتند از:
IMO، استفاده از NPM و Node، ساده ترین راه برای راه اندازی یک کامپایلر SASS است.
خلاصه ی سفارشی سازی SASS
۱- ابتدا، مقادیر دلخواهِ ما، در custom.scss تنظیم می شود، که سبب بازنشانی هر متغیری می شود که دارای مقادیر تنظیم شده ی!default در _variables.scss بوت استرپ هستند.
۲- سپس، بوت استرپ وارد می شود (“@import “bootstrap) که کامپایلر SASS را قادر می سازد تا تمام CSS های مناسب را با استفاده از پیش فرض بوت استرپ و بازنشانی های سفارشی، ایجاد کند.
۳- در نهایت، همه ی کلاس های سفارشیِ اضافی که کلاس های بوت استرپ را @Extend می کنند، می توانند پس از @import “bootstrap” تعریف شوند. این کلاس ها در CSS که تولید شده و پس از کلاس های سفارشی شده ی بوت استرپ در مرحله ی ۲ اضافه می شوند.
اگر ترجیح می دهید که به طور مستقیم با سورس SASS و کامپایلر کار نکنید، ابزار هایی وجود دارد که فرایند سفارشی سازی SASS را آسان تر می کند. Themestr.app یک سازنده ی تم بوت استرپ است که UI مبتنی بر وب فراهم می کند تا تغییرات را ایجاد کند و custom.scss و custom.css را برای بارگیری ایجاد می کند.
با تشکر از شما برای خواندن این مقاله، در پایان، انتظار می رود که آماده ی سفارشی سازی بوت استرپ باشید؛ سفارشی سازی بسیار مهم است چرا که هیچ کس نمی خواهند ظاهر بوت استرپ قابل تشخیص باشد. با استفاده از روش های (CSS یا SASS) که در این جا توصیف شد، تبدیل سایت Bootstrap 4 از یک ظاهر منحصر به فرد به یک آرایش سفارشی، بسیار آسان تر خواهد بود.