14. BootStrap * 元件 - 資訊提示框

提示框可以使用 .alert 類, 後面加上 .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light 或 .alert-dark 類來實作:

使用.alert設定警告框基礎樣式，并使用.alert-*設定警告框顔色;

<!-- 使用.alert設定警告框基礎樣式，并使用.alert-*設定警告框顔色; -->
<div class="alert w-25 alert-success">年年花相似，歲歲人不同。</div>
<div class="alert w-25 alert-primary">年年花相似，歲歲人不同。</div>
<div class="alert w-25 alert-secondary">年年花相似，歲歲人不同。</div>
<div class="alert w-25 alert-danger">年年花相似，歲歲人不同。</div>
<div class="alert w-25 alert-warning">年年花相似，歲歲人不同。</div>
<div class="alert w-25 alert-info">年年花相似，歲歲人不同。</div>
<div class="alert w-25 alert-light">年年花相似，歲歲人不同。</div>
<div class="alert w-25 alert-dark">年年花相似，歲歲人不同。</div>      

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

<!-- 在使用了警告框的元素内部設定超連結.alert-link,會搭配相應的顔色; -->
<div class="alert w-25 alert-success text-center">年年花相似，歲歲人不同。 <br>
    <a href="https://www.baidu.com/">一個人最大的挑戰，是如何去克服自己的缺點。 </a>
</div>

<div class="alert w-25 alert-success text-center">年年花相似，歲歲人不同。 <br>
    <a href="https://www.baidu.com/">不要問，不要等，不要猶豫，不要回頭。</a>
</div>      

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

<!-- 使用.alert-heading 可以設定繼承顔色,alert本身也可以設定水準線段落等; -->
<div class="alert w-25 alert-success text-center ">年年花相似，歲歲人不同。 <br>
    <hr>
    <a class="alert-heading" href="https://www.baidu.com/">一個人最大的挑戰，是如何去克服自己的缺點。 </a>
</div>      

警告框元件在元件一欄，可以和浏覽器互動功能，警告框的關閉效果，通過data-dismiss=" alert”實作父元素關閉;      

.fade和.show實作了關閉後的淡出效果; 【很難看得出 太快了】

【步驟：我們可以在提示框中的 div 中添加 .alert-dismissible 類，然後在關閉按鈕的連結上添加 class="close" 和 data-dismiss="alert" 類來設定提示框的關閉操作。】

<!-- 警告框元件在元件一欄，可以和浏覽器互動功能，警告框的關閉效果，通過data-dismiss=" alert”實作父元素關閉;
.fade和.show實作了關閉後的淡出效果; 【一點點 太快了】 -->
<div class="alert alert-success text-center fade show "  style="width: 200px">
    登入成功！
    <button class="close" data-dismiss = "alert">&times;</button>
</div>      

.alert-dismissible從調試器可以看到是padding-right:4rem;

<無>

真正實作關閉效果的隻有data-dismiss=" alert” ;

直接使用腳本的方式也可以關閉;

<!-- 直接使用腳本的方式也可以關閉;【Jq已經寫好了 方法是： alert() 參數是 "close" 即可！ 】-->
<div class="alert alert-success text-center fade show parent"  style="width: 200px">
    登入成功！
    <button class="close child" >&times;</button>
</div>
<!--!! 注意架構要提前導入！不然沒效果 !!-->
<script>
    $(".parent").click(function(){
        $('.child').alert('close');
    });
</script>      

完.