Bootstrap یکی از شناخته‌شده‌ترین و مشهورترین ابزارهای کدنویسی وب است که اساسا در مراحل ساخت وبسایت به طراحان وب کمک به سزایی می‌کند. این فریمورک دارای زیرساخت‌های از پیش طراحی شده است؛ به همین دلیل فضای کاربری آسانی دارد و سرعت طراحی صفحات وب را به طرز چشمگیری افزایش می‌دهد.
در Bootstrap از توابع جاوا اسکریپت در تولید و نمایش محتوا، دکمه‌ها و فرم‌ها استفاده می‌شود. در نسخهی جدید Bootstrap از Sass به‌عنوان پیش پردازنده‌ی انتخابی استفاده‌شده است. اگر بخواهیم طرح هایی را خارج از سبک بوت استرپ ایجاد کنیم، باید نحوهی بازنویسی بوت استرپ با Sass را بدانیم. ما در این مقاله با نحوهی ایجاد تغییرات در Bootstrap با استفاده از متغیرهای Sass آشنا می شویم.
آشنایی با Sass
وقتی که شما پروژه‌ای را با Sass برنامه نویسی می‌کنید، دیگر علاقه‌ای به نوشتن کدهای معمولی CSS نخواهید داشت. Sass در حقیقت یک زبان با سبک خاص است که به نوعی قدرت بیشتری از قابلیت‌های معمولی CSS دارد.
برای وب‌سایت‌های بزرگ‌تر و نسبتا پیچیده، استفاده از SASS ضروری است؛ چرا که این ابزاری عالی برای سر و سامان دادن به کدهای شما است. این ابزار به شما کمک می‌کند کارهای بیشتری با CSS انجام دهید و در زمان نوشتن کد صرفه‌جویی کنید. با استفاده از Sass می‌توانید متغیرها و ترکیب‌های توابع را بسازید و ساختار برگه‌های خود را به‌طورکلی سازمان دهی کنید.
چگونه SASS را به پروژه اضافه کنیم؟
طبق توصیه‌های ارائه‌شده استفاده از متغیرهای Sass برای ایجاد تغییرات در Bootstrap نتایج بسیار خوبی را به همراه داشته است. به همین دلیل کاربران زیادی با در نظر گرفتن موضوعات مختلف ازجمله زمینه‌ها، فونت‌ها و رنگ‌ها، سبک ارائه شده در Bootstrap را نادیده می‌گیرند و به دنبال طرح‌های جدید برای طراحی وبسایت خود هستند.
به‌منظور استفاده از ابزارهای بروز باید از نسخه‌های جدیدتر این فریمورک استفاده شود. برای همین ما توصیه میکنیم تا آخرین نسخه Bootstrap که در حال حاضر نسخهی 5.1 است را دانلود کنید. از نسخه 4 به بعد ، بوت استرپ نسبت به نسخه‌های قبلی خود تغییرات قابل توجهی کرده که یکی از آن‌ها تغییر از LESS به Sass است. شما به فایل‌های منبع Bootstrap نیاز دارید که نباید آن را با فایل‌های CSS/JS کامپایل شده اشتباه بگیرید. در اولین قدم باید فایل مربوط به این ابزار را از صفحه‌ی دانلود سایت این شرکت دانلود کنید و در محل نصب خود که در اصل Sass نام دارد، یک پوشه ایجاد کنید. حالا فریمورک بوت استرپ را در پوشه‌ی جدید که Vendors نام دارد اضافه کنید. توجه به این نکته ضروری است که بعد از نصب فایل باید مراقب باشید تا گزینه‌های به‌روزرسانی را نادیده بگیرید. چراکه ممکن است در صورت بروزرسانی این ابزار در مراحل اولیه مشکلاتی در ساختار آن ایجاد شود. هنگامی‌که فایل‌ها را از حالت فشرده خارج کردید، یک دایرکتوری sass پیدا خواهید کرد.
پوشه‌ی Bootstrap scss شامل چیست؟
پوشه‌ی Bootstrap scss شامل مجموعه‌ای از فایل‌های scss و همچنین 2 دایرکتوری، میکسین و ابزار کمکی با کدهای متغیر Sass بیشتر است. بعد از اضافه کردن بوت استرپ که روش آن توضیح داده شد، می‌توانید یک فایل کامپایل شده با نام bootstrap.scss دریافت کنید و در بخش طراحی خود اضافه کنید. حالا شما قادر هستید که از این ابزار برای طراحی‌های خود استفاده کنید. مورد دیگر درباره‌ی نحوهی ذخیره کردن فایل نهایی است؛ در نسخه‌های 4 به بعد Bootstrap در پسوند فایل‌های ذخیره‌شده عنوان default! به‌طور پیش‌فرض ایجاد می‌شود. شما برای ایجاد تغییرات فقط باید نام متغیر خود را کپی کنید و در همان پسوند درج کنید. دلیل ایجاد این تغییرات به خاطر قوانین طراحی وبسایت است که اصولا باید تمامی سبک‌های مربوط به Bootstrap نادیده گرفته شود تا بتوانیم ظاهر جدیدی را در سایت تعبیه کنیم.
محدود کردن متغیرهای Bootstrap
موضوع بعدی که بسیار حائز اهمیت است، لغو کردن متغیرهای مربوط به Bootstrap است. پس از یادگیری این مورد می‌توانید بخشی از این متغیرها را به‌طور کامل محدود کنید. توضیحات ارائه‌شده بر این اساس است که فایل مهم variables.scss که شامل تمامی متغیرهای ممکن است، باید کاملا تغییر یابد تا بتوانیم اطلاعات دلخواه و منتخب خود را در فایل نهایی که custom-variables.scss نام دارد ایجاد کنیم. تغییرات و سفارشی‌سازی‌ها باید در یک فایل custom.scss جداگانه نگهداری شوند، این فایل جدا از فایل‌های منبع Bootstrap Sass است. درک این موضوع بسیار ساده است؛ زمانی که این کدها در دو فایل جداگانه قرار می‌گیرند، هر تغییری که ایجاد می‌کنید بر منبع Bootstrap تاثیری نمی‌گذارد. جدا کردن این دو فایل همچنین تغییرات یا ارتقاء Bootstrap را در آینده بسیار آسان‌تر می‌کند. یکی از روش‌های شناخت کدهای رابط با متغیرهای Sass نحوهی نمایش آن‌ها است. چراکه در مراحل کامپایل این کدها با رنگ اصلی تم یعنی آبی ایجاد می‌شوند و شناسایی آن‌ها در بین کدها راحت‌تر است. مدیریت رنگ به material design گوگل متکی است. تغییرات در تم رنگی و روشن و تیره شدن رنگ‌ها، کنتراست رنگ‌های اصلی را ایجاد می‌کند. اگر فقط فایل‌های CSS معمولی دارید و می‌خواهید رنگ اصلی وبسایت خود را تغییر دهید، باید هر نمونه رنگ را تغییر دهید یا دستور find and replace را اجرا کنید.
بازنویسی متغیرهای دلخواه
اگر می‌خواهید ببینید چه متغیرهایی را می‌توانید بازنویسی کنید، همهی آن‌ها را در فایل modules/bootstrap/scss/_variables.scss بررسی کنید. می‌توانید هر یک از آن‌ها را بردارید و آن‌ها را در فایل _variables.scss خود به هر میزان که دوست دارید، اضافه کنید. این به شما آزادی و توانایی‌های سفارشی‌سازی بسیار زیادی می‌دهد و درعین‌حال باعث صرفه‌جویی در وقت شما می‌شود. علاوه بر این حفظ سبک‌ها نیز بسیار آسان‌تر خواهد بود.
قوانین کد نویسی در بوت استرپ
همانند هر ابزاری که در بستر اینترنت عرضه می‌شود، Bootstrap نیز دارای نقاط شکست متعددی است و باید با ایجاد تغییرات در ساختار آن از این مورد جلوگیری کرد. اولین حرکت برای جلوگیری، درج سطح‌های جدید در متغیر اصلی variables.scss است.
سفارشی کردن قوانین فاصله‌گذاری
در Bootstrap نیز قوانین مهمی بر پایهی کدنویسی وجود دارد که می‌تواند در نتیجهی نهایی یا نمایش تاثیر زیادی داشته باشد. یکی از آن‌ها ایجاد فاصله در بین کدها است، متغیرهایی که دراین‌باره مورد استفاده قرار می‌گیرند spacer$ نام دارند که دارای تنظیمات بسیاری ازجمله به‌روزرسانی و حذف و اضافه در مقدار کدها هستند.
از ابزارها در مواقع نیاز استفاده کنید
دلیل اینکه در اینترنت به این مطلب زیاد اشاره می‌شود، این است که Bootstrap می‌تواند کمک خوبی در طراحی سایت داشته باشد ولی متغیرهای آن با متغیرهای Sass هماهنگی مناسبی را ندارند. به دلیل این عدم تناسب توصیه می‌شود بعد از نصب این ابزار تمامی امکانات آن را لغو کرده و تنظیمات دلخواه خود را جایگزین کنید. مواردی که در متغیرهای Bootstrap ارائه می‌شود، شامل جداول، فهرست‌ها، نوار کاربری، صفحه‌بندی، دکمه‌ها و ابزارهای گوناگون است. لزومی ندارد که شما به‌طور کامل استفاده از این متغیرها را کنار بگذارید. شما می‌توانید از این موارد در صورت نیاز استفاده کنید. کاربران می‌توانند از کامپوننت‌های زیادی در این ابزار بهره‌مند شوند ولی در بیشتر منابع این مورد را نقض کرده‌اند و توصیه‌شده است تا تنها در صورت نیاز از این قابلیت‌ها استفاده شود. شما به‌عنوان یک برنامه‌نویس باید بدانید که کدنویسی در هر نقطه‌ای دارای وزن و ارزش خاصی است، برای همین باید دقت داشت تا با حد و اندازه‌ای مناسبی کدنویسی انجام شود. در این بخش نیز اگر از موارد Bootstrap به شکل مناسب استفاده نشود، باعث می‌شود تا در کدهای مربوط به CSS ارزش و وزن کم‌تری را داشته باشند و نتایج بدی را به همراه داشته باشد.
برخی از متغیرهای مفید بوت استرپ
همان‌طور که در بخش قبل اشاره شد، لزومی ندارد که شما تمام متغیرهای بوت استرپ را کنار بگذارید بلکه می‌توانید از هرکدام در صورت لزوم استفاده کنید. در ادامه چند مورد از بهترین متغیرها را معرفی کرده‌ایم. شما می‌توانید این متغیرها را در فایل scss/_variables.scss پیدا کنید.
enable-caret$: برای فعال کردن شبه عنصر caret در dropdown-toggle. استفاده کنید.
enable-rounded$: استفاده برای افزودن یا حذف شعاع حاشیه (پیش‌فرض: true)
enable-shadows$: استفاده برای افزودن یا حذف box-shadows (پیش‌فرض: false)
enable-gradients$: استفاده برای گرادیان‌ها از طریق تصویر پس‌زمینه (پیش‌فرض): false
enable-transitions$: استفاده برای افزودن یا حذف انتقال (پیش‌فرض: true)
enable-grid-classes$: برای افزودن یا حذف کلاس‌ها برای سیستم شبکه (پیش‌فرض: true)
سخن آخر
استفاده از Bootstrap می‌تواند برای افرادی که با بوت استرپ آشنا نیستند پیچیده باشد. فقط به یاد داشته باشید عملکردهای جستجوی ویرایشگر متن، دوست شما هستند و در صورت شک کردن به طراحی‌ها می‌توانند کمک‌کننده باشد. در این گفتار سعی شد که نحوه استفاده از متغیرهای SASS برای لغو برخی از ویژگی‌های بوت استرپ را به‌طور کامل شرح دهیم. فراموش نکنید که شما کنترل کاملی بر روی اجزای Bootstrap دارید که می‌تواند همه جوانب را شامل شود. اگر کامپوننت‌ها و ابزارهای Bootstrap وجود دارند که سایت شما از آن‌ها استفاده نمی‌کند، می‌توانید آن‌ها را حذف کنید تا فایل CSS کامپایل شده تا حد امکان سبک باشد. اگر در آینده نیاز به استفاده از کامپوننت‌ها دارید به‌سادگی آن‌ها را بازگردانی کنید.
در پایان، شما می‌توانید برای آموزش و آشنایی کافی با بوت استرپ در دوره‌ی آموزش سریع بوت Bootstrap 5 در سایت سکان آکادمی شرکت کنید. در این آموزش، تمامی ویژگی‌های کاربردی بوت‌استرپ، برای شروع کار با آن و ایجاد صفحات واکنش‌گرا به صورت عملی و همراه با مثال‌ها و پروژه‌های متعدد بیان می‌شود. و بهتر است بدانید که اگر در حال یادگیری مباحث فرانت‌اند هستید یا به دنبال موقعیت شغلی مناسبی در این زمینه می‌گردید، یادگیری بوت‌استرپ یک قدم کلیدی برای شماست.
