在 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 {
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>
请注意,包含 form-group
的 position:relative
使用了 position-relative
类。
关于css - Bootstrap 4 表单输入,带有用于验证的图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49323175/