bootstrap-toggle 复选框未显示为切换答案

【问题标题】：bootstrap-toggle checkbox is not showing up as togglebootstrap-toggle 复选框未显示为切换
【发布时间】：2017-07-05 21:23:15
【问题描述】：

我正在使用 angular，并使用 bower 添加了 bootstrap-toggle。我还在 index.html 中包含了适当的 css 和 js 文件。在我的资源文件中，我需要创建一个切换开关。我包括以下行：

<div>
 <input type="checkbox" checked data-toggle="toggle">
</div>

我不想使用 javascript 添加这一行。它显示为复选框而不是切换。有什么我想念的吗？ css link snapshopt js links snapshot

【问题讨论】：

您使用的是什么版本的引导程序？如果您使用的是 Bootstrap v2.3.2，那么您应该使用 bootstrap2-toggle.min.js 和 bootstrap2-toggle.min.css。我刚刚在这里尝试过，它正在工作。 jsbin.com/kuqaparayi/edit?html,css,js,output
我使用的是 3.3.4。我也尝试过使用 bootstrap2-toggle.min.js 和 css。但这仍然行不通。
如果您正在使用它，那么只需使用正常的当前版本的引导切换。确保在 body 元素的底部加载脚本标签。
我正在这样做。我认为它无法正确找到 css 文件。我在 . 下的顶部添加了 css

标签： html angularjs twitter-bootstrap

【解决方案1】：

如果您使用的是 Bootstrap v2.3.2，那么您应该使用 bootstrap2-toggle.min.js 和 bootstrap2-toggle.min.css。

确保在主 bootstrap.css 文件之后加载 bootstrap-toggle.css。

另外，请确保在主 bootstrap.js 之后加载 bootstrap-toggle.js。在你关闭 body 标签之前。

不要忘记jquery，它需要放在两个js文件之前。

【讨论】：

截取页面语法并分享链接。
添加图片链接
尝试注释掉一些库，看看是否有冲突发生。

【解决方案2】：

为未来的读者。

我已通过在bootstrap toggle js 之前加载jquery 和bootstrap js 文件来解决此问题。

css 文件也是如此。首先是bootstrap css，然后是bootstrap toggle css。

【讨论】：

【解决方案3】：

最好包含.min.css 和.min.js，因为这些版本被缩小意味着删除所有空格以减小文件大小并提高速度。

首先包含jquery JS。

<script src='https://code.jquery.com/jquery-1.10.2.js'></script>

您需要在主 bootstrap.min.css 文件之后包含 bootstrap-toggle.min.css。

<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css'>

<link href='https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css' rel='stylesheet'>

然后还包括 bootstrap-toggle.min.js 后跟 bootstrap.min.js。

<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js'></script>

<script src='https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js'></script>

现在您的复选框将用作切换复选框。

【讨论】：