Bootstrap چیست؟ معرفی فریم‌ورک CSS و کاربردهای آن

Bootstrap یک فریم‌ورک متن‌باز CSS و JavaScript برای ساخت سریع رابط کاربری واکنش‌گرا است؛ خودش سیستم مدیریت محتوا یا سازنده کامل وب‌سایت نیست. استفاده از آن به معنی «طراحی سایت بدون HTML و CSS» نیست.

Bootstrap چه قابلیت‌هایی دارد؟

سیستم Grid مبتنی بر Flexbox، کلاس‌های Utility برای فاصله و چیدمان، کامپوننت‌هایی مانند Navbar، Modal و Accordion، متغیرهای CSS و ابزارهای فرم از مهم‌ترین اجزای آن هستند. در مستندات Bootstrap 5.3 می‌توان مثال‌های فعال و APIهای مربوط را دید.

نمونه Grid واکنش‌گرا

<div class="container">
 <div class="row g-3">
  <div class="col-12 col-md-6">ستون اول</div>
  <div class="col-12 col-md-6">ستون دوم</div>
 </div>
</div>

نمونه بالا در موبایل یک ستون و از breakpoint متوسط به بالا دو ستون ایجاد می‌کند؛ البته فایل CSS نسخه مناسب Bootstrap باید به پروژه اضافه شده باشد.

نسخه ۵ چه تفاوتی با آموزش‌های قدیمی دارد؟

در Bootstrap 5 وابستگی اجباری به jQuery برای اجزای JavaScript حذف شده است. استفاده از کلاس‌ها و روش‌های قدیمی Bootstrap 4 در پروژه جدید می‌تواند نتیجه نادرست بدهد. برای انتخاب دقیق کلاس‌ها، نسخه مستندات را با نسخه نصب‌شده هماهنگ کنید.

پشتیبانی از زبان فارسی و RTL

Bootstrap 5.3 فایل RTL و مثال‌های راست‌به‌چپ دارد. علاوه بر فایل صحیح، مقدار dir="rtl" و تنظیمات نوشتاری مناسب لازم است. همه مؤلفه‌ها، فونت‌ها و آیکون‌های شخص ثالث را جداگانه تست کنید.

چه زمانی Bootstrap انتخاب مناسبی است؟

برای پنل مدیریتی، نمونه اولیه و پروژه‌هایی که نیاز به اجزای استاندارد و سرعت توسعه دارند انتخاب مناسبی است؛ اما در طرح‌های اختصاصی بسیار متفاوت، کلاس‌های آماده ممکن است به سفارشی‌سازی زیادی نیاز داشته باشند. Bootstrap جای طراحی تجربه کاربری و تست دسترس‌پذیری را نمی‌گیرد.

مقایسه با Tailwind CSS و CSS خام

Bootstrap مجموعه کامپوننت و سبک پایه آماده دارد؛ Tailwind رویکرد utility-first دارد و CSS خام کنترل کامل بدون وابستگی فریم‌ورک می‌دهد. انتخاب به اندازه پروژه، هماهنگی تیم و طراحی سیستم وابسته است.

منابع رسمی

• Bootstrap 5.3
• Bootstrap Grid
• Bootstrap RTL