如何为Bootstrap spinner添加交互功能

要为Bootstrap spinner添加交互功能，您可以使用JavaScript和jQuery

1. 首先，确保已在项目中包含了Bootstrap和jQuery库。在HTML文件的< 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>
    

1. 在HTML文件中添加一个简单的spinner：

<
    div class="text-center">
    
  <
    div class="spinner-border" role="status">
    
    <
    span class="visually-hidden">
    Loading...<
    /span>
    
  <
    /div>
    
<
    /div>
    

1. 现在，我们将使用jQuery为spinner添加交互功能。在< 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。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！