006 表单组件

一.textarea 文本框组件

<textarea class="form-control" rows="3" placeholder="请输入新闻的评论" style="resize:none">

</textarea>

[1]使用rows属性可以定义文本框的行数.

[2]创建出来的textarea组件大小是可以拖拽的,因此需要加上style="resize:none".

---

二.下拉框组件

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

和我们原始的html之间没有什么区别,我们只需要加上class="form-control"就可以了.

---

三.单选框组件

[1]方式一:垂直单选框

<div class="radio">
　　<label>
　　　　<input type="radio" name="status" id="optionsRadios1" value="option1" checked>
　　　　激活
　　</label>
</div>
<div class="radio">
　　<label>
　　　　<input type="radio" name="status" id="optionsRadios2" value="option2">
　　　　冻结
　　</label>
</div>

使用的class="radio"

[2]内联式单选框--class="radio-inline"

<label class="radio-inline" >
　　<input type="radio" name="city" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
　　<input type="radio" name="city" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
　　<input type="radio" name="city" id="inlineRadio3" value="option3"> 3
</label>

---

四.多选框组件

[1]块级多选框 --使用class="checkbox"

<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
    Option two is disabled
  </label>
</div>
[2]

<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>