آموزش کامل Bootstrap 5: قدرتمندترین فریمورک
آموزش کامل Bootstrap 5: قدرتمندترین فریمورک前端
Bootstrap محبوب ترین فریمورک front-end برای توسعه وب سایت های ریسپانسیو و موبایل-فرست است. این فریمورک که توسط توییتر ساخته شده و اکنون توسط جامعه متن‌باز نگهداری می‌شود، به توسعه دهندگان اجازه می‌دهد بدون نیاز به نوشتن CSS پیچیده، رابط‌های کاربری زیبا و حرفه‌ای ایجاد کنند.
در سال ۲۰۲۶، Bootstrap 5 به عنوان نسخه پایدار و بالغ این فریمورک شناخته می‌شود و بسیاری از پروژه‌های تجاری از آن استفاده می‌کنند. در این مقاله جامع، تمام جنبه‌های Bootstrap 5 را بررسی خواهیم کرد.
فهرست مطالب
- Bootstrap چیست و چرا Bootstrap 5؟
- نصب و راه اندازی Bootstrap 5
- سیستم گرید (Grid System)
- کامپوننت‌های Bootstrap 5
- ابزارهای کمکی (Utilities)
- فرم‌ها و اعتبارسنجی
- سفارشی سازی با CSS Variables
- کار با آیکون‌های Bootstrap Icons
- ساخت تم و شخصی‌سازی
- بهترین روش‌های استفاده از Bootstrap
- مقایسه Bootstrap 5 با نسخه‌های قبلی
- نتیجه‌گیری
Bootstrap چیست و چرا Bootstrap 5؟
Bootstrap یک فریمورک open-source CSS است که مجموعه‌ای از ابزارها و کامپوننت‌های از پیش طراحی شده را در اختیار توسعه دهندگان قرار می‌دهد.
مزایای استفاده از Bootstrap 5:
- طراحی ریسپانسیو و سازگار با تمام دستگاه‌ها
- صرفه جویی در زمان توسعه
- سازگاری با تمام مرورگرهای مدرن
- مستندات کامل و جامعه بزرگ کاربران
- قابلیت سفارشی سازی بالا
- پشتیبانی از CSS Grid و Flexbox مدرن
- بدون وابستگی به jQuery (بر خلاف نسخه ۴)
- کاملاً مبتنی بر CSS Variables برای سفارشی‌سازی آسان
تغییرات مهم Bootstrap 5 نسبت به نسخه ۴:
- حذف وابستگی به jQuery
- افزوده شدن Utility API
- اضافه شدن RTL رسمی
- بهبود کامپوننت‌ها
- جداسازی آیکون‌ها به پکیج جداگانه (Bootstrap Icons)
- حذف تایپوگرافی گوگل فونت پیش‌فرض
- تغییر کلاس‌های سایز (sm, md, lg, xl, xxl)
نصب و راه اندازی Bootstrap 5
روش اول: استفاده از CDN (سریع‌ترین و رایج‌ترین روش)
برای استفاده از Bootstrap 5، کافی است لینک‌های CSS و JS را در فایل HTML خود اضافه کنید:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
روش دوم: نصب با NPM
اگر از ابزارهای مدرن مانند Webpack یا Vite استفاده می‌کنید:
npm install bootstrap@5.3.0
روش سوم: دانلود فایل‌ها
می‌توانید فایل‌های CSS و JS را از سایت رسمی Bootstrap دانلود کرده و به صورت لوکال استفاده کنید.
قالب اصلی HTML با Bootstrap:
یک صفحه HTML ساده با Bootstrap به این شکل است:
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 5 RTL</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.rtl.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>سلام دنیا!</h1>
</div>
</body>
</html>
سیستم گرید (Grid System)
قلب Bootstrap، سیستم گرید ۱۲ ستونی آن است که مبتنی بر Flexbox طراحی شده است.
کلاس‌های اصلی گرید:
- container: کانتینر اصلی برای نگهداری محتوا
- container-fluid: کانتینر با عرض کامل صفحه
- row: ایجاد ردیف جدید
- col: ایجاد ستون با توزیع خودکار
- col-*: ایجاد ستون با عرض مشخص (1 تا 12)
- col-sm-*، col-md-*، col-lg-*، col-xl-*، col-xxl-*: ستون‌های ریسپانسیو با breakpoint
مثال گرید ساده:
<div class="container">
<div class="row">
<div class="col">ستون ۱</div>
<div class="col">ستون ۲</div>
<div class="col">ستون ۳</div>
</div>
</div>
مثال گرید با عرض مشخص و ریسپانسیو:
<div class="container">
<div class="row">
<div class="col-12 col-md-6 col-lg-4">
در موبایل: ۱۲ ستون، تبلت: ۶ ستون، دسکتاپ: ۴ ستون
</div>
</div>
</div>
Breakpoint های Bootstrap 5:
- xs: عرض کمتر از 576px (بدون پیشوند)
- sm: عرض 576px و بیشتر
- md: عرض 768px و بیشتر
- lg: عرض 992px و بیشتر
- xl: عرض 1200px و بیشتر
- xxl: عرض 1400px و بیشتر
قابلیت‌های پیشرفته گرید:
- Nesting: قرار دادن گرید داخل گرید دیگر
- Ordering: تغییر ترتیب ستون‌ها با کلاس order
- Offset: ایجاد فاصله بین ستون‌ها با کلاس offset
- Gutters: تنظیم فاصله بین ستون‌ها با کلاس‌های g-*
کامپوننت‌های Bootstrap 5
Bootstrap 5 ده‌ها کامپوننت آماده و قابل استفاده دارد:
Navigation (ناوبری):
- Navbar: نوار منوی اصلی سایت
- Navs: منوهای ساده
- Breadcrumb: مسیرهای راهنما
- Pagination: صفحه‌بندی
کارت‌ها (Cards):
کارت‌ها یکی از پرکاربردترین کامپوننت‌ها هستند که برای نمایش محتوا استفاده می‌شوند.
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">عنوان کارت</h5>
<p class="card-text">توضیحات کارت</p>
<a href="#" class="btn btn-primary">دکمه</a>
</div>
</div>
دکمه‌ها (Buttons):
- btn-primary: دکمه آبی (اصلی)
- btn-secondary: دکمه خاکستری (فرعی)
- btn-success: دکمه سبز (موفقیت)
- btn-danger: دکمه قرمز (خطا)
- btn-warning: دکمه زرد (هشدار)
- btn-info: دکمه آبی روشن (اطلاعات)
- btn-light: دکمه سفید
- btn-dark: دکمه تیره
- btn-outline-*: دکمه با حاشیه
- btn-link: دکمه شبیه لینک
دکمه‌های گروهی و سایزها:
- btn-lg: دکمه بزرگ
- btn-sm: دکمه کوچک
- btn-group: گروه دکمه‌ها
آکاردئون (Accordion):
برای ایجاد بخش‌های تاشو و بازشونده مناسب برای سوالات متداول.
مودال (Modal):
پنجره‌های بازشونده برای نمایش محتوا، فرم‌ها یا تاییدیه‌ها.
تب‌ها (Tabs):
ایجاد ناوبری تب‌دار برای نمایش محتوای دسته‌بندی شده.
تولتیپ (Tooltip) و پاپ اور (Popover):
نمایش راهنمای ابزار و محتوای اضافی با هاور کردن.
پیشرفت نوار (Progress Bar):
نمایش درصد پیشرفت عملیات.
اسپینر (Spinner):
نمایش انیمیشن بارگذاری.
لیست گروه (List Group):
نمایش لیست‌های پیشرفته با قابلیت کلیک.
ابزارهای کمکی (Utilities)
Bootstrap 5 صدها ابزار کمکی برای استایل‌دهی سریع ارائه می‌دهد:
رنگ‌ها:
- text-primary, text-secondary, text-success
- bg-primary, bg-secondary, bg-light
فاصله‌ها (Spacing):
- m-*: حاشیه (margin) از 0 تا 5
- p-*: فاصله داخلی (padding) از 0 تا 5
- mt-*: margin-top
- mb-*: margin-bottom
- ms-*: margin-start (چپ در RTL)
- me-*: margin-end (راست در RTL)
- pt-*, pb-*, ps-*, pe-*: padding مشابه
اندازه‌گیری متن:
- fs-1 تا fs-6: سایز فونت
- fw-bold, fw-bolder, fw-light: وزن فونت
- fst-italic, fst-normal: استایل فونت
ترازبندی (Alignment):
- text-start, text-center, text-end: تراز متن
- text-sm-start, text-md-center: تراز ریسپانسیو
نمایش و مخفی کردن:
- d-none: مخفی کردن
- d-block: نمایش بلوک
- d-flex: نمایش فلکس
- d-sm-none: مخفی از سایز sm به بالا
- d-md-block: نمایش از سایز md به بالا
فلکس باکس (Flexbox Utilities):
- flex-row, flex-column: جهت فلکس
- justify-content-start, justify-content-center, justify-content-end: تراز افقی
- align-items-start, align-items-center, align-items-end: تراز عمودی
- gap-*, gap-sm-*: فاصله بین آیتم‌ها
سایه و border:
- shadow-sm, shadow, shadow-lg: سایه
- border, border-0, border-top: حاشیه
- rounded, rounded-circle, rounded-pill: گرد کردن گوشه‌ها
سایز و عرض:
- w-25, w-50, w-75, w-100: عرض百分比
- h-25, h-50, h-75, h-100: ارتفاع百分比
فرم‌ها و اعتبارسنجی
کلاس‌های فرم:
- form-control: برای input و textarea
- form-select: برای select
- form-check-input: برای checkbox و radio
- form-label: برای برچسب فرم
مثال فرم ساده:
<div class="mb-3">
<label for="name" class="form-label">نام</label>
<input type="text" class="form-control" id="name" placeholder="نام خود را وارد کنید">
</div>
اعتبارسنجی فرم:
Bootstrap 5 کلاس‌های مختلفی برای نمایش وضعیت اعتبارسنجی دارد:
- is-valid: وضعیت معتبر
- is-invalid: وضعیت نامعتبر
- valid-feedback: پیام تایید
- invalid-feedback: پیام خطا
مثال فرم با اعتبارسنجی:
<input type="text" class="form-control is-valid">
<div class="valid-feedback">تبریک! اطلاعات صحیح است
</div>
سفارشی سازی با CSS Variables
یکی از قدرتمندترین ویژگی‌های Bootstrap 5، استفاده از CSS Variables است که سفارشی‌سازی را بسیار آسان کرده است.
متغیرهای اصلی Bootstrap:
:root {
--bs-primary: #0d6efd;
--bs-secondary: #6c757d;
--bs-success: #198754;
--bs-danger: #dc3545;
--bs-warning: #ffc107;
--bs-info: #0dcaf0;
--bs-light: #f8f9fa;
--bs-dark: #212529;
}
تغییر رنگ اصلی:
<style>
:root {
--bs-primary: #6366f1;
--bs-secondary: #8b5cf6;
}
</style>
ایجاد تم سفارشی (Custom Theme):
با بازنویسی متغیرها می‌توانید تم شخصی خود را بسازید.
کار با آیکون‌های Bootstrap Icons
Bootstrap Icons یک کتابخانه آیکون متن‌باز است که بیش از ۲۰۰۰ آیکون SVG دارد.
نصب با CDN:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
استفاده از آیکون‌ها:
<i class="bi bi-house-door"></i> خانه
<i class="bi bi-envelope"></i> ایمیل
<i class="bi bi-github"></i> گیتهاب
سایز و رنگ آیکون‌ها:
<i class="bi bi-star-fill fs-1 text-warning"></i>
<i class="bi bi-heart fs-3 text-danger"></i>
ساخت تم و شخصی سازی پیشرفته
روش اول: سفارشی‌سازی با CSS اوورراید:
بعد از لود Bootstrap، یک فایل CSS سفارشی اضافه کنید و تنظیمات را تغییر دهید.
روش دوم: کامپایل SCSS (حرفه‌ای):
برای تغییرات عمیق‌تر، فایل SCSS را دانلود کنید، متغیرها را تغییر دهید و مجدداً کامپایل کنید.
مثال:
ابتدا متغیرها را در فایل custom.scss تغییر دهید:
$primary: #6366f1;
$enable-shadows: true;
$enable-gradients: true;
سپس Bootstrap را import کنید و فایل را کامپایل کنید.
بهترین روش‌های استفاده از Bootstrap
- همیشه از کلاس container استفاده کنید
- از سیستم گرید برای طراحی ریسپانسیو استفاده کنید
- از کلاس‌های کمکی (utilities) به جای نوشتن CSS سفارشی استفاده کنید
- فقط کامپوننت‌های مورد نیاز را import کنید (اگر از SASS استفاده می‌کنید)
- فایل CSS را فشرده (minify) کنید
- از Bootstrap Icons به جای آیکون‌های دیگر استفاده کنید
- برای فونت فارسی از Vazir استفاده کنید و RTL را فعال کنید
- از ابزارهای developer tools برای دیباگ استفاده کنید
- مستندات رسمی را مطالعه کنید (docs
- جامعه Bootstrap را دنبال کنید
مقایسه Bootstrap 5 با نسخه‌های قبلی
مقایسه با Bootstrap 4:
- حذف jQuery - کاهش حجم و افزایش سرعت
- اضافه شدن Utility API - سفارشی‌سازی راحت‌تر
- پشتیبانی رسمی از RTL
- اضافه شدن CSS Grid
- بهبود کلاس‌های فاصله‌گذاری
- حذف تایپوگرافی گوگل فونت
مقایسه با Bootstrap 3:
- تغییر کامل از CSS Float به Flexbox
- ساده‌تر شدن کلاس‌های گرید
- اضافه شدن کامپوننت‌های جدید
- بهبود عملکرد و سرعت
نتیجه گیری
Bootstrap 5 یک فریمورک کامل و قدرتمند برای توسعه رابط کاربری وب است. با یادگیری این فریمورک می‌توانید پروژه‌های خود را سریع‌تر و با کیفیت بالاتری توسعه دهید. سیستم گرید قدرتمند، کامپوننت‌های غنی و ابزارهای کمکی متعدد، Bootstrap را به انتخابی عالی برای هر نوع پروژه وب تبدیل کرده است.
اگر تازه شروع به کار با Bootstrap کرده‌اید، توصیه می‌کنم ابتدا با سیستم گرید و ابزارهای کمکی آشنا شوید، سپس به سراغ کامپوننت‌ها بروید. با تمرین و استفاده مداوم، Bootstrap به ابزاری قدرتمند در جعبه ابزار شما تبدیل خواهد شد.
نویسنده: محمدمهدی محمودی
تاریخ انتشار: ۱۳ خرداد ۱۴۰۵
نسخه Bootstrap: 5.3 و بالاتر
منابع: مستندات رسمی Bootstrap، Bootstrap Icons