Bootstrap4 定制表格
Bootstrap 4 自定义表单
Bootstrap 4 附带了自定义表单元素，旨在替换浏览器默认值：
定制范围：
默认范围：
自定义复选框
要创建自定义复选框，请使用以下类包装容器元素，例如 <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">Check this custom checkbox</label>
</div>
</form>
亲自试一试 »
定制开关
要创建自定义 "toggle switch"，请使用以下类包装容器元素，例如 <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">Toggle me</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">Custom radio</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">Custom radio 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">Custom radio 2</label>
</div>
</form>
亲自试一试 »
自定义选择菜单
要创建自定义选择菜单，请添加.custom-select类到 <select> 元素：
示例
<form>
<select name="cars" class="custom-select">
<option selected>Custom Select Menu</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>
<!-- Small -->
<select name="cars" class="custom-select custom-select-sm">
<option selected>Small Custom Select Menu</option>
<option value="volvo">Volvo</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<!-- Large -->
<select name="cars" class="custom-select custom-select-lg">
<option selected>Large Custom Select Menu</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">Custom range</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">Choose file</label>
</div>
</form>
<script>
// Add the following code if you want the name of the file appear on select
$(".custom-file-input").on("change", function() {
var fileName = $(this).val().split("\\").pop();
$(this).siblings(".custom-file-label").addClass("selected").html(fileName);
});
</script>
亲自试一试 »