如何初始化bootstrapSwitch()？

Question

我遗漏了一些简单的东西，但找不到。在我的 asp.net MVC5 项目中，我想使用 bootstrap-switch。这就是我所做的：

BundleConfig.cs:添加bootstrap-switch.css和bootstrap.switch.js如下，

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

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

（并确保文件位于这些位置）。

然后，在视图中我尝试了以下三个复选框，

<input type="checkbox" class="switch" />
<input type="checkbox" class="switch" name="box" />
<input type="checkbox" 
    data-on-text="Option A"
    data-off-text="Option B"
    data-size="mini"
    name="box2" />

并在视图文件的底部添加，

<script>
    $("[name='box']").bootstrapSwitch();
    $("[name='box2']").bootstrapSwitch();
</script>

但是当我运行项目时，复选框看起来像标准复选框（没有CSS，或者已经添加了功能）。

我已经阅读了很多关于此的帖子（我的代码逐字遵循 http://www.bootstrap-switch.org/），但找不到我的错误。

Answer 1

问题是，如果您在捆绑包中包含 js 文件，它会最后呈现在页面上。因此，如果您在引用捆绑包中加载的 .js 库的视图上使用 javascipt，将它放在视图文件的末尾是行不通的，而是 呈现脚本部分 ,

@section scripts{
    <script>
        $(".indent-1").css("background", "green");
    </script>
}

这将在导入库后出现在 html 文件中。

Answer 2

迟到且显而易见，但也许对某些人有用。文档准备好后需要初始化复选框。

<script>
    $(document).ready(function() {
        $("[name='box']").bootstrapSwitch();
        $("[name='box2']").bootstrapSwitch();
    });
</script>

如何初始化bootstrapSwitch()？

How to initialize bootstrapSwitch()?

asp.net-mvc

twitter-bootstrap

bootstrap-switch