如何使用Bootstrap Toggle插件创建切换按钮?

时间:2016-03-31 17:35:06

标签: javascript jquery html css twitter-bootstrap

我有以下代码来创建切换按钮

<input type="checkbox" checked data-toggle="toggle">

我使用http://www.bootstraptoggle.com/#usage

中的这些库
<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>

但它只是显示为一个简单的复选框。我怎么让它看起来很花哨?

这是我到目前为止所获得的链接 - http://jsbin.com/bocawucili/edit?html,output

1 个答案:

答案 0 :(得分:0)

它归结为你的标签的ORDER,jQuery总是需要在任何需要它之前。

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
   <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <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>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>