本文摘自PHP中文网,作者不言,侵删。
Bootstrap可以轻松创建经常看到的表单类型,编码非常的简单,所以本篇文章我们就来看看使用bootstrap创建表单的方法。制作表单的方法
首先利用<form>标签设置表单,然后为表单的每个元素设置class =”form - group“(用“<div>”等标签设置你想要设置class =”form-group“的范围)。最后通过在<input>标签中设置class =”form-control“来完成。
我们来看bootstrap创建表单的具体示例
代码如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
< title >sample</ title >
< script src = "bootstrap-4.2.1-dist/js/bootstrap.min.js" type = "text/javascript" ></ script >
< link rel = "stylesheet" type = "text/css" href = "bootstrap-4.2.1-dist/css/bootstrap.min.css" />
</ head >
< body style = "padding: 50px;" >
< form >
< div class = "form-group" >
< label for = "email" >电子邮箱</ label >
< input type = "email" class = "form-control" id = "email" placeholder = "电子邮箱" >
</ div >
< div class = "form-group" >
< label for = "pass" >密码</ label >
< input type = "password" class = "form-control" id = "pass" placeholder = "密码" >
</ div >
< div >
< label for = "file" >文件上传:</ label >
< input type = "file" id = "file" >
< p class = "help-block" >显示文件帮助。</ p >
</ div >
< div class = "check" >
< label >
< input type = "checkbox" >确认
</ label >
</ div >
< button type = "submit" class = "btu btn-default" >发送</ button >
</ form >
</ body >
</ html >
|
运行效果如下:
此外,还可以创建内联表单。我们只要在<form>标签中添加class =”form-inline“就可以了,在这里就不多说了,有兴趣的朋友可以自己试一试。
总结,以上就是本篇文章的全部内容了,更多精彩内容大家可以关注php中文网其他相关教程栏目!!!
以上就是如何使用bootstrap制作form表单的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
bootstrap如何限定日期选择器可选时间范围?(代码示例)
详解bootstrap自定义侧边导航栏的方法
bootstrap sass 如何使用
浅谈bootstrap如何自定义侧边导航栏样式
bootstrap组件有哪些
bootstrap是什么时间开源的
bootstrap什么时候使用
bootstrap框架优点有哪些
浅谈bootstraptable+jstree插件对树列表条件和查询条件的处理
bootstrap 怎么添加关闭按钮
更多相关阅读请进入《bootstrap》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 如何使用bootstrap制作form表单