问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

Bootstrap 4 表单输入，带有用于验证的图标

社区维基
1
新手上路，请多包涵

在 Bootstrap 3 中，每个验证状态都有可选的图标。该图标将使用 has-feedback 、 has-success 、 has-danger 等类出现在输入的右侧。

在此处输入图像描述 如何使用 valid-feedback 或 invalid-feedback 类在 Bootstrap 4 中获得相同的功能？

原文由 Zim 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译cssbootstrapvalidationbootstrap-4font-awesome
阅读 397
1 个回答
得票最新
社区维基
1
✓ 已被采纳

Bootstrap 4 不包括图标（字形图标消失了），现在只有 2 个验证状态（ is-valid 和 is-invalid ）控制 valid-feedback 的显示和 invalid-feedback 文本。

使用一些额外的 CSS，您可以在输入内（右侧）放置一个图标，并使用 is-valid 或 is-invalid 在 form-control 上控制其显示输入。对图标使用类似 fontawesome 的字体库。我创建了一个新的 feedback-icon 类，您可以将其添加到 valid/invalid-feedback 中。

 .valid-feedback.feedback-icon,
.invalid-feedback.feedback-icon {
    position: absolute;
    width: auto;
    bottom: 10px;
    right: 10px;
    margin-top: 0;
}

HTML

 <div class="form-group position-relative">
     <label for="input2">Valid with icon</label>
     <input type="text" class="form-control is-valid" id="input2">
     <div class="valid-feedback feedback-icon">
          <i class="fa fa-check"></i>
     </div>
     <div class="invalid-feedback feedback-icon">
          <i class="fa fa-times"></i>
     </div>
</div>

输入验证图标演示

带有工作验证的演示

 .valid-feedback.feedback-icon,
.invalid-feedback.feedback-icon {
    position: absolute;
    width: auto;
    bottom: 10px;
    right: 10px;
    margin-top: 0;
}

 <!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <div class="form-group position-relative">
     <label for="input2">Valid with icon</label>
     <input type="text" class="form-control is-valid" id="input2">
     <div class="valid-feedback feedback-icon">
          <i class="fa fa-check"></i>
     </div>
     <div class="invalid-feedback feedback-icon">
          <i class="fa fa-times"></i>
     </div>
   </div>
</div>

请注意，包含 form-group 是 position:relative 使用 position-relative 类。

原文由 Zim 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题