چک باکس و رادیو (Checks and Radios)
اینجا «چک باکس و رادیو بوت استرپ» را یاد می گیری. چک باکس (Checkbox) یعنی چند انتخاب آزاد. رادیو (Radio) یعنی فقط یک انتخاب. کانتینر .form-check همه چیز را مرتب می کند.
چک باکس (Checkbox)
برای چک باکس، از .form-check، .form-check-input و .form-check-label استفاده کن. ویژگی checked یعنی تیک پیش فرض.
<div class="form-check">
<input class="form-check-input" type="checkbox" id="check1" name="option1" value="something" checked>
<label class="form-check-label" for="check1">Option 1</label>
</div>
دکمه رادیویی (Radio)
رادیو اجازه یک انتخاب می دهد. همه رادیوها باید name یکسان داشته باشند.
<div class="form-check">
<input type="radio" class="form-check-input" id="radio1" name="optradio" value="option1" checked>
<label class="form-check-label" for="radio1">Option 1</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" id="radio2" name="optradio" value="option2">
<label class="form-check-label" for="radio2">Option 2</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" id="radio3" name="optradio" disabled>
<label class="form-check-label" for="radio3">Option 3</label>
</div>
سوئیچ (Toggle Switch)
می خواهی چک باکس شبیه سوئیچ شود؟ کلاس .form-switch را کنار .form-check بگذار.
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="mySwitch" name="darkmode" value="yes" checked>
<label class="form-check-label" for="mySwitch">Dark Mode</label>
</div>
گام های عملی
- یک
.form-checkبساز تا فاصله ها درست شوند. - به ورودی،
.form-check-inputبده وidتعیین کن. - به برچسب،
.form-check-labelبده وforرا مطابق کن. - برای سوئیچ، کلاس
.form-switchرا اضافه کن.
جمع بندی سریع
.form-checkقالب بندی استاندارد می دهد.- چک باکس چند انتخاب می دهد.
- رادیو فقط یک انتخاب می دهد.
.form-switchچک باکس را سوئیچ می کند.
بیشتر بخوان: چک باکس و رادیو بوت استرپ، فرم ها (Forms)، منوی انتخاب.