BS5 Grid Basic

15 دقیقه Article

پایه‌های گرید (Grid Basic) 📏

سیستم گرید بوت‌استرپ بر اساس مدل 12 ستونی ساخته شده است. این سیستم با استفاده از Flexbox پیاده‌سازی شده و به شما اجازه می‌دهد طرح‌های پیچیده واکنش‌گرا بسازید.

ساختار

سه جزء اصلی گرید عبارتند از:

Container: ظرف اصلی.
Row: سطر (.row) که ستون‌ها را در بر می‌گیرد.
Column: ستون‌ها (.col) که محتوا را نگه می‌دارند.

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

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

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

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

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

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

دو ستون مساوی Medium

سوال تمرین

یک سطر (row) با دو ستون (col) ایجاد کنید که هر کدام متن 'Column' را داشته باشند.

پاسخ تمرین

<div class="container">
  <div class="row">
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

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

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

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

ParsRepo