怎么使用bootstrap制作form表单
怎么使用bootstrap制作form表单
这篇文章主要介绍了怎么使用bootstrap制作form表单的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇怎么使用bootstrap制作form表单文章都会有所收获，下面我们一起来看看吧。
制作表单的方法
首先利用<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“就可以了
关于“怎么使用bootstrap制作form表单”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“怎么使用bootstrap制作form表单”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注恰卡编程网行业资讯频道。
