前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >开心档之Bootstrap4 自定义表单

开心档之Bootstrap4 自定义表单

作者头像
爱学iOS的小麦子
发布2023-02-21 14:35:55
1.1K0
发布2023-02-21 14:35:55
举报
文章被收录于专栏:iOS开发大全iOS开发大全

Bootstrap4 自定义表单

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


自定义复选框

如果要自定义一个复选框,可以设置 <div> 为父元素,类为 .custom-control 和 .custom-checkbox,复选框作为子元素放在该 <div> 里头,然后复选框设置为 type="checkbox" ,类为 .custom-control-input。

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

Bootstrap4 实例


自定义单选框

如果要自定义一个单选框,可以设置 <div> 为父元素,类为 .custom-control 和 .custom-radio,单选框作为子元素放在该 <div> 里头,然后单选框设置为 type="radio" ,类为 .custom-control-input。

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

Bootstrap4 实例


自定义控件显示在同一行

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

Bootstrap4 实例


自定义选择菜单

创建自定义选择菜单可以在 <select> 元素上添加 .custom-select 类:

Bootstrap4 实例

如果我们要设置自定义选择菜单大小,可以使用 .custom-select-sm、.custom-select-lg 来设置它们的大小:

Bootstrap4 实例


自定义滑块控件

我们可以在 inputtype="range" 的输入框中添加 .custom-range 类来设置自定义滑块控件:

Bootstrap4 实例


自定义文件上传控件

我们可以在父元素添加 .custom-file 类,然后在 input 设置为 type="file" 并添加 .custom-file-input:

上传控件的文本使用 label 标签,标签使用 .custom-file-label 类,labelfor 属性值需要匹配上传控件 id

Bootstrap4 实例

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文系转载前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Bootstrap4 自定义表单
    • 自定义复选框
      • Bootstrap4 实例
        • 自定义单选框
          • Bootstrap4 实例
            • 自定义控件显示在同一行
              • Bootstrap4 实例
                • 自定义选择菜单
                  • Bootstrap4 实例
                    • Bootstrap4 实例
                      • 自定义滑块控件
                        • Bootstrap4 实例
                          • 自定义文件上传控件
                            • Bootstrap4 实例
                            领券
                            问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档