Check & radio的样式

Check & radio

同样的，很多相同重复的地方，不再会重新提及，会挑选有趣的地方来学习和分享

Switches

uses the .form-switch class to render（变成） a toggle switch.

• 在div上add class.form-check .form-switch

• input using role="switch"让推拉switch效果生效

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="1">
  <label class="form-check-label" for="1">
  Default switch checkbox input
  </label>
</div>

Inline

Group checkboxes or radios on the same horizontal row by adding .form-check-inline to any .form-check.

往任意class为form-check的标签添加 .form-check-inline将使这组checkboxes 或者 radio 放在同一水平行中

• 在div上添加classes：form-check form-check-inline

<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" 
  id="inlineCheckbox1" value="option1">
  <label class="form-check-label" for="inlineCheckbox1">1</label>
</div>

<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" 
  id="inlineCheckbox2" value="option2">
  <label class="form-check-label" for="inlineCheckbox2">2</label>
</div>

Reverse

Put your checkboxes, radios, and switches on the opposite（相反的） side with the .form-check-reverse modifier（修改） class.

• 在div上添加classes：form-check form-check-reverse

<div class="form-check form-switch form-check-reverse">
  <input class="form-check-input" type="checkbox" id="switchReverse">
  
  <label class="form-check-label" for="switchReverse">
  Reverse switch checkbox input
  </label>
</div>