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

问题描述

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

下面是我在代码中所做的

my.html

<input type="text" id="inputTopic" name="topic" class="form-control mb-2 mr-sm-2" placeholder="感兴趣的主题"需要自动对焦/><button type="button" id="btnFetch" class="btn btn-primary mb-2">提交</button></表单>

my.js

$(document).ready(function() {$("#btnFetch").click(function() {//通过 AJAX 加载数据fetch_data($("#inputTopic").val());//禁用按钮$(this).prop("disabled", true);//给按钮添加微调器$(this).html(`<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>加载中...`);});});

除了引导程序文档中所示的微调器没有出现之外，这有效.按钮文本按预期更改为 Loading....想知道我没有对按钮内的微调器做正确的事情.

此处为代码笔

解决方案

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

$(document).ready(function() {$("#btnFetch").click(function() {//禁用按钮$(this).prop("disabled", true);//给按钮添加微调器$(this).html(`<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>正在加载...`);});});

<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="感兴趣的主题"需要自动对焦/><button type="button" id="btnFetch" class="btn btn-primary mb-2">提交</button></表单>

<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>

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...`
      );
    });
});

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

解决方案

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屋！