Bootstrap 自定义表单
在本教程中，您将学习如何使用 Bootstrap 创建自定义表单控件。
创建自定义表单控件
Bootstrap 4 使您能够自定义浏览器的默认表单控件以创建更优雅的表单布局。 现在，您可以创建完全自定义且跨浏览器兼容的单选按钮和复选框、文件输入、选择下拉菜单、范围输入等。
在以下部分中，您将看到如何一一创建这些自定义表单元素。
创建自定义复选框
要创建自定义复选框，请将每个复选框 <input> 及其对应的 <label> 包装在 <div> 元素中，并应用如下示例所示的类：
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="customCheck" id="customCheck1">
<label class="custom-control-label" for="customCheck1">Custom checkbox</label>
</div>
<div class="custom-control custom-checkbox mt-2">
<input type="checkbox" class="custom-control-input" name="customCheck" id="customCheck2" checked>
<label class="custom-control-label" for="customCheck2">Another custom checkbox</label>
</div>— 上面示例的输出将如下所示：
创建自定义单选按钮
同样，您可以像这样使用 Bootstrap 创建自定义单选按钮：
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" name="customRadio" id="customRadio1">
<label class="custom-control-label" for="customRadio1">Custom radio</label>
</div>
<div class="custom-control custom-radio mt-2">
<input type="radio" class="custom-control-input" name="customRadio" id="customRadio2" checked>
<label class="custom-control-label" for="customRadio2">Another custom radio</label>
</div>— 上面示例的输出将如下所示：
您还可以通过简单地在包装器 <div> 元素上添加类 .custom-control-inline 来将这些自定义复选框和单选按钮内联，如下所示：
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" class="custom-control-input" name="customRadio" id="customRadio1">
<label class="custom-control-label" for="customRadio1">Custom radio</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" class="custom-control-input" name="customRadio" id="customRadio2" checked>
<label class="custom-control-label" for="customRadio2">Another custom radio</label>
</div>— 上面示例的输出将如下所示：
禁用自定义复选框和单选
自定义复选框和单选按钮也可以禁用。 只需将布尔属性 disabled 添加到 <input> 元素，如下例所示：
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck" disabled>
<label class="custom-control-label" for="customCheck">Disabled custom checkbox</label>
</div>
<div class="custom-control custom-radio mt-2">
<input type="radio" class="custom-control-input" id="customRadio" disabled>
<label class="custom-control-label" for="customRadio">Disabled custom radio</label>
</div>— 上面示例的输出将如下所示：
创建切换开关
开关标记类似于自定义复选框，唯一的区别是它使用 .custom-switch 类代替 .custom-checkbox 来呈现切换开关。
开关还支持 disabled 属性。 让我们看一个例子：
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="customSwitch1">
<label class="custom-control-label" for="customSwitch1">Toggle switch</label>
</div>
<div class="custom-control custom-switch mt-2">
<input type="checkbox" class="custom-control-input" disabled id="customSwitch2">
<label class="custom-control-label" for="customSwitch2">Disabled switch element</label>
</div>— 上面示例的输出将如下所示：
创建自定义选择菜单
只需在 <select> 元素上添加类 .custom-select 即可创建自定义选择菜单。 但是，选择菜单的自定义样式仅限于初始外观，并且由于浏览器限制不能修改 <option>。 这是一个例子：
<select class="custom-select">
<option selected>Custom select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>— 上面示例的输出将如下所示：
您还可以创建小型和大型自定义选择以匹配类似大小的 Bootstrap 文本输入。
<select class="custom-select custom-select-lg">
<option selected>Large custom select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select class="custom-select mt-3">
<option selected>Default custom select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select class="custom-select custom-select-sm mt-3">
<option selected>Small custom select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>— 上面示例的输出将如下所示：
Bootstrap 自定义选择也像普通选择一样支持 multiple 和 size 属性：
<select class="custom-select" size="3" multiple>
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>创建自定义范围输入
要创建自定义范围输入，只需将 .custom-range 类应用于 <input type="range">。
<label for="customRange">Custom range</label>
<input type="range" class="custom-range" id="customRange">— 上面示例的输出将如下所示：
默认情况下，范围输入具有 min 和 max 的隐含值——分别为 0 和 100。 但是，您可以为那些使用 min 和 max 属性的值指定新值。
此外，默认情况下，范围输入"捕捉"到整数值。 要更改此设置，您可以指定 step 值。 在以下示例中，我们使用 step="0.5" 将步数增加了一倍。
<label for="customRange">Custom range</label>
<input type="range" class="custom-range" min="0" max="10" step="0.5" id="customRange">创建自定义文件输入
使用 Bootstrap 4，您还可以创建优雅的自定义文件输入，并在浏览器中一致地呈现。 让我们试试下面的例子，看看它是如何工作的：
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFile">
<label class="custom-file-label" for="customFile">Choose file</label>
</div>— 上面示例的输出将如下所示：
