Bootstrap（五）：CSS--表单

1.基本表单

单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。

将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。

<form >
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

2.内联表单

为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

3.水平排列

通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-xs-2 control-label" for="exampleInputEmail1">Email</label>
    <div class="col-xs-10">
    <input type="email" class=" form-control" id="exampleInputEmail1" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label class="col-xs-2" for="exampleInputPassword1">Password</label>
    <div class="col-xs-10">
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    </div>
  </div>
  <!-- <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button> -->
</form>

4.多选和单选框

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-xs-2 control-label" for="exampleInputEmail1">竖排</label>
    
    <div class="col-xs-10">
    
        <label class="checkbox">
              <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
        </label>
        <label class="checkbox">
              <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
        </label>
        <label class="checkbox">
             <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
        </label>
        
        <label class="radio">
              <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
        </label>
        <label class="radio">
             <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
        </label>
        <label class="radio">
             <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
        </label>
        
    </div>
  </div>
  <div class="form-group">
    <label class="col-xs-2 control-label" for="exampleInputPassword1">横排</label>
    <div class="col-xs-10">
    
    <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>
        
        <label class="radio-inline">
              <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
        </label>
        <label class="radio-inline">
             <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
        </label>
        <label class="radio-inline">
             <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
        </label>
    </div>
  </div>
 
</form>

5.校验状态(不带图标)

给form-group的<div>添加 has-success 或 has-warning 或 has-error 样式；

<form class="">

  <div class="form-group has-success">
      <label class="control-label" for="inputSuccess1">Input with success</label>
      <input type="text" class="form-control" id="inputSuccess1">
  </div>
 
 <div class="form-group has-warning">
      <label class="control-label" for="inputWarning1">Input with warning</label>
      <input type="text" class="form-control" id="inputWarning1">
 </div>
 
 <div class="form-group has-error">
  <label class="control-label" for="inputError1">Input with error</label>
  <input type="text" class="form-control" id="inputError1">
</div>

</form>

6.校验状态(带图标)

给form-group的<div> 添加 has-feedback、 has-success 或 has-warning 或 has-error 样式；

并且添加图标<span>，如:<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>

<form class="">

  <div class="form-group has-success has-feedback">
      <label class="control-label" for="inputSuccess1">Input with success</label>
       <div class="input-group">
      <span class="input-group-addon">@</span>
      <input type="text" class="form-control" id="inputSuccess1">
      </div>
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden=""></span>
  </div>
 
 <div class="form-group has-warning has-feedback">
      <label class="control-label" for="inputWarning1">Input with warning</label>
      <input type="text" class="form-control" id="inputWarning1">
      <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
 </div>
 
 <div class="form-group has-error has-feedback">
  <label class="control-label" for="inputError1">Input with error</label>
  <input type="text" class="form-control" id="inputError1">
  <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
</div>

</form>