Bootstrap's默认设置
个人窗体控件自动接收与一些全球性的造型Bootstrap 。
所有文本<input>, <textarea>和<select>的元素class="form-control"设置为width:100%; 默认。
对于标准的规则Bootstrap的形式:
- 添加role="form"到<form>元素(可以帮助改善无障碍使用屏幕阅读器的人)
- 包装标签和表单控件中<div>与元素class="form-group" (需要的最佳间距)
- 添加class="form-control"的所有文字<input>, <textarea>和<select>元素
下面的示例创建两个输入字段,一个复选框一个简单的引导的形式,和一个提交按钮:
引导形式实例
<form role="form">
<div class="form-group">
<label for="email">Email address:</label>
<input
type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label
for="pwd">Password:</label>
<input type="password"
class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox">
Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
试一试» <form>类
类 | 描述 | 例 |
---|---|---|
.form-inline | 使<form>左对齐与inline-block的控件(仅适用于表单中viewports的至少768px宽) | 尝试一下 |
.form-horizontal | 对齐的标签和表单控件组中的水平布局 | 尝试一下 |