我使用以下SASS将CSS与Bootstrap 4隔离:
.iso-bootstap {
@import "bootstrap";
}
这导入了所有的 Bootstrap css,在所有元素前面都有.iso-bootstap,这样我就只能在类为“iso-bootstrap”的div中使用 Bootstrap 。
我注意到这使得下面的验证JavaScript变得无用。我不太懂JavaScript,不知道如何修改JavaScript来理解CSS在做什么,因为.iso-bootstap在所有事情之前都被应用了。
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="http://getbootstrap.com/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script type="text/javascript">
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>
1条答案
按热度按时间1sbrub3j1#
我解决了我的问题。对于任何使用SASS将bootstrap隔离到类中的人来说。我的问题是我的编译器CodeKit编译并实现了用于向后验证的类。所以“.was-validated .iso-bootstap”需要是“.iso-bootstap, was-validated”。