bootstrap 表单控件 控件状态 控件大小 help-block
bootstrap 表单控件 控件状态 控件大小 help-block
<!DOCTYPE html>
<html >
<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="" >
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
</select>
<select name="" 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" >
</div>
<div class="form-group has-error">
<label for="inputerror" class="control-label">input Error</label>
<input type="text" class="form-control" >
</div>
<div class="form-group has-success">
<label for="inputsuccess" class="control-label">input Success</label>
<input type="text" class="form-control" >
</div>
<div class="form-group has-warning has-feedback">
<label for="inputwarning" class="control-label">input Warning</label>
<input type="text" class="form-control" >
<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" >
<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" >
<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>- 上一篇 »用JavaScript隐藏控件的方法，转
- 下一篇 »Bootstrap学习笔记--表单