در این مطلب، به بررسی مهم‌ترین کلاس‌های کمکی بوت‌استرپ و کاربردهای آن‌ها می‌پردازیم.
۱. کلاس‌های کمکی برای فاصله‌ها (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)
بوت‌استرپ کلاس‌های کمکی برای تغییر رنگ متن و پس‌زمینه ارائه می‌دهد.
مثال:<div class="text-white bg-dark">این متن سفید با پس‌زمینه تیره است.</div>
۴. کلاس‌های کمکی برای نمایش (Display)
این کلاس‌ها به شما کمک می‌کنند تا نحوه نمایش عناصر را کنترل کنید.
مثال:<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)
این کلاس‌ها به شما کمک می‌کنند تا موقعیت عناصر را کنترل کنید.
مثال:<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)
با این کلاس‌ها می‌توانید مرزهای مختلف به عناصر اضافه کنید.
مثال:<div class="border rounded p-3">این عنصر دارای مرز و گوشه‌های گرد است.</div>
۱۰. کلاس‌های کمکی برای شناور کردن (Float)
این کلاس‌ها به شما کمک می‌کنند تا عناصر را به چپ یا راست شناور کنید.
مثال:<div class="float-left">این عنصر به چپ شناور شده است.</div>
