Bootstrap 自定义表单

自定义复选框

要创建自定义复选框，请将容器元素（如<div>）包装为 .custom-control 和 .custom-checkbox 类；然后将 .custom-control-input 添加到类型为 "checkbox" 的输入中。

提示：如果将标签用于附带的文本，请向其添加 .custom-control-label 类；请注意，for 属性的值应与复选框的 ID 相匹配：

<form>
  <div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="customCheck" name="example1">
    <label class="custom-control-label" for="customCheck">自定义复选框</label>
  </div>
</form>

尝试一下

输出结果如下：

勾选此自定义复选框

自定义开关

要创建自定义的“拨动开关”，请在一个复选框周围包裹一个容器元素（如<div>）以及 .custom-control 和 .custom-switch 类；然后将.custom-control-input 类添加到复选框：

<form>
  <div class="custom-control custom-switch">
    <input type="checkbox" class="custom-control-input" id="switch1">
    <label class="custom-control-label" for="switch1">切换我</label>
  </div>
</form>

尝试一下

输出结果如下：

切换我

自定义单选按钮

要创建自定义单选按钮，请将容器元素（如<div>）包装为 .custom-control 和 .custom-radio 类；然后将 .custom-control-input 添加到类型为 "radio" 的输入中。

提示：如果将标签用于附带的文本，请向其添加 .custom-control-label 类；请注意，for 属性的值应与单选按钮的 ID 相匹配：

<form>
  <div class="custom-control custom-radio">
    <input type="radio" class="custom-control-input" id="customRadio" name="example1" value="customEx">
    <label class="custom-control-label" for="customRadio">自定义单选按钮</label>
  </div>
</form>

尝试一下

输出结果如下：

自定义单选按钮

如果希望自定义表单控件并排（内联）放置，请将 .custom-control-inline 添加到包装器/容器：

<form>
  <div class="custom-control custom-radio custom-control-inline">
    <input type="radio" class="custom-control-input" id="customRadio" name="example" value="customEx">
    <label class="custom-control-label" for="customRadio">自定义单选按钮1</label>
  </div>
  <div class="custom-control custom-radio custom-control-inline">
    <input type="radio" class="custom-control-input" id="customRadio2" name="example" value="customEx">
    <label class="custom-control-label" for="customRadio2">自定义单选按钮2</label>
  </div>
</form>

尝试一下

输出结果如下：

自定义选择菜单

要创建自定义选择菜单，请将 .custom-select 类添加到 <select> 元素：

<form>
  <select name="cars" class="custom-select">
    <option selected>自定义选择菜单</option>
    <option value="volvo">Volvo</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select>
</form>

尝试一下

输出结果如下：

使用 .custom-select-sm 类创建一个小的选择菜单，并使用 .custom-select-lg 类创建一个大菜单：

<form>
  <select name="cars" class="custom-select custom-select-sm">
    <option selected>小型选择菜单</option>
    <option value="volvo">Volvo</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select>

  <select name="cars" class="custom-select">
    <option selected>默认选择菜单</option>
    <option value="volvo">Volvo</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select>

  <select name="cars" class="custom-select custom-select-lg">
    <option selected>大型选择菜单</option>
    <option value="volvo">Volvo</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select>
</form>

尝试一下

输出结果如下：

自定义范围

要创建自定义范围菜单，请将 .custom-range 类添加到具有 type="<range>" 的输入中：

<form>
    <label for="customRange">自定义范围</label>
    <input type="range" class="custom-range" id="customRange" name="points1">
</form>

尝试一下

输出结果如下：

自定义文件上传

要创建自定义文件上传，请使用 type="file" 将带有 .custom-file 类的容器元素包装在输入周围；然后将 .custom-file-input 添加到其中。

提示：如果将标签用于附带的文本，请向其添加 .custom-file-label 类；请注意，for 属性的值应与复选框的 ID 相匹配：

<form>
    <input type="file" class="custom-file-input" id="customFile">
    <label class="custom-file-label" for="customFile">选择文件</label>
</form>
<script>
  // 如果要在选择时显示文件名，请添加以下代码
  $(".custom-file-input").on("change", function() {
    var fileName = $(this).val().split("\\").pop();
    $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
  });
</script>

尝试一下

输出结果如下：

Bootstrap 自定义表单

自定义复选框

自定义开关

自定义单选按钮

自定义选择菜单

自定义范围

自定义文件上传

相关页面