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@example.com</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>
    

原文：https://www.cnblogs.com/zxcv123/p/12274287.html