BS5 Home

15 دقیقه Article

خانه (Bootstrap 5 Home) 🏠

به دوره جامع آموزش Bootstrap 5 خوش آمدید! بوت‌استرپ محبوب‌ترین فریم‌ورک CSS دنیاست که توسط توییتر توسعه داده شده است. نسخه 5 سریع‌تر، سبک‌تر و مدرن‌تر از همیشه است و دیگر وابستگی به jQuery ندارد.

چرا Bootstrap 5؟

طراحی واکنش‌گرا (Responsive) به صورت پیش‌فرض.
سیستم گرید قدرتمند و انعطاف‌پذیر.
کامپوننت‌های آماده (دکمه، منو، کارت و...).
پشتیبانی از SASS برای شخصی‌سازی عمیق.

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

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

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

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

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

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

اولین صفحه Medium

سوال تمرین

یک تگ h1 با کلاس text-primary ایجاد کنید که متن 'Hello Bootstrap' را نمایش دهد.

پاسخ تمرین

<!DOCTYPE html>
<html>
<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-primary">Hello Bootstrap</h1>
</body>
</html>

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

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

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

ParsRepo