Bootstrap 4 自定義表單
Bootstrap 4 自定義表單
Bootstrap 4 提供了自定義表單元素，旨在替換瀏覽器預設樣式。
自定義範圍
預設範圍
自定義複選框
要建立自定義複選框，請將一個容器元素（如 <div>）用類 .custom-control 和 .custom-checkbox 包裹在複選框周圍。然後將 .custom-control-input 新增到 type="checkbox" 的輸入框中。
提示: 如果您使用 label 作為附帶文字，請為其新增 .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" 的輸入框中。
提示: 如果您使用 label 作為附帶文字，請為其新增 .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 新增到其中。
提示: 如果您使用 label 作為附帶文字，請為其新增 .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>
自己動手試一試 »
