Bootstrap 4表单输入,带有用于验证的图标 [英] Bootstrap 4 form input with icon for validation
问题描述
在Bootstrap 3中,每个验证状态都有可选的图标.该图标将使用has-feedback
,has-success
,has-danger
等类显示在输入的右侧.
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.
如何使用valid-feedback
或invalid-feedback
类在Bootstrap 4中获得相同的功能?
How can I get this same functionality in Bootstrap 4 using the valid-feedback
or invalid-feedback
classes?
推荐答案
Bootstrap 4 不包含图标(字形图标已消失),现在只有2个验证状态(is-valid
和is-invalid
)控制valid-feedback
和invalid-feedback
文本的显示.
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.
使用一些额外的CSS,您可以将图标放置在输入中(右侧),并使用form-control
输入上的is-valid
或is-invalid
来控制其显示.对图标使用像fontawesome这样的字体库.我创建了一个新的feedback-icon
类,您可以将其添加到valid/invalid-feedback
.
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>
.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>
请注意,使用position-relative
类包含的form-group
是position:relative
.
Notice that the containing form-group
is position:relative
using the position-relative
class.
这篇关于Bootstrap 4表单输入,带有用于验证的图标的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!