如何使拨动按钮开关使用 bootstrap 5？

Question

我做一个拨动开关按钮有问题，我不知道怎么做。这是我尝试做的代码，希望有人能帮助我：

<div class="btn-group" checked data-toggle="toggle" role="group" aria-label="Basic mixed styles example">
            <button type="button" class="btn btn-danger">Month</button>
            <button type="button" class="btn btn-danger">Year</button>
</div>

像这样切换开关：

Answer 1

Bootstrap 5 使用 data-bs-toggle 而不是 data-toggle

Answer 2

假设您将使用 jquery (bootstrap)，您可以根据需要进一步设置样式

(function($) {
  'use strict';

  $(document).ready(() => {

    $("input[type='button']").click((event) => {
      $("input[type='button']").toggleClass("btn-toggle");
    });

  });

})(jQuery);

input[type='button'].btn-toggle {
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="m-5" role="group" aria-label="Basic mixed styles example">
  <input type="button" class="btn btn-toggle" value="Month">
  <input type="button" class="btn" value="Year">
</div>

如何使拨动按钮开关使用 bootstrap 5？

How to make toggle button switch use boostrap 5?

html

css

twitter-bootstrap

laravel