阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

    教程列表

    数据库
    抓包专区
    测试专区

    Bootstrap4 表单

    Bootstrap4 表单

    在本章中,我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。

    表单元素 <input>, <textarea>, 和 <select> elements 在使用 .form-control 类的情况下,宽度都是设置为 100%。

    Bootstrap4 表单布局

    • 堆叠表单 (全屏宽度):垂直方向
    • 内联表单:水平方向

    Bootstrap 提供了两种类型的表单布局:

    堆叠表单

    以下实例使用两个输入框,一个复选框,一个提交按钮来创建堆叠表单:

    <form>
      <div class="form-group">
        <label for="email">Email address:</label>
        <input type="email" class="form-control" id="email">
      </div>
      <div class="form-group">
        <label for="pwd">Password:</label>
        <input type="password" class="form-control" id="pwd">
      </div>
      <div class="form-check">
        <label class="form-check-label">
          <input class="form-check-input" type="checkbox"> Remember me
        </label>
      </div>
      <button type="submit" class="btn btn-primary">Submit</button>
    </form>
    

    内联表单

    所有内联表单中的元素都是左对齐的。

    注意:在屏幕宽度小于 576px 时为垂直堆叠,如果屏幕宽度大于等于576px时表单元素才会显示在同一个水平线上。

    内联表单需要在 <form> 元素上添加 .form-inline类。

    以下实例使用两个输入框,一个复选框,一个提交按钮来创建内联表单:

    <form class="form-inline">
      <label for="email">Email address:</label>
      <input type="email" class="form-control" id="email">
      <label for="pwd">Password:</label>
      <input type="password" class="form-control" id="pwd">
      <div class="form-check">
        <label class="form-check-label">
          <input class="form-check-input" type="checkbox"> Remember me
        </label>
      </div>
      <button type="submit" class="btn btn-primary">Submit</button>
    </form>
    
    卖前端学习教程

    只需几十元,就能买到培训班的内部教程!开启高薪之路!

    零基础小白阿里P7的教程都有!

    同时长期收购所有培训班的前端教程

    目录
    目录