Bootstrap4切换开关按钮显示为复选框

问题描述

我要制作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">

如何解决此问题？

解决方法

bootstrap4-toggle需要jQuery。添加一个jQuery CDN以及参考链接。例如，在您的head标签内添加以下CDN。

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