BootWiki教程网
源代码：
点击运行
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Bootstrap 版本 2.0 垂直表单的浏览器状态实例</title> <meta content="Bootstrap Version2.0 horizontal form browser status example from w3cschool.cc." name="description"> <link href="/try/bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet"> </head> <body> <form class="form-horizontal"> <fieldset> <legend>Bootstrap支持的控件</legend> <div class="control-group"> <label class="control-label" for="input01">焦点输入</label> <div class="controls"> <input class="input-xlarge" id="input01" type="text"> <p class="help-block">除了自由格式文本，一些HTML5基于文本的输入像这样呈现。</p> </div> </div> <div class="control-group"> <label class="control-label" for="input01">只读输入</label> <div class="controls"> <input class="input-xlarge" id="input01" readonly="true" type="text"> <p class="help-block">除了自由格式文本，一些HTML5基于文本的输入像这样呈现。</p> </div> </div> <div class="control-group"> <label class="control-label" for="input01">禁用输入</label> <div class="controls"> <input class="input-xlarge" disabled id="input01" type="text"> <p class="help-block">除了自由格式文本，一些HTML5基于文本的输入像这样呈现。</p> </div> </div> <div class="control-group"> <label class="control-label" for="optionsCheckbox" reado>确认框 (禁用)</label> <div class="controls"> <label class="checkbox"> <input disabled id="optionsCheckbox" type="checkbox" value="option1"> 选中该项，确认此项正确。 </label> </div> </div> <div class="form-actions"> <button class="btn btn-primary" disabled type="submit">保存修改 (禁用按钮)</button> <button class="btn">取消</button> </div> </fieldset> </form> </body> </html>
运行结果