Faire en sorte que les alertes toastr ressemblent à des alertes bootstrap
j'aimerais que le popup de toastr ressemble aux alertes Bootstrap. Comment puis-je faire cela?
3 réponses
Inclure le code CSS de Bootstrap alertes, puis dans votre toastr options, modifier les valeurs de toastClass et iconClasses:
toastr.options = {
toastClass: 'alert',
iconClasses: {
error: 'alert-error',
info: 'alert-info',
success: 'alert-success',
warning: 'alert-warning'
}
},
puis dans le CSS de toastr, supprimer le dropshadow de #toast-container > div pour qu'il finisse par ressembler à:
#toast-container > div {
width: 300px;
}
vous pouvez laisser le remplissage si vous le souhaitez, ou l'ajouter à votre propre fichier CSS au lieu d'éditer toastr's (probablement mieux, assurez-vous que le vôtre est chargé après).
pour les rendre identiques à bootstrap 3.2.0, j'ai utilisé une combinaison de la réponse sélectionnée-bien que alert-error devrait être alert-danger - et ce gist, qui remplace les icônes par des icônes fontawesome
https://gist.github.com/askehansen/9528424
Pour faire exactement la même chose j'ai aussi
- fixe l'opacité des toasts à 1
- a changé le titre et couleur du message pour correspondre à 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;
}
ce post est un peu vieux, mais j'ai pensé que je voudrais ajouter une autre solution possible.
j'ai trouvé que le schéma de couleurs par défaut de bootstrap" alert " était un peu léger pour les messages toastr. J'ai utilisé un fichier Moins personnalisé et j'ai fait ce qui suit pour les assombrir.
#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);
}
}
optionnellement, vous pouvez aussi changer la couleur du texte dans le message:
.toast-message {
color: #000;
}