開心檔之Bootstrap4 自定義表單
Bootstrap4 自定義表單
Bootstrap4 可以自定義一些表單的樣式來替換瀏覽器默認(rèn)的樣式。
如果要自定義一個復(fù)選框，可以設(shè)置 <div> 為父元素，類為 .custom-control 和 .custom-checkbox，復(fù)選框作為子元素放在該 <div> 里頭，然后復(fù)選框設(shè)置為?type="checkbox"?，類為 .custom-control-input。
復(fù)選框的文本使用?label?標(biāo)簽，標(biāo)簽使用 .custom-control-label 類，label?的?for?屬性值需要匹配復(fù)選框的 id。
Bootstrap4 實(shí)例
<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">自定義復(fù)選框</label>
?</div></form>
自定義單選框
如果要自定義一個單選框，可以設(shè)置?<div>?為父元素，類為 .custom-control 和 .custom-radio，單選框作為子元素放在該?<div>?里頭，然后單選框設(shè)置為?type="radio"?，類為 .custom-control-input。
單選框的文本使用?label?標(biāo)簽，標(biāo)簽使用 .custom-control-label 類，label?的?for?屬性值需要匹配單選框的?id。
Bootstrap4 實(shí)例
<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 類來包裹自定義表單控件，這樣自定義表單控件就能顯示在同一行：
Bootstrap4 實(shí)例
<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>
自定義選擇菜單
創(chuàng)建自定義選擇菜單可以在?<select>?元素上添加 .custom-select 類:
Bootstrap4 實(shí)例
<form>
?<select name="cars" class="custom-select-sm">
? ?<option selected>自定義選擇菜單</option>
? ?<option value="Google">Google</option>
? ?<option value="Runoob">Runoob</option>
? ?<option value="Taobao">Taobao</option>
?</select></form>
如果我們要設(shè)置自定義選擇菜單大小，可以使用 .custom-select-sm、.custom-select-lg 來設(shè)置它們的大小:
Bootstrap4 實(shí)例
<form>
?<!-- 小 -->
?<select name="cars" class="custom-select-sm">
? ?<option selected>比較小的自定義選擇菜單</option>
? ?<option value="Google">Google</option>
? ?<option value="Runoob">Runoob</option>
? ?<option value="Taobao">Taobao</option>
?</select>
?<!-- 大 -->
?<select name="cars" class="custom-select-lg">
? ?<option selected>比較大的自定義選擇菜單</option>
? ?<option value="Google">Google</option>
? ?<option value="Runoob">Runoob</option>
? ?<option value="Taobao">Taobao</option>
?</select></form>
自定義滑塊控件
我們可以在?input?為?type="range"?的輸入框中添加 .custom-range 類來設(shè)置自定義滑塊控件:
Bootstrap4 實(shí)例
<form>
?<label for="customRange">自定義滑塊控件</label>
?<input type="range" class="custom-range" id="customRange" name="points1"></form>
自定義文件上傳控件
我們可以在父元素添加?.custom-file?類，然后在?input?設(shè)置為?type="file"?并添加 .custom-file-input:
上傳控件的文本使用?label?標(biāo)簽，標(biāo)簽使用 .custom-file-label 類，label?的?for?屬性值需要匹配上傳控件?id。
Bootstrap4 實(shí)例
<form>
?<div class="custom-file">
? ?<input type="file" class="custom-file-input" id="customFile">
? ?<label class="custom-file-label" for="customFile">選擇文件</label>
?</div></form>
