📘 مفاهیم مهم:

1️⃣ مفهوم Gutter و پیاده‌سازی آن

• Gutter به فاصله‌ی بین ستون‌ها در گرید گفته می‌شود.
• برای ایجاد فضای تنفس بین ستون‌ها از margin یا padding استفاده می‌شود.

📌 هدف: افزایش خوانایی و نظم چیدمان المان‌ها در گرید.

2️⃣ معرفی و مفهوم کلاس‌های Utility

• کلاس‌های Utility کلاس‌های کمکی هستند که برای تغییر سریع ویژگی‌های خاص (مثل رنگ، فاصله، اندازه و گردی گوشه‌ها) بدون نیاز به نوشتن CSS جدید استفاده می‌شوند.

• مثال‌ها:

   

  <div class="bg-gray rounded"></div>
  <div class="text-center p-2"></div>
  

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

3️⃣ رسپانسیو کردن تصاویر

• برای اینکه تصاویر در همه‌ی اندازه‌های صفحه به‌درستی نمایش داده شوند، از utility زیر استفاده شد:

   

  .img-responsive {
    max-width: 100%;
    height: auto;
    display: block;
  }
  

• این کار از بیرون زدن تصاویر از محدوده‌ی ستون جلوگیری می‌کند.

4️⃣ مفهوم Offset و نحوه پیاده‌سازی آن

• Offset برای ایجاد فاصله از سمت راست یا چپ ستون استفاده می‌شود (شبیه margin در سیستم گرید).

• مثال از استفاده در کد:

   

  <div class="col-12 col-md-10 offset-md-1"></div>
  

• در این مثال ستون در سایز md یک ستون از سمت راست فاصله گرفته است.

📌 هدف: کنترل دقیق‌تر موقعیت ستون‌ها در چیدمان‌های خاص.

📄 جمع‌بندی:

در پایان این جلسه:

• گاترها برای ایجاد فاصله بین ستون‌ها پیاده‌سازی شدند.
• کلاس‌های کمکی (utility) معرفی شدند.
• تصاویر به‌صورت ریسپانسیو تنظیم شدند.
• مفهوم offset برای جابجایی هوشمند ستون‌ها در سیستم گرید اضافه شد.