使toastr警报看起来像引导警报

Question

我想让toastr的弹出窗口与Bootstrap警报相同或非常接近.我怎样才能做到这一点？

Answer 1

包含Bootstrap警报的CSS,然后在toastr选项中,更改toastClass和iconClasses的值:

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

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

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

您可以根据需要保留填充,或者将其添加到您自己的CSS文件而不是编辑toastr(可能最好,只需确保您的后续加载).

Answer 2

为了使它们与bootstrap 3.2.0相同，我使用了所选答案的组合-尽管alert-error应该是alert-danger-和这个要点，它用fontawesome图标替换了图标

https://gist.github.com/askehansen/9528424

为了使它们看起来完全一样，我也

• 将吐司的不透明度设置为1
• 更改标题和消息颜色以匹配引导程序

CSS是

#toast-container > div {
    opacity: 1;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    filter: alpha(opacity=100);
}

#toast-container > .alert {
    background-image: none !important;
}

#toast-container > .alert:before {
    position: fixed;
    font-family: FontAwesome;
    font-size: 24px;
    float: left;
    color: #FFF;
    padding-right: 0.5em;
    margin: auto 0.5em auto -1.5em;
}

#toast-container > .alert-info:before {
    content: "\f05a";
}
#toast-container > .alert-info:before,
#toast-container > .alert-info {
    color: #31708f;
}

#toast-container > .alert-success:before {
    content: "\f00c";
}
#toast-container > .alert-success:before,
#toast-container > .alert-success {
    color: #3c763d;
}

#toast-container > .alert-warning:before {
    content: "\f06a";
}
#toast-container > .alert-warning:before,
#toast-container > .alert-warning {
    color: #8a6d3b;
}

#toast-container > .alert-danger:before {
    content: "\f071";
}
#toast-container > .alert-danger:before,
#toast-container > .alert-danger {
    color: #a94442;
}