bootstrap 表单控件 控件状态 控件大小 help-block
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="dist/css/bootstrap.css">
</head> <body>
<div class="container"> <p class="btn-primary">表单控件</p>
<input type="text" placeholder="this is text">
<select name="" id="">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
</select>
<select name="" id="" multiple>
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
</select>
<div class="checkbox">
<label for="">
<input type="checkbox"> abc
</label>
</div>
<div class="radio">
<label for="">
<input type="radio" name="A" value="A" checked="">A
</label>
</div>
<div class="radio">
<label for="">
<input type="radio" name="A" value="B">B
</label>
</div>
<div class="checkbox-inline">
<label for="">
<input type="checkbox"> ABC
</label>
</div>
<div class="radio-inline">
<label for="">
<input type="radio"> A
</label>
</div>
<p class="btn-primary">控件状态</p>
<input type="text" value="ABC" disabled="disabled">
<input type="text" value="set class disabled is useless" class="disabled">
<input type="text" value="ABC">
<p class="btn-primary">验证提示状态</p>
<div class="form-group has-warning">
<label for="inputwarning" class="control-label">input Warning</label>
<input type="text" class="form-control" id="inputwarning">
</div>
<div class="form-group has-error">
<label for="inputerror" class="control-label">input Error</label>
<input type="text" class="form-control" id="inputerror">
</div>
<div class="form-group has-success">
<label for="inputsuccess" class="control-label">input Success</label>
<input type="text" class="form-control" id="inputsuccess">
</div>
<div class="form-group has-warning has-feedback">
<label for="inputwarning" class="control-label">input Warning</label>
<input type="text" class="form-control" id="inputwarning">
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
<div class="form-group has-error has-feedback">
<label for="inputerror" class="control-label">input Error</label>
<input type="text" class="form-control" id="inputerror">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
<div class="form-group has-success has-feedback">
<label for="inputsuccess" class="control-label">input Success</label>
<input type="text" class="form-control" id="inputsuccess">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<p class="btn-primary">控件大小</p>
<div class="row">
<div class="col-xs-2">
<input type="text" class="input-lg form-control" placeholder='.col-xs-2'>
</div>
<div class="col-xs-3">
<input type="text" class="input-sm form-control" placeholder='.col-xs-3'>
</div>
</div>
<p class="btn-primary">.help-block</p>
<span>this is span before help-block</span>
<span class="help-block">this is help block span</span>
<span>this is span after help-block</span>
</div>
</body> </html>