BS5 Images

15 دقیقه Article

تصاویر (Images) 🖼️

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

تصویر واکنش‌گرا

با کلاس .img-fluid، تصویر حداکثر ۱۰۰٪ عرض والد خود را اشغال می‌کند و ارتفاع آن به صورت خودکار تنظیم می‌شود:

{code_block('

')}

شکل‌ها

.rounded: گوش‌های گرد.
.rounded-circle: تبدیل تصویر مربع به دایره.
.img-thumbnail: افزودن حاشیه و پدینگ.

تمرین کنید: بوت‌استرپ ابزاری است که با استفاده مداوم در ذهن می‌نشیند. سعی کنید کامپوننت‌ها را ترکیب کنید و طرح‌های خلاقانه بسازید.

نکته حرفه‌ای: تفکر واکنش‌گرا (Responsive Mindset) 📱💻

بوت‌استرپ فقط مجموعه‌ای از کلاس‌ها نیست؛ یک فلسفه طراحی است ("Mobile-First"). در دنیای مدرن وب، شما سایت را برای موبایل می‌سازید و سپس آن را برای صفحات بزرگتر گسترش می‌دهید.

Best Practice: همیشه از کلاس‌های کاربردی (Utility Classes) برای تنظیم فاصله (Margin/Padding) استفاده کنید و از نوشتن CSS سفارشی برای کارهای ساده بپرهیزید. این کار حجم فایل CSS نهایی را کاهش می‌دهد.

تمرین‌های عملی

برای تثبیت یادگیری این درس تمرین‌های زیر را حل کنید

تصویر دایره‌ای Medium

سوال تمرین

یک تصویر با کلاس rounded-circle ایجاد کنید.

پاسخ تمرین

<img src="img.jpg" class="rounded-circle" alt="Circle Image">

آماده رفتن به درس بعدی هستید؟

این درس را به پایان رساندید و می‌توانید به درس بعدی بروید.

برای ذخیره پیشرفت وارد شوید

ParsRepo