توسعه فرانت‌اند

چیت‌شیت Bootstrap

مرجع سریع سیستم شبکه، breakpointها، utilityها و کامپوننت‌های Bootstrap برای ساخت رابط واکنش‌گرا. سیستم grid در Bootstrap 5.3 بر پایهٔ container، row و ستون‌های responsive است. breakpointها mobile-first هستند و کلاس بزرگ‌تر از اندازهٔ مشخص به بالا اثر می‌کند. Utilityها برای تغییر display، flex، spacing و متن بدون ساخت کلاس جدید مناسب‌اند. از نام‌گذاری جهت‌دار و RTL نسخهٔ درست استفاده کنید. از این صفحه به‌عنوان مرجع سریع استفاده کنید و مثال‌ها و نکته‌ها را با نسخهٔ ابزار، نیاز و شرایط واقعی پروژهٔ خود تطبیق دهید.

NOVIN SKILLS / DIGITAL STUDIO

Container و row

محتوا را در container قرار دهید و ستون‌ها را داخل row بسازید.

1<div class="container">2  <div class="row">3    <div class="col">ستون</div>4    <div class="col">ستون</div>5  </div>6</div>

ستون responsive

عرض تمام‌صفحهٔ موبایل و دو ستون از breakpoint متوسط.

1<div class="row">2  <div class="col-12 col-md-6">نیمهٔ اول</div>3  <div class="col-12 col-md-6">نیمهٔ دوم</div>4</div>

Breakpointهای Bootstrap 5

مقادیر پیش‌فرض را با نسخه و پیکربندی build پروژه تطبیق دهید.

1sm  >= 576px2md  >= 768px3lg  >= 992px4xl  >= 1200px5xxl >= 1400px

Gutter شبکه

فاصلهٔ افقی و عمودی ستون‌ها را با gutterهای row تنظیم کنید.

1<div class="row g-3">2  <div class="col-md-6">Item A</div>3  <div class="col-md-6">Item B</div>4</div>

Display و Flex

چیدمان flex را با utilityهای display و alignment بسازید.

1<div class="d-flex align-items-center justify-content-between gap-3">2  <span>عنوان</span>3  <button class="btn btn-primary">اقدام</button>4</div>

Spacing

در Bootstrap، m برای margin و p برای padding است.

1m-3   margin all sides2mt-2  margin top3px-4  padding left/right4gap-3 flex/grid gap5mx-auto centered block

Responsive utility

پسوند breakpoint را برای اعمال utility از عرض مشخص اضافه کنید.

1<div class="d-none d-md-flex">2  فقط از md به بالا نمایش داده می‌شود3</div>

Text alignment و رنگ

رنگ و تراز را با utilityهای سازگار با جهت صفحه انتخاب کنید.

1<p class="text-body-secondary text-md-start">2  متن کمکی3</p>4<span class="text-success">موفق</span>

دکمه‌ها

variant دکمه را با نقش و اهمیت اقدام هماهنگ کنید.

1<button class="btn btn-primary">ذخیره</button>2<button class="btn btn-outline-secondary">لغو</button>3<button class="btn btn-danger" disabled>حذف</button>

فرم و label

هر input را با label و نام قابل‌فهم برای دسترس‌پذیری همراه کنید.

1<label for="email" class="form-label">ایمیل</label>2<input id="email" class="form-control" type="email"3  autocomplete="email" required>

Alert و Card

برای پیام وضعیت و محتوای گروه‌بندی‌شده از کامپوننت‌های پایه استفاده کنید.

1<div class="alert alert-success" role="status">2  تغییرات ذخیره شد.3</div>4<article class="card">5  <div class="card-body">محتوای کارت</div>6</article>

JavaScript bundle

bundle شامل Popper برای dropdown، tooltip و popover است.

1<script src="/path/to/bootstrap.bundle.min.js"></script>

فعال‌کردن RTL در سند

زبان و جهت سند را صریح تعیین کنید.

1<html lang="fa" dir="rtl">2  <body>...</body>3</html>

تراز منطقی متن

از start و end برای تراز سازگار با جهت استفاده کنید.

1<p class="text-start">ابتدای متن</p>2<p class="text-end">انتهای متن</p>

CSS variables

توکن‌های CSS را در scope مناسب بازنویسی کنید.

1:root {2  --bs-primary: #176b5b;3  --bs-border-radius: 0.75rem;4}

برای استفاده در پروژه

نکات کلیدی

۱
نسخه Bootstrap را در پروژه تثبیت کنید و مستندات همان نسخه را مبنای کلاس‌ها قرار دهید.
۲
ساختار شبکه را با container، row و ستون‌هایی مانند col-md-6 بسازید.
۳
Breakpointها را mobile-first بخوانید؛ کلاس col-lg-* از عرض تعیین‌شده به بالا اعمال می‌شود.
۴
از gutterهای شبکه برای فاصله ستون‌ها استفاده کنید و فاصله‌های اضافی را با marginهای متضاد اصلاح نکنید.
۵
برای چیدمان‌های استاندارد ابتدا utilityهای spacing، display، flex و text را بررسی کنید.
۶
کامپوننت‌هایی مثل navbar، modal و dropdown را با markup و نیاز JavaScript همان نسخه پیاده کنید.
۷
برای فرم‌ها label، پیام خطا و وضعیت اعتبارسنجی را به‌صورت دسترس‌پذیر و قابل فهم نمایش دهید.
۸
کلاس‌ها و رنگ‌های سفارشی را با Sass variable یا CSS variableهای نسخه هماهنگ کنید.
۹
در RTL از نسخه یا پیکربندی رسمی RTL استفاده کنید و ترتیب آیکن‌ها، فاصله‌های جهتی و فرم‌ها را بازبینی کنید.
۱۰
از ترکیب بی‌هدف Bootstrap با utility framework دیگر بپرهیزید و در چند breakpoint خروجی واقعی را آزمایش کنید.
۱۱
کلاس‌های responsive را از breakpoint پایه به بالا بخوانید و در viewportهای مرزی یک پله پایین و بالا آزمایش کنید.
۱۲
برای نسخهٔ 5.3، JavaScript موردنیاز componentها را جداگانه وارد کنید و وابستگی را بی‌جهت به کل bundle گسترش ندهید.