Twitter BootStrap复选框无法正常工作

时间:2014-12-25 05:44:07

标签: html css twitter-bootstrap

目前我下载了一些CSS / JS文件以使我的复选框非常漂亮(链接在末尾找到)并将它们包含在我的项目中。我正在查看他的示例代码,用于创建一个复选框按钮,可以在他的示例标题“按钮样式”下找到。颜色似乎很好,但只有一半的复选框存在(上半部分)。我似乎无法弄清楚为什么整个复选框没有显示,但他的例子工作正常。

有人可以帮我弄清楚如何让他的例子正常工作,这样我就可以获得一个从红色切换到绿色的复选框吗?全新的bootstrap和帮助将不胜感激!

链接:http://montrezorro.github.io/bootstrap-checkbox/

        <!DOCTYPE html>
        <html lang="en">
        <head>
        <meta charset="UTF-8">
        <title>Example of Twitter Bootstrap</title>
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href="css/bootstrap-checkbox.css" rel="stylesheet">
        <style type="text/css">
            .bs-example{
                margin: 20px;
            }
        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/bootstrap-checkbox.js"></script>
        </head>
        <body>
        <div class="bs-example">
            <form class="form-horizontal">
                <div class="form-group">
                    <div class="col-xs-offset-2 col-xs-10">
                        <div class="checkbox">
                            <label><input type="checkbox" class = "style3"> Remember me</label>
                        </div>
                    </div>
                </div>
                <script>        
                    $('input[type="checkbox"].style3').checkbox({
                        buttonStyle: 'btn-danger',
                        buttonStyleChecked: 'btn-success',
                        checkedClass: 'icon-check',
                        uncheckedClass: 'icon-check-empty'
                    });

                </script>
            </form>
        </div>
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

            <!-- Include all compiled plugins (below), or include individual files as needed -->
            <script src="js/bootstrap.min.js"></script>
        </body>
        </html>          

编辑:对不起,我不知道如何从我在Jsfiddle上面发布的网站上下载的文件。我正在把代码拼凑在一起。显然,自从我导入此代码后,您需要从网站上下载代码。如果有人可以告诉我如何在集成新文件时使用jsfiddle,那就太棒了。

0 个答案:

没有答案
相关问题