Bootstrap 表单输入



  • 定义和使用

    Bootstrap 支持以下表单控件:
    • input - 输入框
    • textarea - 文本输入域
    • checkbox - 复选框
    • radio - 单选框
    • select - 选择下拉框
  • Bootstrap 输入框

    Bootstrap 支持所有 HTML5 输入类型(<input type="">):text(文本),password(密码),datetime(日期时间),datetime-local(本地日期时间),date(日期),month(月份),time(时间),week(星期),number(数字),email(电子邮件),URL,search(搜索),tel(电话) 和 color(颜色)。
    注意:如果输入的类型未正确声明,则输入的样式将不完全!
    以下示例包含两个输入元素;type="text" 之一和 type="password" 之一;正如我们在“表单”一章中提到的那样,我们使用 .form-control 类来对输入内容进行全角和适当的填充等样式设置:
    <form>
      <div class="form-group">
        <label for="usr">用户名:</label>
        <input type="text" class="form-control" id="usr">
      </div>
      <div class="form-group">
        <label for="pwd">密码:</label>
        <input type="password" class="form-control" id="pwd">
      </div>
    </form>
    
    输出结果如下:
  • Bootstrap 文本区域

    下面的示例包含一个文本区域:
    <form>
      <div class="form-group">
        <label for="comment">评论:</label>
        <textarea class="form-control" rows="5" id="comment"></textarea>
      </div>
    </form>
    
    输出结果如下:
  • Bootstrap 复选框

    如果希望用户从预设选项列表中选择任意数量的选项,请使用复选框。
    以下示例包含三个复选框。 最后一个选项被禁用:
    <form>
      <div class="form-check">
        <label class="form-check-label">
          <input type="checkbox" class="form-check-input" value="">选项 1
        </label>
      </div>
      <div class="form-check">
        <label class="form-check-label">
          <input type="checkbox" class="form-check-input" value="">选项 2
        </label>
      </div>
      <div class="form-check">
        <label class="form-check-label">
          <input type="checkbox" class="form-check-input" value="" disabled>选项 3
        </label>
      </div>
    </form>
    
    输出结果如下:
    示例说明
    将包装元素与 class="form-check" 结合使用,以确保标签和复选框具有适当的页边距。
    .form-check-label 类添加到标签元素,然后将 .form-check-input 添加到 .form-check 容器内部的样式复选框。

    内联复选框

    如果希望复选框显示在同一行上,请使用.form-check-inline类:
    <form>
      <div class="form-check-inline">
        <label class="form-check-label">
          <input type="checkbox" class="form-check-input" value="">选项 1
        </label>
      </div>
      <div class="form-check-inline">
        <label class="form-check-label">
          <input type="checkbox" class="form-check-input" value="">选项 2
        </label>
      </div>
      <div class="form-check-inline">
        <label class="form-check-label">
          <input type="checkbox" class="form-check-input" value="" disabled>选项 3
        </label>
      </div>
    </form>
    
    输出结果如下:
  • Bootstrap 单选按钮

    如果要将用户限制为预设选项列表中的一个,则使用单选按钮。
    以下示例包含三个单选按钮。 最后一个选项被禁用:
    <form>
      <div class="form-check">
        <label class="form-check-label">
          <input type="radio" class="form-check-input" name="optradio">选项 1
        </label>
      </div>
      <div class="form-check">
        <label class="form-check-label">
          <input type="radio" class="form-check-input" name="optradio">选项 2
        </label>
      </div>
      <div class="form-check disabled">
        <label class="form-check-label">
          <input type="radio" class="form-check-input" name="optradio" disabled>选项 3
        </label>
      </div>
    </form>
    
    输出结果如下:
    与复选框一样,如果您希望单选按钮出现在同一行上,请使用 .form-check-inline 类:
    <form>
      <div class="form-check-inline">
        <label class="form-check-label">
          <input type="radio" class="form-check-input" name="optradio">选项 1
        </label>
      </div>
      <div class="form-check-inline">
        <label class="form-check-label">
          <input type="radio" class="form-check-input" name="optradio">选项 2
        </label>
      </div>
      <div class="form-check-inline">
        <label class="form-check-label">
          <input type="radio" class="form-check-input" name="optradio" disabled>选项 3
        </label>
      </div>
    </form>
    
    输出结果如下:
  • Bootstrap 选择列表

    如果要允许用户从多个选项中进行选择,则使用选择列表。
    以下示例包含一个下拉列表(选择列表):
    <form>
      <div class="form-group">
        <label for="sel1">选择列表:</label>
        <select class="form-control" id="sel1">
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
        </select>
      </div>
    </form>
    
    输出结果如下:
  • Bootstrap 表单控件

    使用 .form-control-sm.form-control-lg 类更改表单控件的大小:
    <input type="text" class="form-control form-control-sm" placeholder="小型表单控件">
    <input type="text" class="form-control form-control" placeholder="默认表单控件">
    <input type="text" class="form-control form-control-lg" placeholder="大型表单控件">
    
    输出结果如下:
    如果要将输入字段设置为纯文本,请使用 .form-control-plaintext类:
    <input type="text" class="form-control form-control" placeholder="默认表单控件">
    <input type="text" class="form-control-plaintext" placeholder="表单控件纯文本">
    
    输出结果如下:
    .form-control-range 类添加到输入类型 "range",或将 .form-control-file 添加到输入类型 "file",以对范围控件或具有全角的文件字段设置样式:
    <input type="range" class="form-control-range">
    <input type="file" class="form-control-file border">
    
    输出结果如下: