Bootstrap4 自定義表單

Bootstrap4 可以自定義一些表單的樣式來替換瀏覽器默認(rèn)的樣式。

成都創(chuàng)新互聯(lián)公司服務(wù)項(xiàng)目包括鞏留網(wǎng)站建設(shè)、鞏留網(wǎng)站制作、鞏留網(wǎng)頁制作以及鞏留網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，鞏留網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到鞏留省份的部分城市，未來相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

自定義復(fù)選框

如果要自定義一個(gè)復(fù)選框，可以設(shè)置

為父元素，類為 .custom-control 和 .custom-checkbox，復(fù)選框作為子元素放在該

里頭，然后復(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
>

嘗試一下 ?

自定義單選框

如果要自定義一個(gè)單選框，可以設(shè)置

為父元素，類為 .custom-control 和 .custom-radio，單選框作為子元素放在該

里頭，然后單選框設(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)建自定義選擇菜單可以在

日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

新聞中心

Bootstrap4 自定義表單

自定義復(fù)選框

Bootstrap4 實(shí)例

自定義單選框

Bootstrap4 實(shí)例

自定義控件顯示在同一行

Bootstrap4 實(shí)例

自定義選擇菜單