怎么用bootstrap做复杂的表单

Question

如题所述

Answer 1

单独的表单控件会被自动赋予一些全局样式。所有设置了.form-control的<input>、<textarea>和<select>元素都将被默认设置为width:
100%;。将label和前面提到的这些控件包裹在.form-group中可以获得最好的排列。

复制代码
代码如下:

<form role="form">
<div
class="form-group">
<label for="exampleInputEmail1">Email
address</label>
<input type="email" class="form-control"
id="exampleInputEmail1" placeholder="Enter email">
</div>
<div
class="form-group">
<label
for="exampleInputPassword1">Password</label>
<input
type="password" class="form-control" id="exampleInputPassword1"
placeholder="Password">
</div>
<div
class="form-group">
<label for="exampleInputFile">File
input</label>
<input type="file" id="exampleInputFile">
<p
class="help-block">Example block-level help text
here.</p>
</div>
<div
class="checkbox">
<label>
<input type="checkbox"> Check me
out
</label>
</div>
<button type="submit" class="btn
btn-default">Submit</button>
</form>