Bootstrap - 表单

Bootstrap 给HTML大部分表单都设置了默认样式，我们可以给表单添加相应类名，以实现表单的水平排列，个性化定制等。

代码：

<form>
      <div class="form-group">
        <label for="">这是一个输入框:</label>
        <input type="text" class="form-control" placeholder="这是一个输入框">
      </div>
      <div class="form-group">
        <label for="">这是一个输入框:</label>
        <select class="form-control">
          <option>北京</option>
          <option>北京</option>
          <option>北京</option>
        </select>
      </div>
      <div class="form-group">
        <label for="">这是一个输入框:</label>
        <textarea class="form-control"></textarea>
      </div>
    </form>

效果：

图片.png

class:
对<form>标签添加：class="form-inline"
可以让它水平排列：

图片.png

对Input设置大小可以添加class：

input-sm
input-lg

应该使用form-group设置group。

对<label>可以设置sr-only：隐藏掉提示信息。

对表单控件添加颜色
对form-group添加class:

has-success
has-feedback
has-error

eg:

...
  <div class="form-group has-error" >
        <label for="">这是一个输入框:</label>
        <textarea class="form-control "></textarea>
  </div>
</form>

效果：

图片.png

如果让<label>也有颜色的改变，需要对label添加class="control-label"

<div class="form-group has-error" >
        <label class="control-label">这是一个输入框:</label>
        <textarea class="form-control "></textarea>
</div>

图片.png

---

表单中的按钮

Bootstrap中的按钮不仅可以用<a>标签去写，也可以使用<button>去写。

<button>的大小：

btn-lg
btn-sm

一般情况下，btn与btn-*结合使用。可以设置样式和颜色：

btn
btn-default
btn-primary
btn-success
btn-info
btn-warning
btn-danger

示例：

<button class="btn btn-default">default</button>
<button class="btn btn-success">success</button>
<button class="btn btn-info">info</button>
<button class="btn btn-warning">warning</button>
<button class="btn btn-danger">danger</button>
<button class="btn btn-link">danger</button>

效果：

图片.png

使用disabled属性。

<a class="btn btn-info" disabled="disabled">danger</a>