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>
这是我的签名