ادامه مبحث گرید سیستم و شروع کار با Utility ها در بوت استرپ


ادامه مبحث گرید سیستم و شروع کار با Utility ها در بوت استرپ
برای خرید این درس نیاز است وارد سایت شوید. در صورت نداشتن حساب کاربری عضو شوید.

Utility  در bootstrap 4 چیست؟

در جلسه قبل در مورد مبحث گرید سیستم و breakpoint توضیح دادیم. breakpointها در واقع ساختاری هستند، که تعیین کننده سایز دستگاه های مختلف می باشند و براساس دستگاه‌ها و سخت افزارهای مختلف که ما معمولا در اختیار داریم، تقریبا در 5 دسته دستگاه‌هایی را که می‌توانند صفحات وب را نشان دهند در اختیار داریم، که در مورد سایزهای مختلف آن صحبت کردیم. در این جلسه ابتدا چند مثال دیگر را در مورد این مبحث باهم بررسی می‌کنیم وسپس با مفهموم utility در بوت استرپ 4 آشنا می‌شوید.


Utility: کلاس های آماده ایی هستند که بوت استرپ در اختیار ما قرار داده است، که به راحتی می‌توانیم از آن‌ها استفاده کنیم و همچنین باعث می‌شوند سرعت کد نویسی و استایل‌دهی به سایت بیشتر شود.


 آشنایی با دو نوع از utilityها در بوت استرپ 4:
Color: کلاس  color برای تعیین رنگ متن و پس زمینه استفاده می‌شود.

      کلاس های  Text-color (رنگ متن):

  • text-primary
  • text-success
  • text-danger
  • text-warning
  • text-info
  • text-dark
  • text-body
  • text-muted
  • text-black-50
  • text-secondary
  • text-white
  • text-light
  • text-white-50

 

کلاس رنگ ها


کلاس های background-color (رنگ پس زمینه):

  • bg-primary
  • bg-success
  • bg-danger
  • bg-warning
  • bg-info
  • bg-dark
  • bg-secondary
  • bg-white
  • bg-light
  • bg-transparent

 

کلاس رنگ پس زمینه

 

Border: کلاس border برای ایجاد یا حذف حاشیه استفاده می‌شود.
border: برای ایجاد یک border به اندازه 1px می‌باشد.
border-color: برای تعیین رنگ border از کلاس های زیر استفاده می‌کنیم:

  • border-danger
  • border-primary
  • border-success
  • border-warning
  • border-info
  • border-light
  • border-dark
  • border-white
  • border-secondary

 border add :(L,R,T,B) برای اضافه کردن border به در جهت‌های مختلف از کلاس‌های زیر استفاده می‌کنیم: مثلا یک شی تنها border سمت راست داشته باشد.


border-top: یک border قسمت بالا یک شی اضافه می‌کند.
border-bottom: یک border قسمت پایین یک شی اضافه می‌کند.
border-left: یک border سمت چپ یک شی اضافه می‌کند.
border-right: یک border سمت راست یک شی اضافه می‌کند.

border remove: برای حذف border از کلاس های زیر استفاده می کنیم:

  • border-0: یک شی را حذف می‌کند.
  • border-top-0: قسمت بالا یک شی را حذف می‌کند.
  • border-bottom-0: قسمت پایین یک شی را حذف می‌کند.
  • border-left-0: سمت چپ یک شی را حذف می‌کند.
  • border-right-0: سمت راست یک شی را حذف می‌کند.


