Bootstrap关于表单控件（Radio,CheckBox）

表单控件(复选框checkbox和单选择按钮radio)

          

Bootstrap框架中checkbox和radio有点特殊，Bootstrap针对他们作了一些特殊化处理，主要是checkbox和radio与label标签配合使用会出现一些小问题（最头痛的是对齐问题）。使用Bootstrap框架，开发人员无需考虑太多，只须要按照下面的方法使用便可。

<form role="form">
<div class="checkbox">
<label>
<input type="checkbox" value="">
记住密码
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked>
喜欢
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="hate">
不喜欢
</label>
</div>
</form>

运行效果以下或查看右侧结果窗口（案例1）：

从上面的示例，咱们能够得知： 一、无论是checkbox仍是radio都使用label包起来了 二、checkbox连同label标签放置在一个名为“.checkbox”的容器内 三、radio连同label标签放置在一个名为“.radio”的容器内 在Bootstrap框架中，主要借助“.checkbox”和“.radio”样式，来处理复选框、单选按钮与标签的对齐方式。

 

有时候，为了布局的须要，将复选框和单选按钮须要水平排列。Bootstrap框架也作了这方面的考虑： 一、若是checkbox须要水平排列，只须要在label标签上添加类名“checkbox-inline” 二、若是radio须要水平排列，只须要在label标签上添加类名“radio-inline” 以下所示：

 

<form role="form">
  <div class="form-group">
    <label class="checkbox-inline">
      <input type="checkbox"  value="option1">游戏
    </label>
    <label class="checkbox-inline">
      <input type="checkbox"  value="option2">摄影
    </label>
    <label class="checkbox-inline">
    <input type="checkbox"  value="option3">旅游
    </label>
  </div>
  <div class="form-group">
    <label class="radio-inline">
      <input type="radio"  value="option1" name="sex">男性
    </label>
    <label class="radio-inline">
      <input type="radio"  value="option2" name="sex">女性
    </label>
    <label class="radio-inline">
      <input type="radio"  value="option3" name="sex">中性
    </label>
  </div>
</form>

 

运行效果以下或查看右侧结果窗口：