最新的Web开发教程
 

Bootstrap CSS Forms Reference


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 对齐的标签和表单控件组中的水平布局 尝试一下