<!DOCTYPEhtml><htmllang="zh-CN"><head><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><title>Bootstrap 101 Template</title><!-- Bootstrap --><linkhref="css/bootstrap.min.css"rel="stylesheet"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --><!-- WARNING: Respond.js doesn't work if you view the page via file:// --><!--[if lt IE 9]><script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script><![endif]--></head><body><h1>你好，世界！</h1><!-- jQuery (necessary for Bootstrap's JavaScript plugins) --><scriptsrc="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script><!-- Include all compiled plugins (below), or include individual files as needed --><scriptsrc="js/bootstrap.min.js"></script></body></html>
7 浏览器支持
手机浏览器
——-
Chrome
Firefox
Safari
Android
Supported
Supported
N/A
iOS
Supported
Supported
Supported
桌面浏览器
———
Chrome
Firefox
Internet Explorer
Opera
Safari
Mac
Supported
Supported
N/A
Supported
Supported
Windows
Supported
Supported
Supported
Supported
Not supported
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p></blockquote><blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p><footer>Someone famous in <citetitle="Source Title">Source Title</cite></footer></blockquote><blockquoteclass="blockquote-reverse">...
</blockquote>
<form><divclass="form-group"><labelfor="exampleInputEmail1">Email address</label><inputtype="email"class="form-control"id="exampleInputEmail1"placeholder="Email"></div><divclass="form-group"><labelfor="exampleInputPassword1">Password</label><inputtype="password"class="form-control"id="exampleInputPassword1"placeholder="Password"></div><divclass="form-group"><labelfor="exampleInputFile">File input</label><inputtype="file"id="exampleInputFile"><pclass="help-block">Example block-level help text here.</p></div><divclass="checkbox"><label><inputtype="checkbox"> Check me out</label></div><buttontype="submit"class="btn btn-default">Submit</button></form>
包括大部分表单控件、文本输入域控件，还支持所有 HTML5 类型的输入控件： text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。
只有正确设置了 type 属性的输入控件才能被赋予正确的样式。
文本域
支持多行文本的表单控件。可根据需要改变 rows 属性。
多选和单选框
默认样式
<divclass="checkbox"><label><inputtype="checkbox"value="">Option one is this and that—be sure to include why it's great</label></div><divclass="checkbox disabled"><label><inputtype="checkbox"value=""disabled>Option two is disabled</label></div><divclass="radio"><label><inputtype="radio"name="optionsRadios"id="optionsRadios1"value="option1"checked>Option one is this and that—be sure to include why it's great</label></div><divclass="radio"><label><inputtype="radio"name="optionsRadios"id="optionsRadios2"value="option2">Option two can be something else and selecting it will deselect option one</label></div><divclass="radio disabled"><label><inputtype="radio"name="optionsRadios"id="optionsRadios3"value="option3"disabled>Option three is disabled</label></div>
<labelclass="sr-only"for="inputHelpBlock">Input with help text</label><inputtype="text"id="inputHelpBlock"class="form-control"aria-describedby="helpBlock">
...
<spanid="helpBlock"class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
<divclass="form-group has-success"><labelclass="control-label"for="inputSuccess1">Input with success</label><inputtype="text"class="form-control"id="inputSuccess1"aria-describedby="helpBlock2"><spanid="helpBlock2"class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span></div><divclass="form-group has-warning"><labelclass="control-label"for="inputWarning1">Input with warning</label><inputtype="text"class="form-control"id="inputWarning1"></div><divclass="form-group has-error"><labelclass="control-label"for="inputError1">Input with error</label><inputtype="text"class="form-control"id="inputError1"></div><divclass="has-success"><divclass="checkbox"><label><inputtype="checkbox"id="checkboxSuccess"value="option1">Checkbox with success</label></div></div><divclass="has-warning"><divclass="checkbox"><label><inputtype="checkbox"id="checkboxWarning"value="option1">Checkbox with warning</label></div></div><divclass="has-error"><divclass="checkbox"><label><inputtype="checkbox"id="checkboxError"value="option1">Checkbox with error</label></div></div>
<!-- Standard button --><buttontype="button"class="btn btn-default">（默认样式）Default</button><!-- Provides extra visual weight and identifies the primary action in a set of buttons --><buttontype="button"class="btn btn-primary">（首选项）Primary</button><!-- Indicates a successful or positive action --><buttontype="button"class="btn btn-success">（成功）Success</button><!-- Contextual button for informational alert messages --><buttontype="button"class="btn btn-info">（一般信息）Info</button><!-- Indicates caution should be taken with this action --><buttontype="button"class="btn btn-warning">（警告）Warning</button><!-- Indicates a dangerous or potentially negative action --><buttontype="button"class="btn btn-danger">（危险）Danger</button><!-- Deemphasize a button by making it look like a link while maintaining button behavior --><buttontype="button"class="btn btn-link">（链接）Link</button>