Bootstrap4 表单


在本章中,我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。
表单元素 , <textarea>, 和 elements 在使用 .form-control 类的情况下,宽度都是设置为 100%。
Bootstrap4 表单布局
1、堆叠表单 (全屏宽度):垂直方向
2、内联表单:水平方向
Bootstrap 提供了两种类型的表单布局:

堆叠表单

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


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

Bootstrap4 表单

内联表单

所有内联表单中的元素都是左对齐的。
注意:在屏幕宽度小于 576px 时为垂直堆叠,如果屏幕宽度大于等于 576px 时表单元素才会显示在同一个水平线上。
内联表单需要在 元素上添加 .form-inline类。
以下实例使用两个输入框,一个复选框,一个提交按钮来创建内联表单:


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

Bootstrap4 表单


<< Bootstrap4 面包屑导航(Breadcrumb) Bootstrap4 表单控件 >>
  • 作者 建站迷

    建站迷

    让天下没有难做的网站!
    解决中小型企业的无站之伤。



没有账号? 忘记密码?

社交账号快速登录