Bootstrap 自定义表单
一、Bootstrap 自定义表单
1.1 自定义复选框
如果要自定义一个复选框,可以设置 <div> 为父元素,类为 .custom-control 和 .custom-checkbox,复选框作为子元素放在该 <div> 里头,然后复选框设置为 type=“checkbox”,类为 .custom-control-input。
复选框的文本使用 label 标签,标签使用 .custom-control-label 类,label 的 for 属性值需要匹配复选框的 id。
<div class="container mt-3"><form action="/action_page.php"><div class="custom-control custom-checkbox mb-3"><input type="checkbox" class="custom-control-input" id="customCheck" name="example1"><label class="custom-control-label" for="customCheck">自定义复选框</label></div><input type="checkbox" id="defaultCheck" name="example2"><label for="defaultCheck">默认复选框</label><br><button type="submit" class="btn btn-primary">提交</button></form>
</div>
1.2 自定义单选框
如果要自定义一个单选框,可以设置 <div> 为父元素,类为 .custom-control 和 .custom-radio,单选框作为子元素放在该 <div> 里头,然后单选框设置为 type=“radio”,类为 .custom-control-input。
单选框的文本使用 label 标签,标签使用 .custom-control-label 类,label 的 for 属性值需要匹配单选框的 id。
<div class="container mt-3"><form action="/action_page.php"><div class="custom-control custom-radio"><input type="radio" class="custom-control-input" id="customRadio" name="example1"><label class="custom-control-label" for="customRadio">自定义单选框</label></div> <input type="radio" id="defaultRadio" name="example2"><label for="defaultRadio">默认单选框</label><br><button type="submit" class="btn btn-primary">提交</button></form>
</div>
1.3 自定义控件显示在同一行
们可以在外部元素上使用 .custom-control-inline 类来包裹自定义表单控件,这样自定义表单控件就能显示在同一行:
<div class="container mt-3"><form action="/action_page.php"><div class="custom-control custom-radio custom-control-inline"><input type="radio" class="custom-control-input" id="customRadio1" name="example1"><label class="custom-control-label" for="customRadio1">自定义单选框 1</label></div><div class="custom-control custom-radio custom-control-inline"><input type="radio" class="custom-control-input" id="customRadio2" name="example2"><label class="custom-control-label" for="customRadio2">自定义单选框 2</label></div><button type="submit" class="btn btn-primary">提交</button></form>
</div>
1.4 自定义选择菜单
创建自定义选择菜单可以在 <select> 元素上添加 .custom-select 类:
如果我们要设置自定义选择菜单大小,可以使用 .custom-select-sm、.custom-select-lg 来设置它们的大小:
<div class="container mt-3"><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>
</div>
1.5 自定义滑块控件
我们可以在 input 为 type=“range” 的输入框中添加 .custom-range 类来设置自定义滑块控件:
<div class="container mt-3"><form action="/action_page.php"><label for="customRange">自定义滑块控件</label><input type="range" class="custom-range" id="customRange" name="points1"><label for="defaultRange">默认滑块控件</label><input type="range" id="defaultRange" name="points2"><p><button type="submit" class="btn btn-primary">提交</button></p></form>
</div>
1.6 自定义文件上传控件
我们可以在父元素添加 .custom-file 类,然后在 input 设置为 type=“file” 并添加 .custom-file-input:
上传控件的文本使用 label 标签,标签使用 .custom-file-label 类,label 的 for 属性值需要匹配复选框的 id。
<div class="container mt-3"><form action="/action_page.php"><p>自定义上传文件样式:</p><div class="custom-file mb-3"><input type="file" class="custom-file-input" id="customFile" name="filename"><label class="custom-file-label" for="customFile">选择文件</label></div><p>默认上传文件样式:</p><input type="file" id="myFile" name="filename2"><div class="mt-3"><button type="submit" class="btn btn-primary">提交</button></div></form>
</div>
Bootstrap 自定义表单相关推荐
- bootstrap中导航、导航栏、表单及自定义表单
导航: bootstrap中使用列表封装了水平导航,其类样式如: 类名 描述 .nav 给ul或ol,用于清除列表默认样式,并将列表项水平排列 .nav-item 给li,用于布局 .nav-link ...
- JEECG 3.6 自定义表单版本发布,智能快速开发平台
JEECG 3.6(智能快速开发平台) 自定义表单版本发布 平台介绍: JEECG(J2EE Code Generation),一款基于代码生成器的JAVA快速开发平台,集成强大代码生成器和在线开发机 ...
- Angular 4.x 自定义表单控件
当我们打算自定义表单控件前,我们应该先考虑一下以下问题: 是否已经有相同语义的 native (本机) 元素?如:<input type="number"> 如果有,我 ...
- bootstrap 5 表单验证
bootstrap 5 表单验证 写在前面 Bootstrap 是一个功能强大.功能丰富的前端工具包.bootstrap 以其优秀的栅格系统,为网页创作带来的极大的方便.目前版本是5.2 .然而在表单 ...
- 自定义表单mysql_自定义表单,计算答案然后更新mysql DB(Custom form, calculate answer then update mysql DB)...
自定义表单,计算答案然后更新mysql DB(Custom form, calculate answer then update mysql DB) 我想要实现的是用户购买代币时的模拟支付系统. 我坚 ...
- R语言write.xlsx函数将数据写入Excel文件:写入Excel文件并自定义表单的名称、将数据写入Excel文件新的表单(sheet)中、将文件保存为xls文件格式(而不是xlsx)
R语言write.xlsx函数将数据写入Excel文件:写入Excel文件并自定义表单的名称.将数据写入Excel文件新的表单(sheet)中.将文件保存为xls文件格式(而不是xlsx) 目录
- BootStrap 智能表单系列 五 表单依赖插件处理
这一章比较简单哦,主要就是生产表单元素后的一些后续处理操作,比如日期插件的渲染.一些autocomplete的处理等,在回调里面处理就可以了, demo: $("input.date-pic ...
- html表单输入框添加验证码,织梦Dedecms为自定义表单添加验证码功能
使用织梦Dedecms自定义表单的时候,即使你做了字段的验证,也很有可能被人刷很多垃圾的内容,更加安全的一个方法是为自定义表单添加上验证码功能.今天我就来为大家分享一下怎样给自定义表单添加验证码! 一 ...
- DedeCMS实现自定义表单提交后发送指定QQ邮箱法
https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&tn=monline_3_dg&wd=dedecms 邮箱&oq=d ...
最新文章
- Windows Server 2008 禁用Internet Explorer 增强的安全配置
- 同时测试多个服务是否存活的脚本[shell和perl]
- unix awk手册读书笔记
- 关于kali相关的参考文章
- linux dd devzero,makefile中ifeq与ifneq dev/null和dev/zero简介 dd命令
- 使用rapid-framework自动生成struct2
- 得到python默认的帮助文档
- 美国“四院院士”特伦斯谈人工智能“瓶颈”:远未达极限,数学家已经有了实现AI可解释性的理论工具...
- [转]如何设置win7一直以管理员身份运行
- 第 14 章 垃圾回收概述
- scala和java集合的区别_Scala中Array和List的区别
- 熊猫直播破产背后:王思聪不肯再借钱,谋求卖身腾讯未果
- Amaze UI 图标查询
- 综合能源管理电力市场改革的主要问题及分析_能谱网
- ourplay插件_ourplay64位辅助包
- hexo+yilia进行SEO优化
- 编译内核报错 No rule to make target ‘debian/canonical-certs.pem‘ 或 ‘canonical-revoked-certs.pem‘ 的解决方法
- magicbook2018+MX150+win10+显卡驱动445.87+cuda_10.0.130+cudnn_v7.6.4.38+conda4.8.3+tensorflow1.14.0
- ALC655 VS PCI128D
- 捷讯fw300r虚拟服务器口号,迅捷FW300R无线路由器WDS无线桥接设置方法