Bootstrap Toggle 仍显示为复选框

Question

我正在尝试使用http://www.bootstraptoggle.com/ 实现拨动开关

我已将以下内容添加到我的页面中：

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

并简单地使用以下方法实现切换开关：

<input id="toggle-demo" type="checkbox" checked data-toggle="toggle">

<script type="text/javascript">
$(function() {
    $('#toggle-demo').bootstrapToggle()
})
</script>

另外，这是我的捆绑配置：

public class BundleConfig
{
    // For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.validate*"));

        // Use the development version of Modernizr to develop with and learn from. Then, when you're
        // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
        bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                    "~/Scripts/modernizr-*"));

        bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                  "~/Scripts/bootstrap.js",
                  "~/Scripts/respond.js"));

        bundles.Add(new StyleBundle("~/Content/css").Include(
                  "~/Content/bootstrap.css",
                  "~/Content/site.css"));
    }
}

但是，它仍然显示为复选框而不是切换开关，有什么想法吗？谢谢:)

Answer 1

当您可以使用少量代码构建自己的插件时，为什么还要选择插件？

#foo:checked::before,
input[type="checkbox"] {
    position:absolute;
    clip: rect(0,0,0,0);
    clip: rect(0 0 0 0);
}

input[type="checkbox"] + label {
    margin-left: 100px; line-height: 30px; height: 27px; cursor: pointer;
    -webkit-transition: background-position 0.3s ease-in-out;
    -moz-transition: background-position 0.3s ease-in-out;
}

#foo:checked,
input[type="checkbox"] + label::before {
    content: ""; width: 94px; height: 27px;
    background: url(http://dl.dropbox.com/u/391082/sprite2.png) -56px 0;
    position: absolute;
    border-radius: 4px;
    -webkit-transition: background-position 0.3s ease-in-out;
    -moz-transition: background-position 0.3s ease-in-out;
}

input[type="checkbox"]:checked + label::before {
    background-position: -3px 0;
}

input[type="checkbox"] + label:hover::before {
    background-position: -50px 0;
    border-right: solid 1px rgba(0,0,0,.3);
    width: 93px;
}

input[type="checkbox"]:checked + label:hover::before {
    background-position: -9px 0;
    border-left: solid 1px rgba(0,0,0,.3);
    width: 93px;
}

<input id=test type=checkbox value=test checked>
<label for=test>Label</label>