使烤面包机警报看起来像引导警报 [英] Make toastr alerts look like bootstrap alerts

问题描述

我想使烤面包机的弹出窗口看起来与Bootstrap警报相同或非常接近.我该怎么办?

I'd like to make toastr's popup look the same as, or very close to, Bootstrap alerts. How can I do this?

推荐答案

包括用于Bootstrap警报的CSS，然后在您的toastr选项中，更改toastClass和iconClasses的值:

Include the CSS for the Bootstrap alerts, then in your toastr options, change the values of toastClass and iconClasses:

toastr.options = {
    toastClass: 'alert',
    iconClasses: {
        error: 'alert-error',
        info: 'alert-info',
        success: 'alert-success',
        warning: 'alert-warning'
    }
},

然后在toastr的CSS中，从#toast-container > div中删除阴影，使其最终看起来像:

Then in toastr's CSS, remove the dropshadow from #toast-container > div so that it ends up looking like:

#toast-container > div {
    width: 300px;
}

如果需要，您可以保留空白，也可以将其添加到自己的CSS文件中，而不用编辑toastr的空白(可能是最好的，只需确保之后再加载即可).

You could leave the padding if you wanted, or add that to your own CSS file instead of editing toastr's (probably best, just make sure yours is loaded afterwards).

这篇关于使烤面包机警报看起来像引导警报的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！