bootstrap5 學習心得

toast 用法

html

====

<div class="toast-container position-fixed top-0 end-0 p-3">

<div id="toast1" class="toast hide text-white bg-success ">                

<div class="toast-body">

{{toast訊息}}

</div>

</div>

        <div id="toast2" class="toast hide text-white bg-danger " data-bs-autohide="false">

                <div class="toast-body">

                    {{toast訊息}}

                </div>

        </div>

</div>

javascript

====

this.toast訊息 = 訊息;

var toastEl = document.querySelector(`#toast1`);

(new bootstrap.Toast(toastEl)).show();    

radio & checkbox 美化

<div class="form-check"><label class="form-check-label"><input class="form-check-input" type="radio" value="1" />{{日期時間}}</label><label class="form-check-label"><input class="form-check-input" type="checkbox" style="margin-left:1em" />登記午餐</label></div>

<div class="form-check"><label class="form-check-label"><input class="form-check-input" type="radio" value="2" />下次再邀約</label></div>

<style>

.form-check-input {

margin-right: 0.5em;

}

</style>