Iconly/Curved/Arrow - Left 2Iconly/Curved/Arrow - CircleIconly/Curved/Arrow - SearchIconly/Curved/Arrow - cubeIconly/Curved/Arrow - checkIconly/Curved/Arrow - pieIconly/Curved/Arrow - plusIconly/Curved/Arrow - minusIconly/Curved/Arrow - heartIconly/Curved/Arrow - Arrow-downIconly/Curved/Arrow - WeatherIconly/Curved/Arrow - StarIconly/Curved/Home

کلاس‌های کمکی

  2. کیت های رابط کاربری
  3. کلاس‌های کمکی

حاشیه‌ها

از ابزارهای حاشیه برای اضافه یا حذف حاشیه یک عنصر استفاده کنید.

حاشیه‌های افزایشی
.border
.border-top
.border-bottom
.border-end
حاشیه‌های کاهشی
.border-0
.border-top-0
.border-end-0
.border-bottom-0
.border-start-0
شعاع افزایشی
.rounded
.rounded-top
.rounded-end
.rounded-bottom
.rounded-start
.rounded-pill
.rounded-circle

سبک‌های حاشیه

استفاده از هر المان برای دادن سبک‌های مختلف حاشیه با استفاده از کلاس‌های border-*radius/border-color/border-width.

کلاس شعاع حاشیه سفارشی
.rounded-0
.rounded-1
.rounded-2
.rounded-3
.rounded-4
.rounded-5
رنگ‌های حاشیه
.border-primary
.border-secondary
.border-success
.border-danger
.border-warning
.border-info
.border-dark
عرض حاشیه
.border-1
.border-2
.border-3
.border-4
.border-5
رنگ متن
A
.text-primary
A
.text-secondary
A
.text-success
A
.text-danger
A
.text-warning
A
.text-info
A
.text-dark
A
.text-light

رنگ پس‌زمینه

استفاده از هر مؤلفه برای افزودن رنگ پس‌زمینه با استفاده از .bg-* و .alert-light-* کلاس‌ها.

پس‌زمینه تیره
.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-dark
.bg-light
پس‌زمینه‌های روشن
.alert-light-primary
.alert-light-secondary
.alert-light-success
.alert-light-danger
.alert-light-warning
.alert-light-info
.alert-light-dark
رنگ‌های پس‌زمینه گسترش‌یافته
.light-card
.light-background

رنگ حاشیه

برای حاشیه‌ها از کلاس .b-*/.b-t-*/.b-b-*/.b-l-*/.b-r-* استفاده کنید.

.b-primary
.b-t-primary
.b-b-primary
.b-l-primary
.b-r-primary
.b-secondary
.b-t-secondary
.b-b-secondary
.b-l-secondary
.b-r-secondary
.b-success
.b-t-success
.b-b-success
.b-l-success
.b-r-success
.b-danger
.b-t-danger
.b-b-danger
.b-l-danger
.b-r-danger
.b-warning
.b-t-warning
.b-b-warning
.b-l-warning
.b-r-warning
.b-info
.b-t-info
.b-b-info
.b-l-info
.b-r-info
.b-dark
.b-t-dark
.b-b-dark
.b-l-dark
.b-r-dark
.b-light
.b-t-light
.b-b-light
.b-l-light
.b-r-light

اندازه تصاویر

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

img-size-50img-size-60img-size-70img-size-90img-size-100

سبک فونت

برای تعیین سبک فونت‌های مختلف از کلاس .f-s-* استفاده کنید [normal/italic/oblique/initial/inherit].

این یک سبک فونت .f-s-normal است

این یک سبک فونت .f-s-italic است

این یک سبک فونت .f-s-oblique است

این یک سبک فونت .f-s-inherit است

Font Weight

با استفاده از کلاس .f-w-*[100/300/400/600/700/900] می‌توانید وزن فونت‌های مختلف را تنظیم کنید.

می‌توانید وزن فونت سبک را با کلاس .f-w-100 تنظیم کنید
می‌توانید وزن فونت سبک را با کلاس .f-w-300 تنظیم کنید
می‌توانید وزن فونت معمولی را با کلاس .f-w-400 تنظیم کنید
می‌توانید وزن فونت کمی سنگین‌تر را با کلاس .f-w-600 تنظیم کنید
می‌توانید وزن فونت بولد را با کلاس .f-w-700 تنظیم کنید
می‌توانید وزن فونت بسیار بولد را با کلاس .f-w-900 تنظیم کنید

Text Colors

با استفاده از کلاس .font-* می‌توانید رنگ متن را تغییر دهید.

این متن با کلاس font-primary رنگ‌آمیزی شده است.
این متن با کلاس font-secondary رنگ‌آمیزی شده است.
این متن با کلاس font-success رنگ‌آمیزی شده است.
این متن با کلاس font-warning رنگ‌آمیزی شده است.
این متن با کلاس font-danger رنگ‌آمیزی شده است.
این متن با کلاس font-info رنگ‌آمیزی شده است.

Font Sizes

با استفاده از کلاس .f-*[14/16/18..etc] می‌توانید اندازه فونت‌ها را تنظیم کنید.

اندازه فونت .fs-6
اندازه فونت .fs-5
اندازه فونت .fs-4
اندازه فونت .fs-3
اندازه فونت .fs-2
اندازه فونت .fs-1