Bootstrap 4 自定义表单
Bootstrap 4 自定义表单
Bootstrap 4 带有自定义的表单元素，旨在替代浏览器默认的表单元素。
自定义范围
默认范围
自定义复选框
要创建自定义复选框，请将一个容器元素（如 <div>）用 .custom-control 和 .custom-checkbox 类包裹在复选框周围。然后将 .custom-control-input 类添加到 type="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 类添加到 type="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">沃尔沃</option>
<option value="fiat">菲亚特</option>
<option value="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">沃尔沃</option>
<option value="fiat">菲亚特</option>
<option value="audi">奥迪</option>
</select>
<!-- 大型 -->
<select name="cars" class="custom-select custom-select-lg">
<option selected>大型自定义下拉菜单</option>
<option value="volvo">沃尔沃</option>
<option value="fiat">菲亚特</option>
<option value="audi">奥迪</option>
</select>
</form>
动手试一试 »
自定义范围
要创建自定义范围菜单，请将 .custom-range 类添加到 type="<range>" 的输入框中。
示例
<form>
<label for="customRange">自定义范围</label>
<input type="range" class="custom-range" id="customRange" name="points1">
</form>
动手试一试 »
自定义文件上传
要创建自定义文件上传，请将一个容器元素用 .custom-file 类包裹在 type="file" 的输入框周围。然后将 .custom-file-input 类添加到输入框中。
提示： 如果你使用标签来添加辅助文本，请将 .custom-file-label 类添加到标签中。注意，for 属性的值应该与复选框的 id 相匹配。
请注意，如果你想在选择特定文件时显示文件名，你还需要包含一些 jQuery 代码。
示例
<form>
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFile">
<label class="custom-file-label" for="customFile">选择文件</label>
</div>
</form>
<script>
// 如果要使文件名在选择时显示，请添加以下代码。
$(".custom-file-input").on("change", function() {
var fileName = $(this).val().split("\\").pop();
$(this).siblings(".custom-file-label").addClass("selected").html(fileName);
});
</script>
动手试一试 »
