创新互联Bootstrap4教程：Bootstrap4自定义表单
Bootstrap4 自定义表单
Bootstrap4 可以自定义一些表单的样式来替换浏览器默认的样式。
成都创新互联公司服务项目包括巩留网站建设、巩留网站制作、巩留网页制作以及巩留网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，巩留网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到巩留省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！
自定义复选框
如果要自定义一个复选框，可以设置
复选框的文本使用 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
>
尝试一下 »
自定义单选框
如果要自定义一个单选框，可以设置 单选框的文本使用 label 标签，标签使用 .custom-control-label 类，label 的 for 属性值需要匹配单选框的 id。 < 我们可以在外部元素上使用 .custom-control-inline 类来包裹自定义表单控件，这样自定义表单控件就能显示在同一行： < 创建自定义选择菜单可以在 元素上添加 .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。 <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
>
尝试一下 »
当前题目：创新互联Bootstrap4教程：Bootstrap4自定义表单
URL网址：http://www.zsjierui.cn/article/codoijc.html