如何使用bootstrap制作form表单

制作表单的方法

首先利用form> 标签设置表单，然后为表单的每个元素设置class =”form - group“（用“div> ”等标签设置你想要设置class =”form-group“的范围）。最后通过在input> 标签中设置class =”form-control“来完成。

我们来看bootstrap创建表单的具体示例

代码如下

!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表单的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！