把bootstrap 原生 Toast 功能和原生 Alert 結合

把吐司和alert摻在一起做撒尿牛丸。版本需求：bootstrap v5.2以上

官方文件：Bootstrap / Components / Toasts
v5.2 將許多component的背景色、字色、邊框顏色改由 css variables 指定，而非實際色彩值。因此以下範例，以v5.2為主。

方法一

不寫css，純用 bootstrap class 拼湊 Custom Toast ：

注意：bootstrap 的負值 margine 預設為關閉，需設定開啟：$enable-negative-margins:true;


<div class="toast border-0 align-items-center" id="alertToast" role="alert" aria-live="assertive" aria-atomic="true" > <div class="alert alert-success toast-body mb-0 d-flex" role="alert"> <div class=""> success樣式 <a class="alert-link ms-1" href="#">連結</a>！ </div> <button class="btn-close ml-auto me-n2" type="button" data-bs-dismiss="toast" aria-label="Close" ></button> </div> </div>

Code Pen Demo：因展示樣式之故，在.toast 上加了.d-block。正式啟用功能時，需將.d-block移除

方法二

需寫CSS，將 bootstrap alert CSS變數與 bootstrap toast CSS變數對接：

1. scss 部份：需在 bootstrap / variable.scss 後引用此段SCSS。
2. html 部份：以官網提供的兩個layout範例作為示範。

SCSS：

.alert2toast{
  $properties:(bg, color, border-color);
  @each $property in $properties{
    #{-- + $variable-prefix + toast - $property}:var(-- + $variable-prefix + alert - $property);
  }
  #{-- + $variable-prefix + toast-header-bg}:rgba(0,0,0, 0.05);
}

或將SCSS直接寫成css也可以：

.alert2toast{ --bs-toast-bg:var(--bs-alert-bg); --bs-toast-color:var(--bs-alert-color); --bs-toast-border-color:var(--bs-alert-border-color); --bs-toast-header-bg:rgba(0,0,0, 0.05); }

範例一：官網示範的 Basic 樣式

<div class="toast align-items-center alert-primary alert2toast"
     id="primaryCustomVar"
     role="alert"
     aria-live="assertive"
     aria-atomic="true"
     >
  <div class="toast-body mb-0 d-flex" role="alert">
    <div class="">
    alert to toast{{des}}樣式<a class="alert-link ms-1" href="#">連結</a>！
    </div>
    <button class="btn-close ms-auto me-n1"
            type="button"
            data-bs-dismiss="toast"
            aria-label="Close"
            ></button>
  </div>
</div>

Code Pen Demo：因展示樣式之故，在.toast 上加了.d-block。正式啟用功能時，需將.d-block移除

範例二：官網示範的 Custom 樣式

<div class="toast align-items-center alert-primary alert2toast" id="primaryCustomVar" role="alert" aria-live="assertive" aria-atomic="true" > <div class="toast-body mb-0 d-flex" role="alert"> <div class=""> alert to toast{{des}}樣式<a class="alert-link ms-1" href="#">連結</a>！ </div> <button class="btn-close ms-auto me-n1" type="button" data-bs-dismiss="toast" aria-label="Close" ></button> </div> </div>

Code Pen Demo：因展示樣式之故，在.toast 上加了.d-block。正式啟用功能時，需將.d-block移除