-
2
سبد خرید
-
مجموع سفارش: ۱,۰۰۰.۰۰
- مشاهده سبد خرید تسویه حساب
- 4
-
15
-
آوا
مدیر
کامپوننتهای جدول
اجزای رابط کاربری
| دکمه | بوتاسترپ شامل شش سبک پیشفرض دکمه است که هر کدام کاربرد معنایی خاص خود را دارند. | |
| دکمههای گرد | برای دکمههای گرد از کلاس .btn-pill استفاده کنید. |
|
| دکمههای کشویی | برای دکمه کشویی از کلاس .dropdown-toggle استفاده کنید. |
|
| گروه دکمه پایه |
|
برای گروهبندی دکمهها از کلاس btn-group استفاده کنید. |
| دکمهها با آیکون | بوتاسترپ شامل شش سبک پیشفرض دکمه است که هر کدام کاربرد معنایی خاص خود را دارند. | |
| دکمه آیکون | دکمه ساده آیکون | |
| دکمههای بارگذاری | دکمههای انیمیشنی باز شونده |
هشدارها
| هشدار پایه |
موفقیت! نشاندهنده یک عملیات موفق یا مثبت است. |
هشدارها برای هر طول متنی در دسترس هستند، و همچنین یک دکمه اختیاری برای بستن. برای ایجاد هشدار با تمام رنگهای تم، کلاسهای |
| هشدار با لینک |
موفقیت! شما باید این پیام را بخوانید. |
هشدارها برای هر طول متنی در دسترس هستند و یک دکمه اختیاری برای بستن دارند. برای ایجاد هشدار با تمام رنگهای تم، کلاسهای |
| هشدار قابل بستن |
وای! شما میتوانید برخی از فیلدهای زیر را بررسی کنید. |
یک دکمه بستن اضافه کنید و کلاس alert alert-dismissible را اضافه کنید، که فضای اضافی در سمت راست هشدار ایجاد میکند و لینک close را قرار میدهد. برای دکمه بستن، ویژگی data-bs-dismiss="alert" را اضافه کنید تا عملکرد جاوااسکریپت فعال شود. برای انیمیشن هنگام بستن هشدار، کلاسهای .fade و .in را اضافه کنید.
|
| هشدار با آیکون |
صبح بخیر! روز خود را با چند هشدار شروع کنید. |
یک دکمه بستن اضافه کنید و کلاس alert alert-dismissible را اضافه کنید، که فضای اضافی در سمت راست هشدار ایجاد میکند و لینک close را قرار میدهد. برای دکمه بستن، ویژگی data-bs-dismiss="alert" را اضافه کنید تا عملکرد جاوااسکریپت فعال شود. برای انیمیشن هنگام بستن هشدار، کلاسهای .fade و .in را اضافه کنید.
|
نوار پیشرفت (Progressbar)
| نوار پیشرفت پیشفرض |
|
استفاده از نوار پیشرفت با کلاس progress-bar و رنگ پسزمینه bg-primary, bg-secondary نیز قابل تغییر است. |
| نوار پیشرفت راهراه |
|
استفاده از گرادیان برای ایجاد اثر راهراه با کلاس progress-bar-striped. |
| اندازههای نوار پیشرفت |
|
اندازههای مختلف نوار پیشرفت. برای نوار پیشرفت پیشفرض، نیاز به کلاس lg-progress-bar در div است. |
چکباکس
| چکباکس پایه | چکباکس پایه | |
| چکباکس مربعی پیشفرض |
|
با کلاس .m-Square بستهبندی شود برای سبک مربعی چکباکس. |
| چکباکس اسکین پایه |
|
با کلاس checkbox-dark بستهبندی شود برای این سبک چکباکس. |
| چکباکس اسکین فلت |
|
با کلاس checkbox-solid-* و primary, secondary, success, info, warning, danger بستهبندی شود برای این سبک چکباکس. |
| چکباکس غیرفعال |
|
با کلاس disabled و primary, secondary, success, info, warning, danger بستهبندی شود برای سبک چکباکس غیرفعال. |
| چکباکسهای خطی |
|
با کلاس primary, secondary, success, info, warning, danger بستهبندی شود برای این سبک چکباکسهای خطی. |
دکمههای رادیو
انتخاب
| انتخاب تکتایی | برای کنترل انتخاب پایه استفاده میشود. | |
| حالت غیر فعال | برای کنترل انتخاب غیر فعال، کلاس disabled اضافه کنید. |
|
| حالت انتخاب بزرگ و کوچک | برای انتخاب بزرگ یا کوچک، کلاس form-control-lg یا form-control-sm اضافه کنید. |
|
| انتخاب چندتایی | برای انتخاب چندتایی، ویژگی multiple را به select اضافه کنید. |
ورودی
| ورودی متن پیشفرض | برای کنترل ورودی پایه استفاده میشود. | |
| رنگ هاور ورودی | برای تغییر رنگ ورودی هنگام هاور، کلاس input-air-* مانند primary, secondary, success, info اضافه کنید. |
نشانها (Badges)
| نشانهای پایه | اصلی | از کلاس .badge استفاده کنید و سپس برای رنگ نشان از کلاس .badge-* مثل primary, secondary, success, info, warning, danger, light استفاده کنید تا یک نشان پیشفرض ایجاد شود. |
| برچسب با آیکون |
برچسب اصلی
|
از کلاس label-square همراه با div استفاده کنید. |
فعالسازیهای Tooltip
| هاور | برای فعالسازی هاور از data-bs-toggle="tooltip" استفاده کنید. این یک فعالسازی پیشفرض است. |
|
| لینک | Link | برای فعالسازی لینک از a href="#" استفاده کنید. این یک فعالسازی لینک است. |
| دکمه Outline | برای فعالسازی Outline از btn btn-outline-info استفاده کنید. برای دکمه با حاشیه ضخیم از کلاس btn btn-outline-dark-2x استفاده کنید. |
سوئیچ
| سوییچ پیشفرض | برای برچسب از کلاس switch استفاده کنید. |
|
| سوییچ غیرفعال | این سوییچ با استفاده از disabled غیرفعال شده است. |
|
| رنگ سوییچ |
|
برای تغییر رنگ از کلاس bg-* مانند Primary, Secondary, Success, Info, Warning, Danger در span استفاده کنید و برای نمایش آیکون سوییچ از icon-state روی div استفاده کنید. |
| سوییچ Outline |
|
برای این سبک، از کلاس switch-outline روی div استفاده کنید. |