我有可能制作一個撥動開關按鈕,但我不知道該怎么做。這是我嘗試做的代碼,希望有人可以幫助我:
<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>
像這樣切換開關:

uj5u.com熱心網友回復:
假設您將使用 jquery (bootstrap),Ypu 可以進一步設定您認為合適的樣式
(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/[email protected]/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>
uj5u.com熱心網友回復:
Bootstrap 5 使用data-bs-toggle而不是data-toggle
轉載請註明出處,本文鏈接:https://www.uj5u.com/net/445618.html
上一篇:如何將popper.js添加到帶有Bootstrap5專案的Laravel8?
下一篇:如何在引導程式5中創建備用塊
