掃二維碼與項目經理溝通
我們在微信上24小時期待你的聲音
解答本文疑問/技術咨詢/運營咨詢/技術建議/互聯網交流
Bootstrap4 可以自定義一些表單的樣式來替換瀏覽器默認的樣式。

成都創(chuàng)新互聯公司服務項目包括鞏留網站建設、鞏留網站制作、鞏留網頁制作以及鞏留網絡營銷策劃等。多年來,我們專注于互聯網行業(yè),利用自身積累的技術優(yōu)勢、行業(yè)經驗、深度合作伙伴關系等,向廣大中小型企業(yè)、政府機構等提供互聯網行業(yè)的解決方案,鞏留網站推廣取得了明顯的社會效益與經濟效益。目前,我們服務的客戶以成都為中心已經輻射到鞏留省份的部分城市,未來相信會繼續(xù)擴大服務區(qū)域并繼續(xù)獲得客戶的支持與信任!
如果要自定義一個復選框,可以設置
復選框的文本使用 label 標簽,標簽使用 .custom-control-label 類,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
>
嘗試一下 ?
如果要自定義一個單選框,可以設置 單選框的文本使用 label 標簽,標簽使用 .custom-control-label 類,label 的 for 屬性值需要匹配單選框的 id。 < 我們可以在外部元素上使用 .custom-control-inline 類來包裹自定義表單控件,這樣自定義表單控件就能顯示在同一行: < 創(chuàng)建自定義選擇菜單可以在 元素上添加 .custom-select 類: < 如果我們要設置自定義選擇菜單大小,可以使用 .custom-select-sm、.custom-select-lg 來設置它們的大小: < 我們可以在 input 為 type="range" 的輸入框中添加 .custom-range 類來設置自定義滑塊控件: < 我們可以在父元素添加 .custom-file 類,然后在 input 設置為 type="file" 并添加 .custom-file-input: 上傳控件的文本使用 label 標簽,標簽使用 .custom-file-label 類,label 的 for 屬性值需要匹配上傳控件 id。 < 我們在微信上24小時期待你的聲音 解答本文疑問/技術咨詢/運營咨詢/技術建議/互聯網交流Bootstrap4 實例
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
>
嘗試一下 ? 自定義控件顯示在同一行
Bootstrap4 實例
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
>
嘗試一下 ? 自定義選擇菜單
Bootstrap4 實例
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
>
嘗試一下 ? Bootstrap4 實例
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
>
嘗試一下 ? 自定義滑塊控件
Bootstrap4 實例
form
>
<
label
for
=
"
customRange
"
>
自定義滑塊控件
label
>
<
input
type
=
"
range
"
class
=
"
custom-range
"
id
=
"
customRange
"
name
=
"
points1
"
>
form
>
嘗試一下 ? 自定義文件上傳控件
Bootstrap4 實例
form
>
<
div
class
=
"
custom-file
"
>
<
input
type
=
"
file
"
class
=
"
custom-file-input
"
id
=
"
customFile
"
>
<
label
class
=
"
custom-file-label
"
for
=
"
customFile
"
>
選擇文件
label
>
div
>
form
>
嘗試一下 ?
網站題目:創(chuàng)新互聯Bootstrap4教程:Bootstrap4自定義表單
分享路徑:http://uogjgqi.cn/article/codoijc.html

掃二維碼與項目經理溝通