Gli avvisi di toastr sembrano avvisi di bootstrap

Question

Mi piacerebbe fare in modo che il popup di toastr assomiglia agli avvisi Bootstrap o molto simili a quelli di Bootstrap. Come posso fare questo?

Answer 1

Includere il CSS per gli avvisi Bootstrap, poi nelle opzioni toastr, modificare i valori di toastClass e iconClasses:

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

Poi nel CSS di toastr, rimuovere il dropshadow da #toast-container > div in modo che finisce per assomigliare :

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

si poteva lasciare l'imbottitura se si voleva, o aggiungere che per il proprio file CSS invece che (probabilmente migliori, basta assicurarsi che il vostro è caricato in seguito) la modifica del toastr.

Answer 2

Questo post è un po 'vecchio, ma ho pensato di aggiungere un'altra possibile soluzione.

Ho trovato che lo schema di colore "avviso" bootstrap predefinito era un po 'di luce per i messaggi di toastr. Ho usato un file LESS personalizzato e ho fatto quanto segue per scurirli.

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

Opzionalmente, è anche possibile modificare il colore del testo del messaggio:

.toast-message { 
    color: #000; 
} 

Answer 3

per farli lo stesso di bootstrap 3.2.0, ho usato una combinazione della risposta selezionata - anche se alert-error dovrebbe essere alert-danger - e questo Gist, che sostituisce le icone con le icone fontawesome

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

To li fanno esattamente lo stesso aspetto anche io

• impostare l'opacità dei brindisi a 1
• cambiato il titolo e il messaggio di colore per abbinare 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; 
}