Bootstrap 4 表单输入，带有用于验证的图标 [英] Bootstrap 4 form input with icon for validation

查看：25
本文介绍了Bootstrap 4 表单输入，带有用于验证的图标的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

如何使用 valid-feedback 或 invalid-feedback 类在 Bootstrap 4 中获得相同的功能?

解决方案

Bootstrap 4 不包含图标(glyphicons 消失了)，现在只有 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 {位置:绝对；宽度:自动；底部:10px；右:10px；边距顶部:0；}

HTML

<label for="input2">对图标有效</label><input type="text" class="form-control is-valid" id="input2"><div class="valid-feedback feedback-icon"><i class="fa fa-check"></i>
<div class="invalid-feedback feedback-icon"><i class="fa fa-times"></i>

输入验证图标演示
带有工作验证的演示

.valid-feedback.feedback-icon,.invalid-feedback.feedback-icon {位置:绝对；宽度:自动；底部:10px；右:10px；边距顶部:0；}

<头><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><身体><div class="容器"><div class="form-group position-relative"><label for="input2">对图标有效</label><input type="text" class="form-control is-valid" id="input2"><div class="valid-feedback feedback-icon"><i class="fa fa-check"></i>

<div class="invalid-feedback feedback-icon"><i class="fa fa-times"></i>

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

In Bootstrap 3 there were optional icons for each of the validation states. The icon would appear in the right side of the input using the has-feedback, has-success, has-danger, etc... classes.

How can I get this same functionality in Bootstrap 4 using the valid-feedback or invalid-feedback classes?

解决方案

Bootstrap 4 doesn't include icons (glyphicons are gone), and there are now just 2 validation states (is-valid and is-invalid) that control display of the valid-feedback and invalid-feedback text.

With a little extra CSS, you can position an icon inside the input (to the right), and control its' display using is-valid or is-invalid on the form-control input. Use a font lib like fontawesome for the icons. I created a new feedback-icon class that you can add to the 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>

Demo of input validation icons
Demo with working validation

.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>

Notice that the containing form-group is position:relative using the position-relative class.

这篇关于Bootstrap 4 表单输入，带有用于验证的图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