مونو انواع مختلفی از کامپوننت‌های چک باکس و رادیوهای بوت استرپ را با کمی سفارشی‌سازی متناسب با استانداردهای طراحی خود ارائه می‌دهد. برای اطلاعات بیشتر، لطفاً به مستندات رسمی بوت استرپ مراجعه کنید.

چک باکس پایه


<div class="form-check d-inline-block ml-3 mb-3">
  <input class="form-check-input" type="checkbox" checked="checked" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    چک باکس اول
  </label>
</div>

<div class="form-check d-inline-block ml-3 mb-3">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck2">
  <label class="form-check-label" for="defaultCheck2">
    چک باکس دوم
  </label>
</div>

<div class="form-check d-inline-block ml-3 mb-3">
  <input class="form-check-input" type="checkbox" value="" id="disableCheck1" disabled>
  <label class="form-check-label" for="disableCheck1">
    غیرفعال
  </label>
</div>

<div class="form-check d-inline-block ml-3 mb-3">
  <input class="form-check-input" type="checkbox" checked="checked" value="" id="disableCheck2" disabled>
  <label class="form-check-label" for="disableCheck2">
    تیک خورده غیرفعال
  </label>
</div>

          

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


<div class="custom-control custom-checkbox d-inline-block ml-3 mb-3">
  <input type="checkbox" class="custom-control-input" id="customCheck1" checked="checked">
  <label class="custom-control-label" for="customCheck1">چک باکس اول</label>
</div>

<div class="custom-control custom-checkbox d-inline-block ml-3 mb-3">
  <input type="checkbox" class="custom-control-input" id="customCheck2">
  <label class="custom-control-label" for="customCheck2">چک باکس دوم</label>
</div>

<div class="custom-control custom-checkbox d-inline-block ml-3 mb-3">
  <input type="checkbox" class="custom-control-input" id="customCheckDisabled1" disabled>
  <label class="custom-control-label" for="customCheckDisabled1">غیرفعال</label>
</div>

<div class="custom-control custom-checkbox d-inline-block ml-3 mb-3">
  <input type="checkbox" class="custom-control-input" checked="checked" id="customCheckDisabled1" disabled>
  <label class="custom-control-label" for="customCheckDisabled1">تیک خورده غیرفعال</label>
</div>

          

چک باکس رنگی


<div class="custom-control custom-checkbox d-inline-block ml-3 mb-3">
  <input type="checkbox" class="custom-control-input" id="customCheckPrimary" checked="checked">
  <label class="custom-control-label" for="customCheckPrimary">default Checkbox</label>
</div>

<div class="custom-control custom-checkbox checkbox-secondary d-inline-block ml-3 mb-3">
  <input type="checkbox" class="custom-control-input" id="customCheckSecondary" checked="checked">
  <label class="custom-control-label" for="customCheckSecondary">Secondary Checkbox</label>
</div>

<div class="custom-control custom-checkbox checkbox-success d-inline-block ml-3 mb-3">
  <input type="checkbox" class="custom-control-input" id="customCheckSuccess" checked="checked">
  <label class="custom-control-label" for="customCheckSuccess">Success Checkbox</label>
</div>

<div class="custom-control custom-checkbox checkbox-danger d-inline-block ml-3 mb-3">
  <input type="checkbox" class="custom-control-input" id="customCheckDanger" checked="checked">
  <label class="custom-control-label" for="customCheckDanger">Danger Checkbox</label>
</div>

<div class="custom-control custom-checkbox checkbox-warning d-inline-block ml-3 mb-3">
  <input type="checkbox" class="custom-control-input" id="customCheckWarning" checked="checked">
  <label class="custom-control-label" for="customCheckWarning">Warning Checkbox</label>
</div>

<div class="custom-control custom-checkbox checkbox-info d-inline-block ml-3 mb-3">
  <input type="checkbox" class="custom-control-input" id="customCheckInfo" checked="checked">
  <label class="custom-control-label" for="customCheckInfo">Info Checkbox</label>
</div>

<div class="custom-control custom-checkbox checkbox-light d-inline-block ml-3 mb-3">
  <input type="checkbox" class="custom-control-input" id="customCheckLight" checked="checked">
  <label class="custom-control-label" for="customCheckLight">Light Checkbox</label>
