让toastr警告框看起来像bootstrap警告框

Question

我希望将toastr的弹出窗口外观与Bootstrap警报相同或非常接近。我该如何实现？

- Sean Kearon

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中，从#toast-container > div中移除投影效果，使其最终看起来像这样：

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

如果您愿意，可以保留填充，或将其添加到自己的CSS文件中，而不是编辑toastr的文件（最好这样做，只需确保在之后加载您的文件）。

- frostyterrier

---

非常好的工作 - 非常感谢！ 是的，我把 CSS 留下来了，因为颜色已足够防止两个警报在视觉上发生冲突。 - Sean Kearon

Answer 2

为了使它们与Bootstrap 3.2.0相同，我使用了所选答案的组合 - 尽管alert-error应该是alert-danger - 以及这个代码片段，用FontAwesome图标替换了原来的图标。

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

为了使它们看起来完全相同，我还：

• 将烤面包的不透明度设置为1
• 更改标题和消息颜色以匹配Bootstrap

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;
}

- james

Answer 3

这篇文章有些陈旧，但我想添加另一种可能的解决方案。

我发现默认的Bootstrap“警报”颜色方案对于toastr消息来说有点过于轻盈。我使用了自定义的LESS文件，并采取以下措施使它们变暗。

#toast-container {
   @darken-amount: 10%;

   .toast-error {
      background-color: darken(@brand-danger, @darken-amount);
   }

   .toast-warning {
      background-color: darken(@brand-warning, @darken-amount);
   }

   .toast-success {
      background-color: darken(@brand-success, @darken-amount);
   }

   .toast-info {
     background-color: darken(@brand-info, @darken-amount);
   }
}

可选地，您还可以更改消息中文本的颜色：

.toast-message {
   color: #000;
}

- DReimer