bootstrap-开关未加载
bootstrap-switch is not loading
我已经包括了所有的依赖项,但我仍然不明白为什么它没有给我我想要的开关。我错过了什么吗?此外,当我单击“保存更改”按钮时,我无法获取 post 数据。
<link href="bootstrap-3.3.5-dist/css/bootstrap.css" rel="stylesheet">
<link href="bootstrap-switch/css/bootstrap3/bootstrap-switch.css" rel="stylesheet">
<script> src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.js"></script>
<script src="bootstrap-switch/js/bootstrap-switch.js"></script>
<h2 class="h4">State</h2>
<div class="bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-id-switch-modal bootstrap-switch-animate bootstrap-switch-on" style="width: 102px;">
<div class="bootstrap-switch-container" style="width: 150px; margin-left: 0px;">
<span class="bootstrap-switch-handle-on bootstrap-switch-primary" style="width: 50px;">ON</span>
<span class="bootstrap-switch-label" style="width: 50px;"> </span>
<span class="bootstrap-switch-handle-off bootstrap-switch-default" style="width: 50px;">OFF</span>
<input id="switch-modal" type="checkbox" checked="">
</div>
</div>
<button type="button" class="btn btn-primary" data-switch-get="state" data-dismiss="modal">Save changes</button>
首先从以下位置更正您的 jQuery 脚本:
<script> src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
收件人:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
根据 Bootstrap Switch 文档:
您只需要输入:
<input id="switch-modal" type="checkbox" checked>
并像这样在 JavaScript 中初始化它:
$('#switch-modal').bootstrapSwitch();
CODEPEN EXAMPLE
我已经包括了所有的依赖项,但我仍然不明白为什么它没有给我我想要的开关。我错过了什么吗?此外,当我单击“保存更改”按钮时,我无法获取 post 数据。
<link href="bootstrap-3.3.5-dist/css/bootstrap.css" rel="stylesheet">
<link href="bootstrap-switch/css/bootstrap3/bootstrap-switch.css" rel="stylesheet">
<script> src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.js"></script>
<script src="bootstrap-switch/js/bootstrap-switch.js"></script>
<h2 class="h4">State</h2>
<div class="bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-id-switch-modal bootstrap-switch-animate bootstrap-switch-on" style="width: 102px;">
<div class="bootstrap-switch-container" style="width: 150px; margin-left: 0px;">
<span class="bootstrap-switch-handle-on bootstrap-switch-primary" style="width: 50px;">ON</span>
<span class="bootstrap-switch-label" style="width: 50px;"> </span>
<span class="bootstrap-switch-handle-off bootstrap-switch-default" style="width: 50px;">OFF</span>
<input id="switch-modal" type="checkbox" checked="">
</div>
</div>
<button type="button" class="btn btn-primary" data-switch-get="state" data-dismiss="modal">Save changes</button>
首先从以下位置更正您的 jQuery 脚本:
<script> src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
收件人:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
根据 Bootstrap Switch 文档:
您只需要输入:
<input id="switch-modal" type="checkbox" checked>
并像这样在 JavaScript 中初始化它:
$('#switch-modal').bootstrapSwitch();