bootstrap3 表单样式小结

表单

表单组

<div class="form-group">
</div>

表单组内部放置label和输入组

输入组

<div class="input-group">
</div>

输入组内部放置input等控件和其他标签,控件会变短

控件

控件需要增加控件类

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

控件尺寸

由下面类设定,默认尺寸不同设置

input-lg
input-sm

水平排列表单尺寸

.form-group-lg 或 .form-group-sm 类，为 .form-horizontal 包裹的 label 元素和表单控件快速设置尺寸

静态控件

样式上,不会显示输入框

在容器p上增加类

 <p class="form-control-static">[email protected]</p>

帮助信息

控件的帮助信息可通过aria-describedby属性获得关联

<input type="text"  class="form-control" aria-describedby="helpBlock">
<span id="helpBlock" class="help-block">帮助信息</span>

验证状态

一共红黄绿三种颜色,分别对应.has-warning、.has-error 或 .has-success

应用到控件的父元素即可

<div class="form-group has-success">
  
    <label class="control-label" for="inputSuccess1">
    
    </label>
  
    <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">

    <span id="helpBlock2" class="help-block">
    
    </span>
</div>

form标签

基本form

form标签不需要添加任何类

内联form

<div class="form-inline">
</div>

水平form

<div class="form-horizontal">
</div>

label标签

label标签不需要添加任何类

隐藏label

<label class="sr-only">Email address</label>

input标签

任意类型的input需要增加下面的类

<input class="form-control">

input支持的type

text、
password、
datetime、
datetime-local、
date、
month、
time、
week、
number、
email、
url、
search、
tel
color

禁用

<input class="form-control"  type="text"  disabled>

只读

<input class="form-control"  type="text"  readonly>

textarea

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

radio和checkbox

禁用选项

在.radio, .radio-inline, .checkbox, or .checkbox-inline后添加.disabled类

<div class="disabled checkbox"><!-- 这个没有禁用 -->
    <label>
        <input type="checkbox" value="">

    </label>
</div>
<div class="checkbox disabled">
    <label>
        <input type="checkbox" value="" disabled>

    </label>
</div>

内联

<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>

select

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