المان checkbox
با مؤلفه چکهای کاملاً بازنویسی شده ما، کادرها و رادیوها و رادیوهای بین مرورگر و دستگاههای مختلف ایجاد کنید.
بررسی فرم در بوت استرپالمان checkbox
<div class="form-check"><input class="form-check-input" id="flexCheckDefault" type="checkbox" value="" /><label class="form-check-label" for="flexCheckDefault">Default checkbox</label></div>
<div class="form-check"><input class="form-check-input" id="flexCheckChecked" type="checkbox" value="" checked="" /><label class="form-check-label" for="flexCheckChecked">Checked checkbox</label></div>
نامشخص
چک باکس ها :indeterminate
وقتی به صورت دستی از طریق جاوا اسکریپت تنظیم می شوند می توانند از کلاس شبه استفاده کنند (هیچ ویژگی HTML موجود برای تعیین آن وجود ندارد.
<div class="form-check"><input class="form-check-input" id="flexCheckIndeterminate" type="checkbox" value="" /><label class="form-check-label" for="flexCheckIndeterminate">Indeterminate checkbox</label></div>
رادیوها
<div class="form-check"><input class="form-check-input" id="flexRadioDefault1" type="radio" name="flexRadioDefault" /><label class="form-check-label" for="flexRadioDefault1">Default radio</label></div>
<div class="form-check"><input class="form-check-input" id="flexRadioDefault2" type="radio" name="flexRadioDefault" checked="" /><label class="form-check-label" for="flexRadioDefault2">Default checked radio</label></div>
سوئیچ ها
یک سوئیچ دارای نشانه گذاری یک چک باکس سفارشی است اما از .form-switch
کلاس برای ارائه یک سوئیچ تعویض استفاده می کند. سوئیچ ها نیز از این disabled
ویژگی پشتیبانی می کنند.
<div class="form-check form-switch"><input class="form-check-input" id="flexSwitchCheckDefault" type="checkbox" /><label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label></div>
<div class="form-check form-switch"><input class="form-check-input" id="flexSwitchCheckChecked" type="checkbox" checked="" /><label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label></div>
<div class="form-check form-switch"><input class="form-check-input" id="flexSwitchCheckDisabled" type="checkbox" disabled="" /><label class="form-check-label" for="flexSwitchCheckDisabled">Disabled switch checkbox input</label></div>
<div class="form-check form-switch"><input class="form-check-input" id="flexSwitchCheckCheckedDisabled" type="checkbox" checked="" disabled="" /><label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked switch checkbox input</label></div>
Inline را بررسی کنید
کادرهای انتخاب یا رادیوها را در همان ردیف افقی با افزودن .form-check-inline
به هر یک گروه بندی کنید .form-check
.
<div class="form-check form-check-inline"><input class="form-check-input" id="inlineCheckbox1" type="checkbox" value="option1" /><label class="form-check-label" for="inlineCheckbox1">Item 1</label></div>
<div class="form-check form-check-inline"><input class="form-check-input" id="inlineCheckbox2" type="checkbox" value="option2" /><label class="form-check-label" for="inlineCheckbox2">Item 2</label></div>
<div class="form-check form-check-inline"><input class="form-check-input" id="inlineCheckbox3" type="checkbox" value="option3" disabled="" /><label class="form-check-label" for="inlineCheckbox3">Item 3 (disabled)</label></div>
رادیو خطی
<div class="form-check form-check-inline"><input class="form-check-input" id="inlineRadio1" type="radio" name="inlineRadioOptions" value="option1" /><label class="form-check-label" for="inlineRadio1">Item 1</label></div>
<div class="form-check form-check-inline"><input class="form-check-input" id="inlineRadio2" type="radio" name="inlineRadioOptions" value="option2" /><label class="form-check-label" for="inlineRadio2">item 2</label></div>
<div class="form-check form-check-inline"><input class="form-check-input" id="inlineRadio3" type="radio" name="inlineRadioOptions" value="option3" disabled="" /><label class="form-check-label" for="inlineRadio3">Item 3 (disabled)</label></div>