要為Bootstrap spinner添加交互功能，您可以使用JavaScript和jQuery
<head>部分添加以下代碼：<!-- 引入Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 引入jQuery和Bootstrap JS --><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
<div class="text-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<script>標簽中添加以下代碼：$(document).ready(function () {
// 獲取spinner元素
var $spinner = $('.spinner-border');
// 為spinner添加點擊事件
$spinner.click(function () {
// 切換spinner的顯示和隱藏狀態
if ($spinner.hasClass('d-none')) {
$spinner.removeClass('d-none');
} else {
$spinner.addClass('d-none');
}
});
});
這段代碼會在頁面加載完成后，為spinner添加一個點擊事件。當用戶點擊spinner時，它會切換spinner的顯示和隱藏狀態。
您可以根據需要修改這個示例，實現更多的交互功能。例如，您可以在點擊按鈕時顯示spinner，并在AJAX請求完成后隱藏spinner。
