Bootstrap样式-表单

输入框

# type 输入型可取值有：
# text\password\datetime\datetime-local\date\month\time\week\number\email\url\search\tel\color
<input type="text" placeholder="默认值">

文本区域

# 3行文本区域
<textarea row="3"></textarea>

单选按钮和复选框

#  复选框 value 唯一
<label class="checkbox">  # checkbox > checkbox_inline一行内显示
  <input type="checkbox" value=""> 复选框
</lable>

# 单选框 name 必须一样
<label class="radio">  #radio > radio_inline一行内显示
  <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>男 
</lable>
<label class="radio">
  <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2" checked>女
</lable>

下拉框

# size 定义显示的项数， multiple 可多选(shift)
<select name="选择城市" size="3" multiple="multiple">
  <optgroup label="山东省">
    <option value="济南" selected="selected">济南</option>
    <option></option>
  </optgroup>
  <optgroup label="山西省">
    <option value=""></option>
    <option></option>
  </optgroup>
</select>

布局风格

# .form-inline 以行内显示
# .form-horzontal 改变form-group行为，表现为栅格系统中的row
<form  class="form-inline" method="post" action="">
  <div class="form-group">
    <label for="username">用户名</label>
    <input type="text" id="username" class="form-control" />
  </div>
  <div class="form-group">
    <label class="col-sm-2 text-right" for="username">密码</label>
    <div class="col-sm-2">
      <input type="password" id="username" class="form-control" />
    </div>
  </div>
</form>

外观风格

# 定制大小-相对高度:
# .input-sm .input-lg
 <input class="input-sm form-control">

# 定制大小-网格宽度:
<div class="row">
  <div class="col-xs-2">
    <input type="text" class="form-control placeholder="">
  </div>
  <div class="col-xs-10">
    <input type="text" class="form-control placeholder="">
  </div>
</div>

# 不可编辑样式控件: disable
<label><input class="form-control" type="text" placeholder="不可用" disabled></label>

# 禁用多个控件，控件放入下面标签内。相当于一个div
<fieldset disable class="row">
</fieldset>

# 定制帮助文本
<input class="form-control" type="text"><span class="help-block">块解释文本</span>

# 定制静态控件
<div class=form-group>
  <label class="col-sm-2 control-label">电子邮箱</label>
  <div class="col-sm-10">
    <p class="col-sm-2 form-control-static">email@example.com</p>
  </div>
</div>

状态风格

# has-success\has-warning\has-error
<div class="form-group has-success"></div>