وب

نحوه ی سفارشی سازی بوت استرپ – بخش دوم

در بخش اول این مقاله، لزوم سفارشی سازی بوت استرپ شرح داده شد و دو روش برای این منظور معرفی گردید: بازنشانی / Override ساده با استفاده از CSS و سفارشی سازی بوت استرپ با استفاده از SASS. در این بخش از مقاله، به مباحث تکمیلی سفارشی سازی با SASS می پردازیم.(توصیه می شود دوره آموزشی طراحی سایت و پکیج آموزش طراحی سایت  را مشاهده کنید)

همان طور که در اسناد بوت استرپ توضیح داده شده است، سفارشی سازی باید در یک فایل جداگانه ی custom.scss نگهداری شود که در خارج از فایل های سورس بوت استرپ SASS است. در هنگام ایجاد custom.scss، مطمئن شوید که _variables.scss را به عنوان مرجع، در دسترس نگه دارید.

همانند بازنشانی های CSS که قبلا توضیح داده شد، استفاده از یک فایل جداگانه ی custom.scss به ما اجازه می دهد تا تغییراتی را ایجاد کنیم که بر سورس بوت استرپ تأثیری نگذارد، و تغییرات و ارتقا های آینده را با عدم از بین بردن تغییرات در custom.scss، آسان تر می کند.

بوت استرپ

  1. سفارشی سازی

همانطور که قبلا بیان شد، جنبه های مختلفی از بوت استرپ وجود دارد که شما ممکن است بخواهید با استایل های خود تغییر دهید و یا بازنشانی کنید. در این جا، نمونه ای از هر کدام، آورده می شود:

آموزش پیشنهادی برای شما : آموزش Bootstrap 4 | جادوی رابط کاربری

تغییر یک استایل موجود مانند رنگ، فونت یا کادر ها …

بیایید یک تغییر (سفارشی سازی) را که قبلا برای btn-primary انجام دادیم بازبینی کنیم. به جای این که فقط btn-primary را تغییر دهیم، می خواهیم رنگ تم primary ‎ را در کلِ CSS تغییر دهیم. در این جا نحوه ی انجام این کار در custom.scss آورده شده است:

توجه: مسیر @import‎ بوت استرپ، به custom.scss بستگی دارد و متناسب با محیط پروژه ی شما تغییر می کند.

همان طور که می بینید در custom.scss، فایل های بوت استرپی را که برای بازنشانی مورد نیاز است، @import می کنیم. (که معمولا فقط _variables.scss است. در بعضی از موارد، با سفارشی سازی های پیچیده تر، به functions‎ و mixins نیز نیاز خواهید داشت). تغییرات را انجام دهید، سپس “bootstrap” را @import کنید. مهم است که قبل از وارد کردن “bootstrap”، تغییرات را انجام دهید. در این جا، مثال دیگری آورده شده است:

اضافه کردن یک رنگ تم جدید (btn-purple، bg-purple، text-purple، و …):

تغییرِ breakpoint‎ های طرح بندی گرید:

گسترش دادنِ کلاس های بوت استرپ، با کلاس های سفارشیِ جدید (به عنوان مثال: row-dark‎):

می توان کلاس های بوت استرپ موجود را برای ایجاد کلاس های سفارشیِ جدید گسترش داد. به عنوان مثال، در این جا، یک کلاس ‎.row-dark‎ جدید وجود دارد که کلاس‎.row ‎ بوت استرپ را گسترش می دهد؛ و سپس یک رنگ پس زمینه و یک رنگ را اضافه می کند. توجه کنید که چگونه این سفارشی سازی ها، بعد از @import bootstrap.css قرار می گیرد.

هنگامی که custom.scss حاوی سفارش سازی های مناسب باشد، باید SASS را برای تولید CSS حاصل از آن، کامپایل کنید.

  1. کامپایل کردنِ SASS

چندین ابزار وجود دارد که می تواند برای کامپایل کردن SASS و ایجاد CSS، استفاده شود. تمام ابزارها بر روی یک وب سرور اجرا می شوند، زیرا، همان طور که قبلا گفته شد، مرورگرهای وب، “SASS” را درک نمی کنند. محبوب ترین ابزار های ساخت SASS عبارتند از:

Node SASS

Gulp SASS

Webpack 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 از یک ظاهر منحصر به فرد به یک آرایش سفارشی، بسیار آسان تر خواهد بود.

بوت استرپ

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا