18

toastr のポップアップを Bootstrap アラートと同じか、それに非常に近いものにしたいと考えています。これどうやってするの？

4

3 に答える 3

33

Bootstrap アラートの CSS を含め、toastr オプションで toastClass と iconClasses の値を変更します。

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

次に、toastr の CSS で、ドロップシャドウを削除して、次の#toast-container > divようにします。

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

必要に応じてパディングを残すか、toastr を編集する代わりに独自の CSS ファイルにパディングを追加することができます (おそらく最良の方法です。後で自分のパディングが読み込まれることを確認してください)。

于 2013-02-25T12:48:08.340 に答える
5

それらをbootstrap 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;
}
于 2014-11-11T20:55:24.807 に答える
2

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

デフォルトのブートストラップ「アラート」配色は、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);
   }
}

必要に応じて、メッセージ内のテキストの色を変更することもできます。

.toast-message {
   color: #000;
}
于 2014-11-06T18:53:29.767 に答える