آموزش کار با رنگ‌ها و تصاویر در بوت‌استرپ


نویسنده:
سه شنبه ۶ آبان ۱۳۹۹
تصاویر در بوت‌استرپ

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

رنگ‌ها در بوت‌استرپ

رنگ ها در بوت استرپ به دو دسته‌ی رنگ‌های متن و رنگ‌های پس زمینه تقسیم می‌شوند. رنگ‌های بوت‌استرپ معمولا دارای معنای خاصی هستند و ما قصد داریم این رنگ‌ها را ابتدا در متون بررسی کنیم. این رنگ‌ها عبارت اند از:

  • .text-muted
  • .text-primary
  • .text-success
  • .text-info
  • .text-warning
  • .text-danger
  • , .text-secondary
  • .text-white
  • .text-dark
  • .text-body
  • .text-light

به مثال زیر توجه کنید:

همچنین می‌توانید از این رنگ‌ها برای لینک‌ها نیز استفاده کنید:

همچنین می‌توانید با استفاده از کلاس‌های text-black-50. و text-white-50. مقدار شفافیت (opacity) را برای متون سیاه یا سفید تنظیم کنید. به مثال زیر توجه کنید:

تا اینجا در مورد متون حرف زدیم ولی حالا می توان در رابطه با رنگ‌های پس زمینه نیز صحبت کرد. کلاس های رنگ های پس زمینه عبات اند از:

 .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light

به مثال زیر توجه کنید:

نکته ی قابل توجه این است که این کلاس ها رنگ خود متن را تغییر نمی دهند بنابراین اگر رنگ پس زمینه با رنگ متن همخوانی نداشت (به طور مثال قهوه ای و سیاه روی هم قابل خواندن نیستند) می توانید با کلاس های مربوط به متون رنگ را خواناتر کنید.

تصاویر در بوت‌استرپ

کلاس rounded. به تصاویر گوشه‌های زاویه دار می دهد:

اگر به گوشه های تصویر بالا نگاه کنید متوجه خواهید شد که گوشه ها اصلا تیز نیستند بلکه زاویه دار هستند. البته این زاویه بسیار کم است؛ شما می توانید با استفاده از کلاس rounded-circle. زاویه را در حد یک دایره قرار دهید. به مثال زیر توجه کنید:

برای ایجاد تصاویر بند انگشتی (thumbnail) می توانیم از کلاس img-thumbnail. استفاده کنیم. این کلاس به تصویر حاشیه نیز می دهد:

از طرفی با استفاده از کلاس های float-right. و float-left. می توان خاصیت float را برای تصاویر در نظر گرفت. به مثال زیر نگاه کنید:

در صفحه ی خروجی عرض قسمت خروجی (سمت راست) را بزرگتر کنید تا متوجه Float راست یا چپ دو تصویر بشوید.

برای قرار دادن تصویر در وسط صفحه باید از کلاس mx-auto. (برای تعیین margin:auto) و کلاس d-block. (برای تعیین display:block) استفاده کنید. ما این کار را در مثال زیر انجام داده ایم:

در آخر نیز برای اضافه کردن تصاویر واکنش گرا کلاس img-fluid. را روی <img> قرار می دهیم. در این حالت تصویر به مقیاس عنصر پدر خود در می آید تا زیباتر دیده شود. کلاس img-fluid. مقادیر ;max-width: 100% و ;height: auto را روی تصویر ما تنظیم می کند. مثال زیر را ببینید:

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

2 پاسخ به “آموزش کار با رنگ‌ها و تصاویر در بوت‌استرپ”

  1. hadi گفت:

    سلام. در یک carousel دیدم که از role=”listbox” استفاده شده، این کد رو حذف کردم، دیدم هیچ تاثیری روی carousel نداشت! اصلاً این کد برای چی هست؟

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

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