Bootstrap学习（二）表单2：表单控件

输入框input

单行输入框，常见的文本输入框，也就是input的type属性值为text。在Bootstrap中使用input时也必须添加type类型，如果没有指定type类型，将无法得到正确的样式，因为Bootstrap框架都是通过input[ type=“?”](其中?号代表type类型，比如说text类型，对应的是input[ type=“text”])的形式来定义样式的。

<input type="text" class="form-control" placeholder="请输入用户名">

---

下拉选择框select

Bootstrap框架中的下拉选择框使用和原始的一致，多行选择设置multiple属性的值为multiple。Bootstrap框架会为这些元素提供统一的样式风格。
例：

<form role="form">
  <div class="form-group">
    <select class="form-control"> 
      <option>1</option> 
      <option>2</option> 
      <option>3</option> 
      <option>4</option> 
      <option>5</option> 
      </select>
  </div>
  <div class="form-group">
      <select multiple class="form-control"> 
        <option>1</option> 
        <option>2</option> 
        <option>4</option> 
        <option>5</option> 
      </select>
  </div>

</form>   

---

文本域textarea

文本域设置rows可定义其高度，设置cols可以设置其宽度。但如果textarea元素中添加了类名“form-control”类名，则无需设置cols属性。因为Bootstrap框架中的“form-control”样式的表单控件宽度为100%或auto。

<form role="form">
  <div class="form-group">
      <textarea class="form-control" rows="3"></textarea>
  </div>
</form>

---

复选框checkbox和单选择按钮radio

1、不管是checkbox还是radio都使用label包起来了
2、checkbox连同label标签放置在一个名为“.checkbox”的容器内
3、radio连同label标签放置在一个名为“.radio”的容器内
在Bootstrap框架中，主要借助“.checkbox”和“.radio”样式，来处理复选框、单选按钮与标签的对齐方式。

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

复选框checkbox和单选择按钮radio