چک باکس ها و دکمه های رادیویی

چک باکس پیش فرض

به‌طور پیش‌فرض، هر تعداد از چک‌باکس‌هایی که خواهر و برادر فوری هستند، به‌صورت عمودی روی هم قرار می‌گیرند و با فاصله مناسب با.form-check.

چک باکس سفارشی

هر چک باکس در یک بسته بندی شده است<div> with a sibling <span> to create our custom control and a <label> for the accompanying text. Structurally, this is the same approach as our default .form-check.

دکمه های رادیویی پیش فرض

به‌طور پیش‌فرض، هر تعداد رادیو که برادر و برادر فوری هستند، به‌صورت عمودی روی هم قرار می‌گیرند و به‌طور مناسب با یکدیگر فاصله می‌گیرند..form-check.

دکمه های رادیویی سفارشی

هر رادیو در یک بسته بندی شده است<div> with a sibling <span> to create our custom control and a <label> for the accompanying text. Structurally, this is the same approach as our default .form-check.

کادر انتخاب رنگ سفارشی

به‌طور پیش‌فرض، هر تعداد از چک‌باکس‌هایی که خواهر و برادر فوری هستند، به‌صورت عمودی روی هم قرار می‌گیرند و با فاصله مناسب با.form-check.

دکمه های رادیویی رنگی سفارشی

به‌طور پیش‌فرض، هر تعداد رادیو که برادر و برادر فوری هستند، به‌صورت عمودی روی هم قرار می‌گیرند و به‌طور مناسب با یکدیگر فاصله می‌گیرند..form-check.

درون خطی

با افزودن، کادرهای انتخاب یا رادیوها را در همان ردیف افقی گروه بندی کنید.form-check-inline to any .form-check.

بدون برچسب

اضافه کردن.position-static to inputs within .form-check that don’t have any label text. Remember to still provide some form of label for assistive technologies (for instance, using aria-label).

iCheck Checkbox

iCheck پوست پایه

بپیچید با.icheck_minimal.skin for this style of checkbox.

طرح های رنگی

iCheck پوست مربعی

بپیچید با.skin.skin-square for square and colored checkbox. Have to do color changes using JS.

طرح های رنگی

پوست صاف iCheck

بپیچید با.skin.skin-flat for Flat colored checkbox. Have to do color changes using JS.

طرح های رنگی

خط چک باکس iCheck

بپیچید با.skin.skin-line for line checkbox. Have to do color changes using JS.

Normal State
Hover State
Checked State
Disabled State
Checked & Disabled State
طرح های رنگی

Polaris Skin iCheck

بپیچید با.skin.skin-polaris for polaris checkbox.

Futurico Skin iCheck

بپیچید با.skin.skin-futurico for futurico checkbox.

دکمه های رادیویی iCheck

حداقل گزینه رادیویی iCheck

بپیچید با.icheck_minimal with .skin to use another icheck radio style.

طرح های رنگی

رادیو iCheck پوست پر شده

بپیچید با.skin.skin-square for square and colored radio. Have to do color changes using JS.

طرح های رنگی

رادیو iCheck پوست صاف

بپیچید با.skin.skin-flat for Flat colored radio. Have to do color changes using JS.

طرح های رنگی

خط رادیو iCheck

بپیچید با.skin.skin-line for line Radio. Have to do color changes using JS.

Normal State
Hover State
Checked State
Disabled State
Checked & Disabled State
طرح های رنگی

Polaris Skin iCheck Radio

بپیچید با.skin.skin-polaris for polaris radio.

Futurico Skin iCheck Radio

بپیچید با.skin.skin-futurico for futurico radio.

سوئیچ ها

سوئیچ سفارشی

از کلاس استفاده کنید.custom-switch for Custom Switch

سوئیچ درون خطی سفارشی

از کلاس استفاده کنید.custom-control-inline for Inline Custom Switch

گزینه های رنگ نوار نوار

گزینه های طرح بندی

پس زمینه منوی نوار کناری


تصویر پس زمینه نوار کناری
background image
background image
background image
background image

Layout Builder را امتحان کنید