在 Bootstrap 4 中，自定义表单元素是指使用 Bootstrap 提供的工具对表单控件进行个性化定制，从而使其外观和功能符合设计要求。Bootstrap 4 提供了多种方法来实现自定义表单控件，比如自定义复选框、单选框、文件上传和选择框等。

1. 自定义复选框（Checkbox）

在 Bootstrap 4 中，复选框可以通过使用 .custom-control 和 .custom-checkbox 类进行自定义。

示例：

1
2
3
4
5
6
<div class="form-group">
  <div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="customCheck1">
    <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
  </div>
</div>

解释：

  • custom-control：为表单控件提供自定义样式。
  • custom-checkbox：指定这是一个自定义的复选框。
  • custom-control-input：用于自定义复选框的实际输入框。
  • custom-control-label：用于自定义复选框的标签。

2. 自定义单选框（Radio Button）

自定义单选框与自定义复选框类似，通过 .custom-control 和 .custom-radio 类来实现。

示例：

1
2
3
4
5
6
7
8
9
10
<div class="form-group">
  <div class="custom-control custom-radio">
    <input type="radio" class="custom-control-input" id="customRadio1" name="customRadio">
    <label class="custom-control-label" for="customRadio1">Option 1</label>
  </div>
  <div class="custom-control custom-radio">
    <input type="radio" class="custom-control-input" id="customRadio2" name="customRadio">
    <label class="custom-control-label" for="customRadio2">Option 2</label>
  </div>
</div>

解释：

  • custom-radio：指定这是一个自定义的单选框。
  • custom-control-input：自定义单选框的实际输入框。
  • custom-control-label：自定义单选框的标签。
  • name：确保同一组单选框互斥选择。

3. 自定义文件上传（File Upload）

自定义文件上传控件可以帮助用户选择并上传文件，并为上传控件增加更好的外观。

示例：

1
2
3
4
5
6
<div class="form-group">
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="customFile">
    <label class="custom-file-label" for="customFile">Choose file</label>
  </div>
</div>

解释：

  • custom-file：为文件上传控件提供自定义样式。
  • custom-file-input：自定义文件上传的实际输入框。
  • custom-file-label：自定义文件上传控件的标签。

4. 自定义选择框（Select）

Bootstrap 4 允许对选择框（<select>）进行自定义。通过 custom-select 类，你可以将默认的选择框样式更改为自定义样式。

示例：

1
2
3
4
5
6
7
8
9
<div class="form-group">
  <label for="customSelect">Custom select</label>
  <select class="custom-select" id="customSelect">
    <option selected>Choose...</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
</div>

解释：

  • custom-select：为选择框应用自定义样式。
  • select：指定这是一个选择框。

5. 自定义开关按钮（Switch）

Bootstrap 4 还允许你创建漂亮的自定义开关按钮（类似于复选框，但表现为滑动开关）。

示例：

1
2
3
4
5
6
<div class="form-group">
  <div class="custom-control custom-switch">
    <input type="checkbox" class="custom-control-input" id="customSwitch1">
    <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
  </div>
</div>

解释：

  • custom-switch：为开关按钮应用自定义样式。
  • custom-control-input：自定义开关按钮的实际输入框。
  • custom-control-label：自定义开关按钮的标签。

6. 自定义文本框（Text Input）

虽然文本框的样式在 Bootstrap 中已经很标准化，但你也可以通过自定义外观和功能来调整它们的显示效果。

示例：

1
2
3
4
<div class="form-group">
  <label for="customTextInput">Custom Text Input</label>
  <input type="text" class="form-control" id="customTextInput" placeholder="Enter text">
</div>

解释：

  • form-control：为文本输入框提供 Bootstrap 样式。

7. 禁用的自定义表单控件

你可以为自定义控件设置 disabled 属性，使其变为不可用。

示例：

1
2
3
4
5
6
<div class="form-group">
  <div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="customCheckDisabled" disabled>
    <label class="custom-control-label" for="customCheckDisabled">Disabled checkbox</label>
  </div>
</div>

解释：

  • disabled：禁用复选框，使其无法被选择。

8. 自定义表单控件的大小

Bootstrap 4 提供了 form-control-lg 和 form-control-sm 类来调整自定义表单控件的大小。

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="form-group">
  <div class="custom-control custom-checkbox custom-control-lg">
    <input type="checkbox" class="custom-control-input" id="customCheckLarge">
    <label class="custom-control-label" for="customCheckLarge">Large checkbox</label>
  </div>
</div>
 
<div class="form-group">
  <div class="custom-control custom-checkbox custom-control-sm">
    <input type="checkbox" class="custom-control-input" id="customCheckSmall">
    <label class="custom-control-label" for="customCheckSmall">Small checkbox</label>
  </div>
</div>

解释：

  • custom-control-lg：增大控件的大小。
  • custom-control-sm：缩小控件的大小。

9. 自定义多选框（Multiple Select）

通过自定义选择框，你可以创建多选框，允许用户选择多个选项。

示例：

1
2
3
4
5
6
7
8
<div class="form-group">
  <label for="customSelectMultiple">Custom multiple select</label>
  <select multiple class="custom-select" id="customSelectMultiple">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
</div>

解释：

  • multiple：允许用户选择多个选项。
  • custom-select：为选择框应用自定义样式。

总结

  • 自定义复选框和单选框：通过 custom-checkbox 和 custom-radio 类定制。
  • 自定义文件上传：通过 custom-file 类来定制。
  • 自定义选择框：使用 custom-select 类来进行样式定制。
  • 自定义开关按钮：使用 custom-switch 类来定制开关。
  • 禁用表单控件：通过 disabled 属性来禁用表单控件。

通过这些自定义选项，Bootstrap 4 使你能够快速定制各种表单控件，满足不同的设计需求。