BS5 Get Started

15 دقیقه Article

شروع کار (Get Started) 🚀

برای استفاده از Bootstrap 5، دو راه اصلی دارید: استفاده از CDN (شبکه توزیع محتوا) یا دانلود فایل‌ها. روش CDN سریع‌ترین راه برای شروع است.

قالب پایه HTML5

یک صفحه استاندارد بوت‌استرپ باید شامل تگ meta name="viewport" باشد تا در موبایل به درستی نمایش داده شود:

{code_block('<meta name="viewport" content="width=device-width, initial-scale=1">')}

همچنین باید فایل CSS را در head و فایل JS را در انتهای body لینک کنید.

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

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

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

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

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

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

لینک کردن CDN Medium

سوال تمرین

لینک CSS بوت‌استرپ را به قسمت head اضافه کنید.

پاسخ تمرین

<html>
<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body></body>
</html>

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

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

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

ParsRepo