toastrアラートをブートストラップアラートのようにしてください

Question

私はtoastrのポップアップをブートストラップアラートと同じ、または非常に近いものにしたいと思っています。これどうやってするの？それはのように見える終わるよう#toast-container > divからドロップシャドウを削除し、toastrのCSSに続いて

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

：

Answer 1

は、あなたのtoastrオプションで、toastClassとiconClassesの値を変更し、ブートストラップ用CSSアラート含めます：

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

あなたは（ちょうどあなたが後でロードされていることを確認し、おそらく最高）の代わりに編集toastrさんのあなたが望んでいた場合はパディングを残すか、ご自分のCSSファイルにそれを追加することができます。

Answer 2

この投稿は少し古いですが、別の解決策を追加すると思いました。

トーストメッセージのデフォルトのブートストラップ「アラート」カラースキームが少し明るいことがわかりました。私はカスタム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; 
} 

Answer 3

ブートストラップ3.2.0、それらに同じにするために、私は、選択した回答の組み合わせを使用する - が、 alert-errorはalert-dangerする必要があります - とfontawesomeアイコン

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

にしてアイコンを置き換え、この要旨、私も

• 彼らはまったく同じに見えるように1
• に乾杯の不透明度を設定し、ブートストラップ

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