创新互联Bootstrap4教程：Bootstrap4自定义表单

Bootstrap4 自定义表单

Bootstrap4 可以自定义一些表单的样式来替换浏览器默认的样式。

成都创新互联公司服务项目包括巩留网站建设、巩留网站制作、巩留网页制作以及巩留网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，巩留网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到巩留省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

自定义复选框

如果要自定义一个复选框，可以设置

为父元素，类为 .custom-control 和 .custom-checkbox，复选框作为子元素放在该

里头，然后复选框设置为 type="checkbox"，类为 .custom-control-input。

复选框的文本使用 label 标签，标签使用 .custom-control-label 类，label 的 for 属性值需要匹配复选框的 id。

Bootstrap4 实例

<
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
>

尝试一下 »

自定义单选框

如果要自定义一个单选框，可以设置

为父元素，类为 .custom-control 和 .custom-radio，单选框作为子元素放在该

里头，然后单选框设置为 type="radio"，类为 .custom-control-input。

单选框的文本使用 label 标签，标签使用 .custom-control-label 类，label 的 for 属性值需要匹配单选框的 id。

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
>

尝试一下 »

自定义控件显示在同一行

我们可以在外部元素上使用 .custom-control-inline 类来包裹自定义表单控件，这样自定义表单控件就能显示在同一行：

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
>

尝试一下 »

自定义选择菜单

创建自定义选择菜单可以在