Bootstrap 4在按钮中加载微调器 [英] Bootstrap 4 Loading Spinner in button

问题描述

我正在尝试在按钮中实现bootstrap 4加载微调器，如 Bootstrap Spinners .

I'm trying to implement the bootstrap 4 loading spinner in button as in Bootstrap Spinners.

下面是我在代码中所做的

Below is what I'm doing in code

my.html

<form class="form-inline" id="topicForm" action="" method="POST">
  <input type="text" id="inputTopic" name="topic" class="form-control mb-2 mr-sm-2" placeholder="Topic of interest" required autofocus/>
  <button type="button" id="btnFetch" class="btn btn-primary mb-2">Submit</button>
</form>

my.js

$(document).ready(function() {
    $("#btnFetch").click(function() {
      // load data via AJAX
      fetch_data($("#inputTopic").val());
      // disable button
      $(this).prop("disabled", true);
      // add spinner to button
      $(this).html(
        `<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>Loading...`
      );
    });
});

除了没有显示bootstrap doc中显示的微调框之外，此方法有效.按钮文本将按预期更改为 Loading ... .想知道我对按钮内的微调器操作不正确.

This works except that the spinner as shown in bootstrap doc is not showing up. The button text is changing to Loading... as expected. Wanted to know what is that I'm not doing right to the spinner inside the button.

此处输入笔

Code Pen here

推荐答案

在使用4.0时，必须为此代码添加Bootstrap 4.2.1

You have to add Bootstrap 4.2.1 for this code while you are using 4.0

$(document).ready(function() {
    $("#btnFetch").click(function() {
      // disable button
      $(this).prop("disabled", true);
      // add spinner to button
      $(this).html(
        `<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Loading...`
      );
    });
});

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

<div style="margin:3em;">
  <form class="form-inline" id="topicForm" action="" method="POST">
    <input type="text" id="inputTopic" name="topic" class="form-control mb-2 mr-sm-2" placeholder="Topic of interest" required autofocus/>
    <button type="button" id="btnFetch" class="btn btn-primary mb-2">Submit</button>
  </form>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

这篇关于Bootstrap 4在按钮中加载微调器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！