Question

我试图根据http://www.bootstraptoggle.com/使用bootstrap-toggle创建切换按钮。

我具有以下css和js导入。

所有CSS和JS文件都是今天从网络上提取的最新版本。

  <!-- Bootstrap Core CSS -->
    <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', filename='css/bootstrap-toggle.min.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', filename='css/agency.min.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', filename='css/google_font.min.css') }}" rel="stylesheet">

    <script src="{{ url_for('static', filename='js/jquery.min.js')}}"></script>
    <script src="{{ url_for('static', filename='js/jquery.easing.min.js')}}"></script>
    <script src="{{ url_for('static', filename='js/jqBootstrapValidation.js')}}"></script>
    <script src="{{ url_for('static', filename='js/respond.min.js')}}"></script>
    <script src="{{ url_for('static', filename='js/html5shiv.min.js')}}"></script>
    <script src="{{ url_for('static', filename='js/contact_me.js')}}"></script>
    <script src="{{ url_for('static', filename='js/classie.min.js')}}"></script>
    <script src="{{ url_for('static', filename='js/cbpAnimatedHeader.min.js')}}"></script>
    <script src="{{ url_for('static', filename='js/bootstrap-toggle.min.js')}}"></script>
    <script src="{{ url_for('static', filename='js/agency.min.js')}}"></script>
    <script src="{{ url_for('static', filename='js/bootstrap.min.js')}}"></script>

我的html代码如下

<div class="col-md-6">
    <div class="pull-left">
        <input type="checkbox" name="accounts" id="accounts" data-toggle="toggle">
        <button class="btn btn-sm btn-default dropdown-toggle" type="button" data-toggle="dropdown"><span class="caret"></span></button>
        <ul class="dropdown-menu">
            <li><input data-toggle="toggle" type="checkbox" name="accounts" id="accounts"></li>
            <li>test2</li>
            <li>test3</li>
            <li>test4</li>
        </ul>
    </div>
</div>

此代码显示为一个简单的复选框。我更喜欢使用模块而不是编写自己的代码，因为我对css和js非常陌生。知道为什么它不能正确显示吗？

bootstrap-toggle仅显示为复选框

0 个答案: