ㄧ.alert可關閉的提示

<div class="component demo">
  <div class="alert alert-primary alert-dismissible fade show" role="alert">
   <h4>Alert</h4>
   hello~ <a href="#" class="alert-link">see more.</a>
   <button class="close" data-dismiss="alert">×</button>
 </div>
</div>

.component.demo{
 padding: 50px;
}

重點：
1.在alert加一個關閉的按鈕也就是button，close為定義關閉按鈕。×為x的字碼
2.在alert定義的這一層在定義一個將關閉按鈕位置固定，也就是alert-dismissible
3.如果要讓關閉按鈕有功能將alert關掉的話，要在button的屬性加入data-dismiss="alert"
4.fade show為隱藏跟顯示的效果
5.記得要有關閉alert的功能一定要有bootstrap.js

二.alert外面層的按鈕關閉

<div class="component demo">
  ......
   <button class="btn btn-danger close-alert">Close</button>
</div>


$(document).ready(()=>{
 $('.close-alert').click(()=>{
  $('.alert').alert('close');
 });
});

重點：
1.在外層添加button，button加入bootstrap的btn與樣式btn-danger
2.close-alert為自定義，這個自定義是要讓自己在js寫的事件觸發的
3.close-alert點擊事件，點擊讓alert關掉

4.下面為重點為官網alert事件的資料(5.6.7.)
5.$().alert():發出警報，偵聽具有 data-dismiss="alert" 屬性的後代元素上的點擊事件。 （使用 data-api 的自動初始化時不需要）
6.$().alert('close'):從 DOM 中刪除來關閉警報。如果元素上出現 .fade 和 .show，則在刪除之前該警報將淡出。
7.$().alert('dispose'):銷毀一個元素的警報

二.監聽alert

$(document).ready(()=>{
 ......
 
 $('.alert').on('close.bs.alert',()=>{
  console.log('close alert');
 });
 
 
 $('.alert').on('closed.bs.alert',()=>{
  console.log('closed alert');
 });
});

重點：
1.close.bs.alert:當調用 close 實例方法時，此事件會立即觸發
2.closed.bs.alert:警報關閉時，會觸發此事件（等待CSS轉換完成）。

codepen
參考：bootstrap4