rounded: برای ایجاد radius یک شی (گردی گوشه‌های یک شی) از کلاس‌های زیر استفاده می‌کنیم:

  • rounded: این کلاس باعث گردی گوشه‌های یک شی می‌شود.
  • rounded-top: گوشه‌های بالای یک شی را گرد می‌کند.
  • rounded-bottom: گوشه‌های پایین یک شی را گرد می‌کند.
  • rounded-left: گوشه‌های سمت راست یک شی را گرد می‌کند.
  • rounded-right: گوشه‌های سمت چپ یک شی را گرد می‌کند.
  • rounded-circle: یک شی مربعی را به دایره تبدیل می‌کند.
  • rounded-pill: مانند rounded-circle می‌باشد، با این تفاوت که اگر شی به شکل مستطیل باشد، فقط گوشه‌های سمت راست و چپ را گرد می‌کند.
  • rounded-0: گردی گوشه‌های یک شی را حذف می‌کند.
  • ronded size: برای تعیین اندازه radius یک شی از کلاس‌های زیر استفاده می‌کنیم:
  • rounded-lg: میزان گردی یک شی به سایز بزرگ می‌باشد.
  • rounded-sm: میزان گردی یک شی به سایز کوچک می‌باشد.


برای یادگیری این مبحث مثال‌ها و نکته‌های متعددی را در فایل ویدئویی آورده‌ایم که با تهیه این درس و مشاهده ویدئوها به طور کامل به این مبحث مسلط خواهید شد.


امیدواریم که این آموزش، برای شما دوستان درسمنی عزیز مفید باشد، درصورت سوال و یا مشکل می‌توانید به انجمن پرسش و پاسخ درسمن مراجعه کنید. پیشنهادات و انتقادات خود را در بخش نظرات برای ما ارسال کنید.smiley

انجمن برنامه نویسان وب


نظر بدهید

نشانی ایمیل شما منتشر نخواهد شد .
برای ارسال نظر نیاز است وارد سایت شوید. در صورت نداشتن حساب کاربری عضو شوید.

مشخصات دوره


مدرس دوره : مهدی عباسی
تعداد جلسات 24 جلسه
مدت زمان 601 دقیقه
حجم دوره 2/76 گیگابایت
سطح مهارت مقدماتی تا پیشرفته
وضعیت دوره پایان یافته
تعداد دانشجویان 148
: میانگین امتیاز

175,000تومان
برای دسترسی به این دوره وارد یا عضو شوید.
مهدی عباسی
مهدی عباسی

درباره مدرس :

مدیر‌ عامل‌ شرکت آریا‌ نرم‌‌ افزار دارنده مدرک کارشناسی‌ ارشد مهندسی کامپیوتر 12‌ سال سابقه تدریس دروس کامپیوتر را در دانشگاههای دولتی، آزاد، پیام‌نور ملایر، شهیدشمسی‌پور تهران و تدریس برنامه‌نویسی در ... ر انیستیتو ایزایران، مجتمع فنی و موسسه راه‌آینده تهران دارا میباشد و تا به حال راهنمایی انجمنهای علمی دانشگاه و صدها پروژه دانشجویی را برعهده داشته است. تخصص اصلی: با داشتن گواهی‌نامه‌های معتبر تدریس از انیستیتو‌ ایزایران، راه آینده‌تهران و سازمان‌فنی‌حرفه‌ای، تدریس و آموزش‌ دروس کامپیوتر، ‌برنامه‌نویسی کامپیوتر و کلاسهای کنکور کارشناسی و کارشناسی‌ارشد میباشد.همچنین تجربه داوری و نظارت مسابقات برنامه‌نویسی کشوری‌ACM را در سالهای متعدد داشته و تیم مورد رهبری ایشان در 3سال متوالی مقام اول مسابقات کشوری را از آن خود کرده است.ایشان مقالاتی در زمینه شبکه‌های کامپیوتری، تکنیک‌های وزارت دفاع و ... به ثبت رسانده و مشاور و کارشناس در طراحی و برنامه نویسی بیش از 50‌برنامه کاربردی تحت وب و ویندوز و موبایل میباشد. افتخارات دیگر:کسب مقام دوم ایده‌های برتر در مسابقات استارت‌آپ و بکند کشوری را نام برد.بیشتر بدانید