Bootstrap4 自定义表单自定义表单
Bootstrap4 自定义表单自定义表单
Bootstrap4 可以自定义一些表单的样式来替换浏览器默认的样式。
自定义复选框自定义复选框
如果要自定义一个复选框,可以设置
为父元素,类为 .custom-control 和 .custom-checkbox,复选框作为子元素放在该
里头,然后复选框设置为 type=”checkbox”,类为 .custom-control-input。
复选框的文本使用 label 标签,标签使用 .custom-control-label 类,label 的 for 属性值需要匹配复选框的 id。
Bootstrap4 实例实例
自定义复选框
自定义单选框自定义单选框
如果要自定义一个单选框,可以设置
为父元素,类为 .custom-control 和 .custom-radio,单选框作为子元素放在该
里头,然后单选框设置为里头,然后单选框设置为 type=”radio”,类为,类为 .custom-control-input。。
单选框的文本使用单选框的文本使用 label 标签,标签使用标签,标签使用 .custom-control-label 类,类,label 的的 for 属性值需要匹配单选框的属性值需要匹配单选框的 id。。
Bootstrap4 实例实例
自定义单选框自定义单选框
自定义控件显示在同一行自定义控件显示在同一行
我们可以在外部元素上使用我们可以在外部元素上使用 .custom-control-inline 类来包裹自定义表单控件,这样自定义表单控件就能显示在同一行:类来包裹自定义表单控件,这样自定义表单控件就能显示在同一行:
Bootstrap4 实例实例
自定义单选框自定义单选框 1
自定义单选框自定义单选框 2
自定义选择菜单自定义选择菜单
创建自定义选择菜单可以在创建自定义选择菜单可以在 元素上添加元素上添加 .custom-select 类类:
Bootstrap4 实例实例
自定义选择菜单自定义选择菜单
Google
Runoob
Taobao
如果我们要设置自定义选择菜单大小,可以使用如果我们要设置自定义选择菜单大小,可以使用 .custom-select-sm、、.custom-select-lg 来设置它们的大小来设置它们的大小:
Bootstrap4 实例实例
比较小的自定义选择菜单比较小的自定义选择菜单
Google
Runoob
Taobao
比较大的自定义选择菜单比较大的自定义选择菜单
Google
Runoob
Taobao