🧩 هشتم- مینی پروژه - بخش پایانی

📘 مفاهیم مهم:

1️⃣ تعریف Nesting (تودرتویی)

• Nesting یعنی قرار دادن یک سیستم گرید درون ستون‌های دیگر برای ایجاد ساختارهای چندلایه و انعطاف‌پذیر.
• به‌صورت ساده، یعنی داخل یک .col می‌توان دوباره از .row و .col جدید استفاده کرد.

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

2️⃣ ساختار کلی Nesting در گرید

نمونه‌ی ساختار تودرتو:

<div class="row">
  <div class="col-12 col-md-8">
    <div class="row">
      <div class="col-6">محتوا ۱</div>
      <div class="col-6">محتوا ۲</div>
    </div>
  </div>
  <div class="col-12 col-md-4">سایدبار</div>
</div>

در این مثال، داخل ستون اول (col-md-8) یک ردیف جدید (row) ایجاد شده که خودش شامل دو ستون است.

3️⃣ کاربرد Nesting در طراحی رسپانسیو

• هر سطح از تودرتویی می‌تواند قواعد ریسپانسیو مخصوص به خود را داشته باشد.
• این کار باعث می‌شود بخش‌های داخلی (مثل کارت‌ها، گالری تصاویر یا قسمت‌های جزئی محتوا) نیز به‌صورت مستقل واکنش‌گرا (Responsive) باشند.
• کلاس‌های مربوط به Breakpointها (مثل col-sm-*, col-md-*, col-lg-*) در هر سطح از Nesting قابل استفاده‌اند.

4️⃣ نکات مهم در پیاده‌سازی:

• حتماً داخل هر .col که می‌خواهید ساختار جدید بسازید، ابتدا یک .row جدید ایجاد کنید.
• بهتر است از گاترها (g-*) در هر سطح استفاده شود تا فاصله بین المان‌ها حفظ شود.
• Nesting زیاد ممکن است ساختار HTML را پیچیده کند؛ باید با تعادل استفاده شود.