終於還是來到這一天，各位好嗎?今天是鐵人賽的倒數第二天唷!各位過得好嗎?
希望各位平安的度過這29來的鐵人賽，能順順利利的完成它。
那就進入今天的主題modal吧!

modal的彈出提示框

彈出提示框

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
    互動視窗
</button>
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel">title</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <button href="#" class="tooltip-test btn-info" title="按鍵彈出提示框">按鍵彈出提示框</button>
                <hr>
                <p><a href="#" class="tooltip-test" title="連結彈出提示框">連結彈出提示框</a></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">關閉</button>
                <button type="button" class="btn btn-primary">確定</button>
            </div>
        </div>
    </div>
</div>

在modal內使用網格

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
            互動視窗
</button>
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel">title</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-4">col-md-4</div>
                        <div class="col-md-4 ms-auto">col-md-4 ms-auto</div>
                    </div>
                    <div class="row">
                        <div class="col-md-3 ms-auto">col-md-3 ms-auto</div>
                        <div class="col-md-2 ms-auto">col-md-2 ms-auto</div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 ms-auto">col-md-6 ms-auto</div>
                    </div>
                    <div class="row">
                        <div class="col-sm-9">
                            col-sm-9
                            <div class="row">
                                <div class="col-8 col-sm-6">col-8 col-sm-6</div>
                                <div class="col-4 col-sm-6">col-4 col-sm-6</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">關閉</button>
                <button type="button" class="btn btn-primary">確定</button>
            </div>
        </div>
    </div>
</div>

以上是今天的內容，我們明天鐵人賽見囉!byebye~