BootStrap 警告提示框

内容選自李炎恢的Bootstrap v4.x教程筆記

一．警告框樣式

1. 使用.alert 設定警告框基礎樣式，并使用.alert-success 設定警告框顔色；

<div class="alert alert-success">Bootstrap4.x</div>
<div class="alert alert-primary">Bootstrap4.x</div>
<div class="alert alert-secondary">Bootstrap4.x</div>
<div class="alert alert-danger">Bootstrap4.x</div>
<div class="alert alert-warning">Bootstrap4.x</div>
<div class="alert alert-info">Bootstrap4.x</div>
<div class="alert alert-light">Bootstrap4.x</div>
<div class="alert alert-dark">Bootstrap4.x</div>      

2. 在使用了警告框的元素内部設定超連結.alert-link，會搭配相應的顔色；

<div class="alert alert-success">
　　Bootstrap4.x <a href="#" class="alert-link">V4.3</a>
</div>      

3. 使用.alert-heading 可以設定繼承顔色，alert 本身也可以設定水準線段落等；

<div class="alert alert-success">
　　<h4 class="alert-heading">Bootstrap4.x</h4>
　　<hr>
　　<p>這是一個前端工具：Bootstrap4.x</p>
</div>      

二．警告框元件

1. 在元件一欄，可以和浏覽器實作互動功能，比如警告框的關閉效果；

<div class="alert alert-warning alert-dismissible fade show">
　　警告：請了解更新你的系統~
　　<button class="close" data-dismiss="alert">&times;</button>
</div>      

<div class="alert alert-warning alert-dismissible fade show updatesystem">
　　警告：請了解更新你的系統~
　　<button class="close updateclose">&times;</button>
</div>

<script>
　　$('.updateclose').click(function () {
　　　　$('.updatesystem').alert('close');
　　});
</script>