</div>

<div class="custom-control custom-checkbox checkbox-dark d-inline-block ml-3 mb-3">
  <input type="checkbox" class="custom-control-input" id="customCheckDark" checked="checked">
  <label class="custom-control-label" for="customCheckDark">Dark Checkbox</label>
</div>

          

چک باکس توخالی


<div class="custom-control custom-checkbox checkbox-outline-primary d-inline-block ml-3 mb-3">
  <input type="checkbox" class="custom-control-input" id="outline-chekbox-primary" checked="checked">
  <label class="custom-control-label" for="outline-chekbox-primary">default Checkbox</label>
</div>

<div class="custom-control custom-checkbox checkbox-outline-secondary d-inline-block ml-3 mb-3">
  <input type="checkbox" class="custom-control-input" id="outline-chekbox-secondary" checked="checked">
  <label class="custom-control-label" for="outline-chekbox-secondary">Secondary Checkbox</label>
</div>

<div class="custom-control custom-checkbox checkbox-outline-success d-inline-block ml-3 mb-3">
  <input type="checkbox" class="custom-control-input" id="outline-chekbox-success" checked="checked">
  <label class="custom-control-label" for="outline-chekbox-success">Success Checkbox</label>
</div>

<div class="custom-control custom-checkbox checkbox-outline-danger d-inline-block ml-3 mb-3">
  <input type="checkbox" class="custom-control-input" id="outline-chekbox-danger" checked="checked">
  <label class="custom-control-label" for="outline-chekbox-danger">Danger Checkbox</label>
</div>

<div class="custom-control custom-checkbox checkbox-outline-warning d-inline-block ml-3 mb-3">
  <input type="checkbox" class="custom-control-input" id="outline-chekbox-warning" checked="checked">
  <label class="custom-control-label" for="outline-chekbox-warning">Warning Checkbox</label>
</div>

<div class="custom-control custom-checkbox checkbox-outline-info d-inline-block ml-3 mb-3">
  <input type="checkbox" class="custom-control-input" id="outline-chekbox-info" checked="checked">
  <label class="custom-control-label" for="outline-chekbox-info">Info Checkbox</label>
</div>

<div class="custom-control custom-checkbox checkbox-outline-light d-inline-block ml-3 mb-3">
  <input type="checkbox" class="custom-control-input" id="outline-chekbox-light" checked="checked">
  <label class="custom-control-label" for="outline-chekbox-light">Light Checkbox</label>
</div>

<div class="custom-control custom-checkbox checkbox-outline-dark d-inline-block ml-3 mb-3">
  <input type="checkbox" class="custom-control-input" id="outline-chekbox-dark" checked="checked">
  <label class="custom-control-label" for="outline-chekbox-dark">Dark Checkbox</label>
</div>

          

رادیو پایه


<div class="form-check ml-3 mb-3 d-inline-block">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
    رادیو یک
  </label>
</div>

<div class="form-check ml-3 mb-3 d-inline-block">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  <label class="form-check-label" for="exampleRadios2">
    رادیو دو
  </label>
</div>

<div class="form-check ml-3 mb-3 d-inline-block">
  <input class="form-check-input" type="radio" name="exampleRadiosd" id="exampleRadios3" value="option3" disabled>
  <label class="form-check-label" for="exampleRadios3">
    غیرفعال
  </label>
</div>

<div class="form-check ml-3 mb-3 d-inline-block">
  <input class="form-check-input" type="radio" name="exampleRadiosd" id="exampleRadios3" value="option3" checked
    disabled>
  <label class="form-check-label" for="exampleRadios3">
    چک باکس تیک خورده غیرفعال
  </label>
</div>

          

رادیو سفارشی


<div class="custom-control custom-radio d-inline-block ml-3 mb-3">
  <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input" checked="checked">
  <label class="custom-control-label" for="customRadio1">رادیو یک</label>
</div>

<div class="custom-control custom-radio d-inline-block ml-3 mb-3">
  <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio2">رادیو دو</label>
</div>

<div class="custom-control custom-radio d-inline-block ml-3 mb-3">
  <input type="radio" id="customRadio2" name="customRadios" class="custom-control-input" disabled>
  <label class="custom-control-label" for="customRadio2">غیرفعال</label>
</div>

