टोस्टर अलर्ट बूटस्ट्रैप अलर्ट की तरह दिखते हैं

Question

मैं टोस्टर के पॉपअप को बूटस्ट्रैप अलर्ट के समान, या बहुत करीब दिखाना चाहता हूं। मैं यह कैसे कर सकता हूँ?

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

फिर toastr के सीएसएस में, #toast-container > div से dropshadow को दूर इतना है कि यह समाप्त होता है की तरह लग रही:

Answer 1

बूटस्ट्रैप अलर्ट के लिए सीएसएस, तो अपने toastr विकल्पों में, toastClass के मूल्यों और iconClasses बदलने को शामिल करें :

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

यदि आप चाहते थे गद्दी छोड़ सकता है, या संपादन toastr के (शायद सबसे अच्छा है, बस यह सुनिश्चित कर लें तुम्हारा बाद में लोड किया जाता है) के बजाय अपने खुद के सीएसएस फ़ाइल के लिए कि जोड़ें।

Answer 2

यह पोस्ट थोड़ा पुराना है, लेकिन मैंने सोचा कि मैं एक और संभावित समाधान जोड़ूंगा।

मुझे पता चला कि डिफ़ॉल्ट बूटस्ट्रैप "चेतावनी" रंग योजना टोस्टर संदेशों के लिए थोड़ा हल्का था। मैंने एक कस्टम कम फ़ाइल का उपयोग किया और निम्नलिखित को अंधेरा करने के लिए किया।

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

Answer 3

उन्हें बूटस्ट्रैप 3.2.0 के रूप में ही बनाने के लिए, मैं चयनित जवाब का एक संयोजन का इस्तेमाल किया है - हालांकि alert-erroralert-danger होना चाहिए - और यह सार है, जो FontAwesome प्रतीक

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

के साथ माउस को बदल देता है उन्हें देखने के लिए बिल्कुल वैसा ही मैं भी

• को टोस्ट की पारदर्शिता सेट बूटस्ट्रैप

सीएसएस मिलान करने के लिए शीर्षक और संदेश रंग बदल कर

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