Bootstrap4表单常见的使用方法和样式

Bootstrap 4 提供了简洁且灵活的表单样式和布局方式,以下是 Bootstrap 4 表单的一些常见使用方法:

  1. 基本表单结构

    • 使用 <form> 标签包裹整个表单。
    • 使用 .form-group 类为每个输入控件添加适当的间距。
  2. 文本输入框

    • 使用 <input> 标签创建文本输入框,并添加 .form-control 类以应用样式。
  3. 标签

    • 使用 <label> 标签为输入框添加描述性文本,并通过 for 属性关联到相应的输入控件。
  4. 按钮

    • 使用 <button><input type="submit"> 创建提交按钮,并添加 .btn.btn-primary 类以应用样式。
  5. 水平表单

    • 使用 .form-horizontal 类创建水平布局的表单。
    • 使用栅格系统(如 .row.col-*)来控制表单元素的布局。
  6. 内联表单

    • 使用 .form-inline 类创建内联表单,使表单元素在同一行显示。
  7. 复选框和单选按钮

    • 使用 <input type="checkbox"><input type="radio"> 创建复选框和单选按钮。
    • 使用 .form-check 类包裹复选框和单选按钮,并使用 .form-check-label 类为它们添加标签。
  8. 选择框

    • 使用 <select> 标签创建下拉选择框,并添加 .form-control 类以应用样式。
  9. 文本域

    • 使用 <textarea> 标签创建多行文本输入框,并添加 .form-control 类以应用样式。
  10. 帮助文本

    • 使用 <small> 标签为输入控件添加帮助文本,并添加 .form-text 类以应用样式。

以下是一个简单的 Bootstrap 4 表单示例:

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">邮箱地址</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="请输入邮箱">
    <small id="emailHelp" class="form-text text-muted">我们不会泄露您的邮箱地址。</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">密码</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入密码">
  </div>
  <div class="form-group form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">记住我</label>
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>

通过这些方法,您可以轻松地创建美观且功能齐全的表单。

0 条评论

还没有人发表评论

发表评论 取消回复

记住我的信息,方便下次评论
有人回复时邮件通知我