Bootstrap4-切换开关按钮，显示方式类似复选框

Question

我想制作switch button，但它的显示方式像checkbox。跟随this article bootstrap4-toggle 。

我的按钮应该是这样的

​

​

但看起来像这样

​

​

我已经添加了参考链接

<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/css/bootstrap4-toggle.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/js/bootstrap4-toggle.min.js"></script>

我也有安装库

npm install bootstrap4-toggle

这是我的代码

<input type="checkbox" checked data-toggle="toggle" data-size="lg">
<input type="checkbox" checked data-toggle="toggle">
<input type="checkbox" checked data-toggle="toggle" data-size="sm">
<input type="checkbox" checked data-toggle="toggle" data-size="xs">

如何解决此问题？

Answer 1

Bootstrap4-切换需要jQuery。添加jQuery CDN和参考链接。例如，在您的head标签中添加以下CDN。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>