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>