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