主页 / 问题 / 1191779
Accepted
skvernoslov
Asked:2021-10-18 12:18:56 +0000 UTC2021-10-18 12:18:56 +0000 UTC

Bootstrap 5如何在错误时突出显示输入（制作红色笔划）？

  • 772

以前，我对 bootstrap 没有丰富的经验，而我认为这些基本的东西都在里面。我需要突出显示包含红色电子邮件的输入。我可以在哪门课上做到这一点？出于某种原因，在有关此主题的文章中，我看到出于某种原因有必要为此创建专门的样式。没有这样的标准吗？

我有以下代码：

  <div class="row">
    <div class="input-group mb-3">
      <span class="input-group-text" id="basic-addon1">E-mail</span>
      <input type="text" id="email" class="form-control" placeholder="Введите E-mail адрес" aria-label="Email" aria-describedby="basic-addon1">
    </div>
  </div>

我知道使用 text-success 类你可以用绿色突出显示文本，只有我需要中风。

如果这个动作通常使用流行的 JavaScript 插件来完成，那么这个插件是什么以及如何使用它？

javascript

2 个回答

  1. 有！class is-invalid 将其添加到输入

    现在，出于某种原因，我查看了第 5 版的 bootstrap，由于某种原因，它也没有在文档中明确指出（当然，他们可能会修复它），因此请探索旧版本的文档https:// getbootstrap.com/docs/4.5/components/forms/

    • 5
  2. Best Answer

    一切都与 Bootstrap 4 中的相同：

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css" integrity="sha384-DhY6onE6f3zzKbjUPRc2hOzGAdEf4/Dz+WJwBvEYL/lkkIsI3ihufq9hk9K4lVoK" crossorigin="anonymous">
  
  <div class="container">
    <form class="form">
      <div class="row">
        <div class="input-group mb-3">
          <span class="input-group-text" id="basic-addon1">E-mail</span>
          <input type="text" id="email" class="form-control is-valid" placeholder="Введите E-mail адрес" aria-label="Email" aria-describedby="basic-addon1">
          <div class="valid-feedback">
            Looks good!
          </div>
        </div>
        
        <div class="input-group mb-3">
          <span class="input-group-text">City</span>
          <input class="form-control is-invalid" type="text" placeholder="Default input">
          <div class="invalid-feedback">
            Please provide a valid city.
          </div>
        </div>
      </div>
    </form>
  </div>

    • 2

相关问题