<div class="custom-control custom-radio d-inline-block ml-3 mb-3">
  <input type="radio" id="customRadio1" name="customRadios" class="custom-control-input" checked="checked" disabled>
  <label class="custom-control-label" for="customRadio1">غیرفعال</label>
</div>

          

رادیو رنگی


<div class="custom-control custom-radio d-inline-block ml-3 mb-3">
  <input type="radio" id="radio-primary" name="radio-primary" class="custom-control-input" checked>
  <label class="custom-control-label" for="radio-primary">Default Radio</label>
</div>

<div class="custom-control custom-radio radio-secondary d-inline-block ml-3 mb-3">
  <input type="radio" id="radio-secondary" name="radio-secondary" class="custom-control-input" checked>
  <label class="custom-control-label" for="radio-secondary">Secondary Radio</label>
</div>

<div class="custom-control custom-radio radio-success d-inline-block ml-3 mb-3">
  <input type="radio" id="radio-success" name="radio-success" class="custom-control-input" checked>
  <label class="custom-control-label" for="radio-success">Success Radio</label>
</div>

<div class="custom-control custom-radio radio-danger d-inline-block ml-3 mb-3">
  <input type="radio" id="radio-danger" name="radio-danger" class="custom-control-input" checked>
  <label class="custom-control-label" for="radio-danger">Danger Radio</label>
</div>

<div class="custom-control custom-radio radio-info d-inline-block ml-3 mb-3">
  <input type="radio" id="radio-info" name="radio-info" class="custom-control-input" checked>
  <label class="custom-control-label" for="radio-info">Info Radio</label>
</div>

<div class="custom-control custom-radio radio-light d-inline-block ml-3 mb-3">
  <input type="radio" id="radio-light" name="radio-light" class="custom-control-input" checked>
  <label class="custom-control-label" for="radio-light">Light Radio</label>
</div>

<div class="custom-control custom-radio radio-dark d-inline-block ml-3 mb-3">
  <input type="radio" id="radio-dark" name="radio-dark" class="custom-control-input" checked>
  <label class="custom-control-label" for="radio-dark">Dark Radio</label>
</div>

          

رادیو توخالی


<div class="custom-control custom-radio radio-outline-primary d-inline-block ml-3 mb-3">
  <input type="radio" id="radio-outline-primary" name="radio-outline-primary" class="custom-control-input" checked>
  <label class="custom-control-label" for="radio-outline-primary">Default Radio</label>
</div>

<div class="custom-control custom-radio radio-outline-secondary d-inline-block ml-3 mb-3">
  <input type="radio" id="radio-outline-secondary" name="radio-outline-secondary" class="custom-control-input" checked>
  <label class="custom-control-label" for="radio-outline-secondary">Secondary Radio</label>
</div>

<div class="custom-control custom-radio radio-outline-success d-inline-block ml-3 mb-3">
  <input type="radio" id="radio-outline-success" name="radio-outline-success" class="custom-control-input" checked>
  <label class="custom-control-label" for="radio-outline-success">Success Radio</label>
</div>

<div class="custom-control custom-radio radio-outline-danger d-inline-block ml-3 mb-3">
  <input type="radio" id="radio-outline-danger" name="radio-outline-danger" class="custom-control-input" checked>
  <label class="custom-control-label" for="radio-outline-danger">Danger Radio</label>
</div>

<div class="custom-control custom-radio radio-outline-info d-inline-block ml-3 mb-3">
  <input type="radio" id="radio-outline-info" name="radio-outline-info" class="custom-control-input" checked>
  <label class="custom-control-label" for="radio-outline-info">Info Radio</label>
</div>

<div class="custom-control custom-radio radio-outline-light d-inline-block ml-3 mb-3">
  <input type="radio" id="radio-outline-light" name="radio-outline-light" class="custom-control-input" checked>
  <label class="custom-control-label" for="radio-outline-light">Light Radio</label>
</div>

<div class="custom-control custom-radio radio-outline-dark d-inline-block ml-3 mb-3">
  <input type="radio" id="radio-outline-dark" name="radio-outline-dark" class="custom-control-input" checked>
  <label class="custom-control-label" for="radio-outline-dark">Dark Radio</label>
</div>

          

مخاطبین

افزودن مخاطب جدید