کامپوننت های جدول
کامپوننت های UI
| دکمه | بوت استرپ شامل شش سبک دکمه از پیش تعریف شده است که هر کدام هدف معنایی خود را انجام می دهند. | |
| دکمه های دور گرد | از کلاس .btn-pill برای دکمه های گرد استفاده کنید. |
|
| دکمه فهرست کشویی | از کلاس .dropdown-toggle برای دکمه فهرست کشویی استفاده کنید.
|
|
| دکمه گروهی پایه |
|
از کلاس btn-group برای دکمه div استفاده کنید.
|
| دکمه با آیکون | بوت استرپ شامل شش سبک دکمه از پیش تعریف شده است که هر کدام هدف معنایی خود را انجام می دهند. | |
| دکمه آیکون | دکمه آیکون ساده | |
| دکمه های لودینگ | دکمه های انیمیشن را گسترش دهید |
هشدار ها
| هشدار پایه |
موفق! نشان دهنده یک اقدام موفق یا مثبت است. |
هشدارها برای هر طول متن و همچنین یک دکمه رد اختیاری در دسترس هستند. افزودن کلاس
های |
| هشدار به همراه لینک |
موفق! شما باید این پیام را بخوانید. |
هشدارها برای هر طول متن و همچنین یک دکمه رد اختیاری در دسترس هستند. افزودن کلاس
های |
| هشدار با قابلیت حذف |
بسیار خب ! در زیر می توانید برخی از آن فیلدها را بررسی کنید. |
یک دکمه رد کردن و کلاس alert alert-dismissable اضافه کنید، که
بالشتک اضافی را به سمت راست هشدار اضافه می کند و بستن را یک پیوند در دکمه
رد کردن، قرار می دهد، داده ها را اضافه کنید. ویژگی -bs-dismiss="alert" که عملکرد جاوا
اسکریپت را فعال می کند. حتماً از عنصر a برای رفتار مناسب در همه دستگاهها
استفاده کنید. برای متحرک کردن هشدارها هنگام رد کردن آنها، حتماً کلاسهای .fade و .in
را اضافه کنید. |
| هشدار با آیکون |
صبح بخیر! روز خود را با چند هشدار شروع کنید. |
یک دکمه رد کردن و کلاس alert alert-dismissable اضافه کنید، که
بالشتک اضافی را به سمت راست هشدار اضافه می کند و بستن را یک پیوند در دکمه
رد کردن، قرار می دهد، داده ها را اضافه کنید. ویژگی -bs-dismiss="alert" که عملکرد جاوا
اسکریپت را فعال می کند. حتماً از عنصر a برای رفتار مناسب در همه دستگاهها
استفاده کنید. برای متحرک کردن هشدارها هنگام رد کردن آنها، حتماً کلاسهای .fade و .in
را اضافه کنید. |
نوار پیشرفت
| نوار پیشرفت پیش فرض |
|
از نوار پیشرفت با کلاس progress-bar و رنگ پس زمینه
bg-primary, bg-secondary نیز تغییر می کند استفاده می کند. |
| نوار پیشرفت راه راه |
|
از یک گرادیان برای ایجاد کلاس افکت راه راه استفاده می کند.
progress-bar-striped |
| سایز نوار پیشرفت | پیشرفت در اندازه های مختلف برای پیشرفت پیشفرض، کلاس به
lg-progress-bar در div نیاز دارد. |
چک باکس
| چک باکس پایه | چک باکس پایه | |
| چک باکس پیش فرض مربعی |
|
با استفاده از کادر انتخاب .m-squar بپیچید. |
| پوسته انتخاب پایه |
|
با استفاده از checkbox-dark برای این سبک از چک باکس بپیچید.
|
| پوسته انتخاب فلت |
|
با استفاده از checkbox-solid-*، اولیه، ثانویه، موفقیت،
اطلاعات، هشدار، خطر برای این سبک از چک باکس استفاده کنید. |
| انتخاب غیرفعال |
|
با استفاده از غیرفعال، اصلی، ثانویه، موفقیت، اطلاعات، هشدار،
خطربرای این سبک از چک باکس غیرفعال کنید. |
| چک باکس خطی |
|
با استفاده از غیرفعال، اصلی، ثانویه، موفقیت، اطلاعات، هشدار،
خطر برای غیرفعال کردن کادر انتخاب این سبک، استفاده کنید. |
دکمه های رادیویی
| دکمه های رادیویی پایه | دکمه های رادیویی پایه | |
| رادیو پیش فرض |
|
با استفاده از .radio-* و رنگ .radio-*اصلی،
ثانویه، موفقیت، اطلاعات در رادیو بپیچید. |
| رادیو انتخاب شده |
|
با استفاده ازcheckbox-darkبرای این سبک از چک باکس بپیچید.
|
| پوسته انتخاب فلت |
|
با استفاده از checkbox-solid-*، اولیه، ثانویه، موفقیت،
اطلاعات، هشدار، خطر برای این سبک از چک باکس استفاده کنید. |
| رادیو خطی |
|
با استفاده از غیرفعال، اصلی، ثانویه، موفقیت، اطلاعات، هشدار،
خطر، روشن، تاریک برای غیرفعال کردن این نوع چک باکس استفاده کنید. |
انتخاب
| انتخاب تکی | برای کنترل انتخاب پایه استفاده کنید. | |
| حالت انتخاب غیرفعال | برای غیرفعال کردن کنترل انتخاب اضافه غیرفعال استفاده کنید.
|
|
| حالت انتخاب بزرگ | برای کنترل انتخاب بزرگ و کوچک استفاده کنید،
کلاسform-control-*lg، sm را اضافه کنید. |
|
| مثال انتخاب چندتایی | برای کنترل چند انتخابی، کد multiple را در انتخاب اضافه کنید.
|
ورودی
| ورودی متن پیش فرض | برای کنترل انتخاب پایه استفاده کنید. | |
| رنگ هاور ورودی | برای رنگ ورودی اصلی، کلاس input-air-*اصلی، ثانویه، موفقیت،
اطلاعات را اضافه کنید. در ورودی |
نشان ها
| نشان های پایه | اولیه | از کلاس .badge و به دنبال آن استفاده کنید. با رنگ نشان از کلاس
.badge-*اولیه، ثانویه، موفقیت، اطلاعات، هشدار، خطر، نور در
داخل عنصر برای ایجاد قرص پیشفرض استفاده کنید. |
| برچسب با آیکون |
برچسب اولیه
|
از کلاس label-square با div استفاده کنید |
راهاندازهای تولتیپ
| هاور | از data-bs-toggle="tooltip" برای محرک شناور استفاده کنید. این یک محرک پیش فرض است | |
| لینک | لینک | از a href="javascript:void(0)" برای راهاندازی پیوند استفاده کنید.
این یک محرک پیوند است |
| دکمه اوت لاین | از btn btn-outline-info برای راهاندازی اوت لاین استفاده کنید. و
دکمه پررنگ حاشیه از کلاس btn btn-outline-dark-2x استفاده کنید |
سوئیچ
| سوئیچ پیش فرض | از کلاس switch برای برچسب استفاده کنید. |
|
| سوئیچ غیرفعال | برای غیرفعال کردن سوئیچ Switch |
|
| رنگ سوئیچ |
|
از کلاس bg-*Primary , Secondary , Success , Info , Warning ,
Dangerدر بازه با نماد نمایش سوئیچ icon-stateدر بخش استفاده
کنید.
|
| سوئیچ اوت لاین |
|
از کلاس switch-outline روی div استفاده کنید. |