twitter-bootstrap 使 toastr 警报看起来像引导程序警报
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15066882/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make toastr alerts look like bootstrap alerts
提问by Sean Kearon
I'd like to make toastr's popup look the same as, or very close to, Bootstrap alerts. How can I do this?
我想让 toastr 的弹出窗口看起来与 Bootstrap 警报相同或非常接近。我怎样才能做到这一点？
回答by frostyterrier
Include the CSS for the Bootstrap alerts, then in your toastr options, change the values of toastClass and iconClasses:
包括 Bootstrap 警报的 CSS，然后在 toastr 选项中，更改 toastClass 和 iconClasses 的值：
toastr.options = {
toastClass: 'alert',
iconClasses: {
error: 'alert-error',
info: 'alert-info',
success: 'alert-success',
warning: 'alert-warning'
}
},
Then in toastr's CSS, remove the dropshadow from #toast-container > divso that it ends up looking like:
然后在 toastr 的 CSS 中，从中删除阴影#toast-container > div，使其最终看起来像：
#toast-container > div {
width: 300px;
}
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).
如果需要，您可以保留内边距，或者将其添加到您自己的 CSS 文件中，而不是编辑 toastr（可能最好，只需确保您的内容在之后加载）。
回答by james
To make them the same as bootstrap 3.2.0, i used a combination of the selected answer - although alert-errorshould be alert-danger- and this gist, which replaces the icons with fontawesome icons
为了使它们与 bootstrap 3.2.0 相同，我使用了所选答案的组合 - 尽管alert-error应该是alert-danger- 和这个要点，它用字体很棒的图标替换了图标
https://gist.github.com/askehansen/9528424
https://gist.github.com/askehansen/9528424
To make them look exactly the same i also
为了让它们看起来完全一样，我也
- set the opacity of the toasts to 1
- changed the title and message colour to match bootstrap
- 将吐司的不透明度设置为 1
- 更改标题和消息颜色以匹配引导程序
css is
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;
}
回答by DReimer
This post is a little old, but I thought I would add another possible solution.
这篇文章有点旧，但我想我会添加另一个可能的解决方案。
I found the default bootstrap "alert" color scheme was a little light for the toastr messages. I used a custom LESS file and did the following to darken them.
我发现默认的引导程序“警报”配色方案对于 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);
}
}
Optionally, you can also change the color of the text in the message:
或者，您还可以更改消息中文本的颜色：
.toast-message {
color: #000;
}
