跳到主要内容

使用Bootstrap如何创建表单控件的帮助文本?

参考答案:

在Bootstrap中,可以使用 form-text 类来创建表单控件的帮助文本。这通常用于为输入字段提供额外的说明或解释。

下面是一个简单的例子,展示如何使用Bootstrap创建带有帮助文本的表单:

<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>
  <button type="submit" class="btn btn-primary">提交</button>
</form>

在这个例子中,我们创建了一个电子邮件地址的输入字段,并在其下方添加了一个帮助文本,说明我们不会分享用户的电子邮件地址。

在HTML中,帮助文本被包裹在一个 <small> 元素中,并且使用 form-texttext-muted 类进行样式化。aria-describedby 属性被添加到输入字段中,以关联帮助文本。

这只是一个简单的例子,你可以根据自己的需要修改和扩展它,以创建更复杂的表单和更详细的帮助文本。