要为Bootstrap spinner添加交互功能,您可以使用JavaScript和jQuery
- 首先,确保已在项目中包含了Bootstrap和jQuery库。在HTML文件的
部分添加以下代码:
- 在HTML文件中添加一个简单的spinner:
Loading...
- 现在,我们将使用jQuery为spinner添加交互功能。在
标签中添加以下代码:
$(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。