Bootstrap 表单输入

表单控件

Bootstrap 支持如下表单控件:

  • input
  • textarea
  • checkbox
  • radio
  • select

Bootstrap Input(输入框)

Bootstrap 支持所有 HTML5 输入类型:text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, 和 color。

注意:如果没有正确声明 input 的类型,则不会完全设置 input 的样式!

以下实例包含两个 input 输入元素;其中一种为文本,另一种为密码:

实例
  1. <div class="form-group">
  2. <label for="usr">Name:</label>
  3. <input type="text" class="form-control" id="usr">
  4. </div>
  5. <div class="form-group">
  6. <label for="pwd">Password:</label>
  7. <input type="password" class="form-control" id="pwd">
  8. </div>

Bootstrap Textarea(文本区域)

下面的实例包含一个 textarea:

实例
  1. <div class="form-group">
  2. <label for="comment">评论:</label>
  3. <textarea class="form-control" rows="5" id="comment"></textarea>
  4. </div>

Bootstrap Checkboxes(复选框)

如果希望用户从预设选项列表中选择任意数量的选项,则使用 checkbox 复选框。

以下示例包含 3 个复选框。最后一个是禁用状态:

实例
  1. <div class="checkbox">
  2. <label><input type="checkbox" value="">Option 1</label>
  3. </div>
  4. <div class="checkbox">
  5. <label><input type="checkbox" value="">Option 2</label>
  6. </div>
  7. <div class="checkbox disabled">
  8. <label><input type="checkbox" value="" disabled>Option 3</label>
  9. </div>

如果想让复选框都在一行显示,可以使用 .checkbox-inline:

实例
  1. <label class="checkbox-inline"><input type="checkbox" value="">Option 1</label>
  2. <label class="checkbox-inline"><input type="checkbox" value="">Option 2</label>
  3. <label class="checkbox-inline"><input type="checkbox" value="">Option 3</label>

Bootstrap Radio Buttons(单选按钮)

如果要将用户限制为仅从预设选项列表中选择一个选项,可以使用单选按钮。

以下实例包含三个单选按钮。第一个处于选中状态,最后一个处于禁用状态:

实例
  1. <div class="radio">
  2. <label><input type="radio" name="optradio" checked>Option 1</label>
  3. </div>
  4. <div class="radio">
  5. <label><input type="radio" name="optradio">Option 2</label>
  6. </div>
  7. <div class="radio disabled">
  8. <label><input type="radio" name="optradio" disabled>Option 3</label>
  9. </div>

如果想让单按钮都在一行显示,可以使用 .radio-inline:

实例
  1. <label class="radio-inline"><input type="radio" name="optradio" checked>Option 1</label>
  2. <label class="radio-inline"><input type="radio" name="optradio">Option 2</label>
  3. <label class="radio-inline"><input type="radio" name="optradio">Option 3</label>

Bootstrap Select List(下拉列表)

如果希望允许用户从多个选项中进行选择,则使用选择列表。

以下实例包含一个下拉列表:

实例
  1. <div class="form-group">
  2. <label for="sel1">Select list:</label>
  3. <select class="form-control" id="sel1">
  4. <option>1</option>
  5. <option>2</option>
  6. <option>3</option>
  7. <option>4</option>
  8. </select>
  9. </div>