سفارشی کردن بوتسترپ

راحت ترین راه سفارشی کردن bootstrap 4

شما برای تغییر و سفارشی کردن بوتسترپ چه کار می کنید؟ آیا فایل اصلی آن را باز می کنید و به سلیقه خودتان تغییر می دهید؟ (توجه کنید که این کار از اساس اشتباه است) یا اینکه یک فایل استایل جداگانه ایجاد می کنید و تغییراتی را که می خواهید در آن منظور می کنید؟ ویا با استفاده از متغیرهای sass تم سفارشی خودتون را بسازید؟ و یا شاید هم ترجیح می دهید از ابتدا بوتسترپ را به همان شکل و سلیقه ای که دوست دارید دانلود کنید؟
خوب شاید با خودتان فکر کنید که بله ترجیح می دهم که اول تمامی تغییراتی را که دوست دارم مانند رنگ المنت ها، سایز و… منظور کنم و در نهایت فایل سفارشی شده ی بوتسترپ را دانلود و استفاده کنم.
دقیقا این راه، یعنی راحت ترین روش سفارشی کردن بوتسترپ. البته راحت ترین روش لزوما به معنی بهترین روش نیست. خیلی از طراحان وب ترجیح می دهند که خودشان استایل سفارشی بنویسند و فایل آن را بعد از بوتسترپ قرار دهند. این روش یعنی اول فایل بوتسترپ اجرا می شود و بعد از آن فایل استایل جدید.

در اینجا قصد دارم شما را با راحت ترین روش آشنا کنم. امیدوارم که این روش سرعت شما را در طراحی بالا ببرد و زمان بیشتری برایتان ذخیر شود.

تعداد عناصری که می توانید آن ها به سلیقه خودتان تغییر دهید خیلی زیاد است. بوتسترپ ۴ هم این امکان را به شما می دهد که تمام این عناصر را سفارشی کنید. از تغییر اندازه gridها تا تغییر رنگ در یک progress bar. هرچند که قسمت customize بوتسترپ بسیار انعطاف پذیر است اما با وجود بیش از پانصد متغییر sass کار به همین سادگی ها هم نیست.
اپلیکیشن Epic Bootstrap یک ابزار بسیار قوی در اختیارتان قرار می دهد که بدون نیاز به نوشتن حتی یک خط کد scss می توانید themeهای جدید بوتسترپ بسازید.

 

 

روش کار بسیار ساده است. وارد Epic Bootstrap شوید و گزینه یLaunch App را کلیک کنید تا وارد قسمت سفارشی سازی شوید. در اینجا در قسمت چپ صفحه المانی را که می خواهید تغییر دهید را انتخاب کنید. در قسمت وسط صفحه بر روی قسمت مورد نظری که دقیقا می خواهید تغییرات در آن ایجاد شود کلیک کنید سپس در قسمت راست صفحه تغییرات مورد نظر را وارد کنید. این تغییرات می تواند شامل هر چیزی باشد. از تغییر رنگ گرفته تا تغییر سایز که به راحتی می توانید تمام جزئیات را تغییر دهید.

 

 

پس از اینکه تمام تغییراتی را که میخواستید را وارد کردید از قسمت بالا سمت راست گزینه دانلود را کلیک کنید و تم بوتسترپ جدید را که خودتان ساخته اید را با نام boosttrap.epic.css را دانلود کنید. از این فایل در پروژه خود استفاده کنید.

 

مزایا و معایب اسفتاده از Epic Bootstrap

مزایا:

  • سرعت زیاد در سفارشی سازی
  • قابلیت تغییر در تمام قسمت ها حتی جزئیات
  • راحتی و سهولت در استفاده
  • امکان مشاهده تغییرات در همان لحظه
  • امکان ساخت تم های مخلفت و نگهداری آن ها به صورت فایل جداگانه

معایب:

  • عدم امکان استفاده از CDN برای فایل CSS
  • به روز نشدن فایل

 

 

استفاده از Epic Bootstrap بسیار هیجان انگیز است و حداقل برای یک بار هم که شده ارزش امتحان کردن را دارد.

 

 

نویسنده: سعید پناهی

طراح و توسعه دهنده وب، رابط کاربری. فرانت اند. علاقه مند به یادگیری و آموزش

پاسخی بگذارید

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

احتمالا از اینها هم خوشتون بیاد

آموزش css3

آموزش دستورات خاص و کاربردی در CSS3

در این مقاله تعدادی از دستورات جالب و کاربردی در CSS3 را بررسی می کنیم. دستوراتی که کمتر در مورد آن ها صحبت می شود اما دانستن آنها مهم و در طراحی کمک بزرگی به ما می کند. خوب پس در ادامه با من همراه باشید.

کارگاه آموزشی طراحی وب

کارگاه آموزشی طراحی و توسعه وب سایت به صورت پروژه محور و کارگاهی

بررسی واحدهای REM -EM – VH- VW و تفاوت بین آنها

برای مدت های طولانی طراحان و توسعه دهندگان وب سایت ها برای اندازه گذاری فونت، حاشیه و یا هر عنصر دیگری از واحد px که نشان دهنده پیکسل بود استفاده می کردند. اما امروزه با توجه به گسترش استفاده از دستگاه های مختلف مانند موبایل و تبلت برای نمایش وب سایت ها لزوم استفاده از واحدهایی که کنترل بیشتری به توسعه دهنده و طراح بدهد بیشتر شد. از این رو واحدهای rem و em تقریبا جای واحد px را گرفت.