ブートストラップトグルはまだ私は私のページに次のように追加している私は<a href="http://www.bootstraptoggle.com/" rel="nofollow noreferrer">http://www.bootstraptoggle.com/</a></p> <p>を使用してトグルスイッチを実装しようとしていますチェックボックス

Question

として表示：

<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>