上一节:
下一节:

  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">
    尝试一下
    输出结果如下：

  • 相关页面

上一节:
下一节: