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>

 

2. 解釋一下手冊給的案例：data-dismiss="alert"實現父元素關閉；
3. .fade .show 實現了關閉后的淡出效果；
4. .alert-dismissible 從調試器可以看到是 padding-right:4rem;
5. 也就是說，真正實現關閉效果的只有 data-dismiss="alert"；
6. 直接使用腳本的方式也可以關閉：

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

 

PS：組件會提供一些更加深入的腳本使用方法，包括各種方法和事件。這些內容
常用度有些較低（較高的會說），但難度驟然升高導致學員理解力卡住。所以，這部分
內容有選擇性的講解