آموزش کلاس‌های کمکی بوت‌استرپ (Bootstrap Utilities)

بوت‌استرپ (Bootstrap) یکی از محبوب‌ترین فریم‌ورک‌های CSS است که به توسعه‌دهندگان کمک می‌کند تا به سرعت و با کمترین کدنویسی، رابط‌های کاربری زیبا و واکنش‌گرا (Responsive) ایجاد کنند. یکی از ویژگی‌های قدرتمند بوت‌استرپ، کلاس‌های کمکی (Utility Classes) آن است که به شما امکان می‌دهند بدون نیاز به نوشتن CSS اضافی، استایل‌های مختلف را به عناصر HTML خود اعمال کنید.

در این مطلب، به بررسی مهم‌ترین کلاس‌های کمکی بوت‌استرپ و کاربردهای آن‌ها می‌پردازیم.

۱. کلاس‌های کمکی برای فاصله‌ها (Spacing)

کلاس‌های کمکی فاصله‌ها در بوت‌استرپ به شما کمک می‌کنند تا margin و padding عناصر را به راحتی تنظیم کنید.

.m-* / .mt-* / .mb-* / .ml-* / .mr-* / .mx-* / .my-*: برای تنظیم margin (فاصله بیرونی) در جهات مختلف.
.p-* / .pt-* / .pb-* / .pl-* / .pr-* / .px-* / .py-*: برای تنظیم padding (فاصله داخلی) در جهات مختلف.
.m-auto / .mx-auto / .my-auto: برای تنظیم margin به صورت خودکار.

مثال:<div class="m-3 p-2 bg-light">این یک div با margin و padding است.</div>

۲. کلاس‌های کمکی برای متن (Text)

با استفاده از کلاس‌های کمکی متن، می‌توانید به راحتی استایل‌های متن مانند تراز، رنگ و وزن را تنظیم کنید.

.text-left: تراز متن به چپ.
.text-center: تراز متن به وسط.
.text-right: تراز متن به راست.
.text-uppercase: تبدیل متن به حروف بزرگ.
.font-weight-bold: متن با وزن bold.

مثال:<p class="text-center text-uppercase font-weight-bold">این متن وسط‌چین و بزرگ است.</p>

۳. کلاس‌های کمکی برای رنگ‌ها (Colors)

بوت‌استرپ کلاس‌های کمکی برای تغییر رنگ متن و پس‌زمینه ارائه می‌دهد.

.text-primary: متن با رنگ primary.
.bg-success: پس‌زمینه با رنگ success.

مثال:<div class="text-white bg-dark">این متن سفید با پس‌زمینه تیره است.</div>

۴. کلاس‌های کمکی برای نمایش (Display)

این کلاس‌ها به شما کمک می‌کنند تا نحوه نمایش عناصر را کنترل کنید.

.d-none: مخفی کردن عنصر.
.d-flex: نمایش عنصر به صورت flex.
.d-block: نمایش عنصر به صورت block.

مثال:<div class="d-flex justify-content-center">این عنصر به صورت flex و وسط‌چین است.</div>

۵. کلاس‌های کمکی برای Flexbox

با استفاده از این کلاس‌ها، می‌توانید به راحتی layoutهای flexbox ایجاد کنید.

.flex-row: جهت flex به صورت row.
.justify-content-between: تراز افقی با فاصله بین عناصر.
.align-items-center: تراز عمودی به وسط.

مثال:<div class="d-flex justify-content-between align-items-center">

۶. کلاس‌های کمکی برای موقعیت‌یابی (Positioning)

این کلاس‌ها به شما کمک می‌کنند تا موقعیت عناصر را کنترل کنید.

.position-absolute: موقعیت absolute.
.fixed-top: ثابت کردن عنصر به بالای صفحه.

مثال:<div class="fixed-top bg-light">این عنصر به بالای صفحه چسبیده است.</div>

۷. کلاس‌های کمکی برای سایه (Shadows)

با استفاده از این کلاس‌ها، می‌توانید سایه‌های مختلف به عناصر اضافه کنید.

.shadow-sm: سایه کوچک.
.shadow-lg: سایه بزرگ.

مثال:<div class="shadow-lg p-3">این عنصر دارای سایه بزرگ است.</div>

۸. کلاس‌های کمکی برای اندازه‌ها (Sizing)

این کلاس‌ها به شما کمک می‌کنند تا عرض و ارتفاع عناصر را تنظیم کنید.

.w-50: عرض ۵۰٪.
.h-100: ارتفاع ۱۰۰٪.

مثال:<div class="w-50 h-100 bg-info">این عنصر ۵۰٪ عرض و ۱۰۰٪ ارتفاع دارد.</div>

۹. کلاس‌های کمکی برای مرزها (Borders)

با این کلاس‌ها می‌توانید مرزهای مختلف به عناصر اضافه کنید.

.border: اضافه کردن مرز.
.rounded: اضافه کردن گوشه‌های گرد.

مثال:<div class="border rounded p-3">این عنصر دارای مرز و گوشه‌های گرد است.</div>

اشتراک گذاری: