blocks|key|213609|text|我一直在尝试用javascript手动激活'active‘类。它不像一个完整的库那样可用，但对于简单的情况来说似乎足够了：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|213610|var+button+=+$('#myToggleButton');
button.on('click',+function+()+{
++$(this).toggleClass('active');
});|code-block|syntax|javascript|213611|如果你仔细想想，“active”类是在按钮被按下时由bootstrap使用的，而不是在按钮被按下之前或之后(我们的例子)，所以重用相同的类不会有冲突。|213612|试试这个例子，如果失败了就告诉我：http://jsbin.com/oYoSALI/1/edit?html,js,output|offset|length|213613|entityMap|0|LINK|mutability|MUTABLE|url|http://jsbin.com/oYoSALI/1/edit?html,js,output^0|0|0|0|H|1A|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|X|8|@]|9|@$K|Y|L|Z|1|10]]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

<p>I've been trying to activate 'active' class manually with javascript. It's not as usable as a complete library, but for easy cases seems to be enough:</p>

<pre><code>var button = $('#myToggleButton');
button.on('click', function () {
  $(this).toggleClass('active');
});
</code></pre>

<p>If you think carefully, 'active' class is used by bootstrap when the button is being pressed, not before or after that (our case), so there's no conflict in reuse the same class.</p>

<p>Try this example and tell me if it fails: <a href="http://jsbin.com/oYoSALI/1/edit?html,js,output">http://jsbin.com/oYoSALI/1/edit?html,js,output</a></p>


blocks|key|213653|text|您可以使用CSS切换开关库。只需包含CSS并自己编写JS：http://ghinda.net/css-toggle-switch/bootstrap.html|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|213654|entityMap|0|LINK|mutability|MUTABLE|url|http://ghinda.net/css-toggle-switch/bootstrap.html^0|T|1E|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<p>You can use the CSS Toggle Switch library. Just include the CSS and program the JS yourself:
<a href="http://ghinda.net/css-toggle-switch/bootstrap.html" rel="nofollow">http://ghinda.net/css-toggle-switch/bootstrap.html</a></p>


blocks|key|431990|text|Bootstrap+3具有基于复选框或单选按钮创建切换按钮的选项：http://getbootstrap.com/javascript/#buttons|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|431991|复选框|431992|<div+class="btn-group"+data-toggle="buttons">
++<label+class="btn+btn-primary+active">
++++<input+type="checkbox"+checked>+Option+1+(pre-checked)
++</label>
++<label+class="btn+btn-primary">
++++<input+type="checkbox">+Option+2
++</label>
++<label+class="btn+btn-primary">
++++<input+type="checkbox">+Option+3
++</label>
</div>|code-block|syntax|javascript|431993|单选按钮|431994|<div+class="btn-group"+data-toggle="buttons">
++<label+class="btn+btn-primary+active">
++++<input+type="radio"+name="options"+id="option1"+checked>+Option+1+(preselected)
++</label>
++<label+class="btn+btn-primary">
++++<input+type="radio"+name="options"+id="option2">+Option+2
++</label>
++<label+class="btn+btn-primary">
++++<input+type="radio"+name="options"+id="option3">+Option+3
++</label>
</div>|431995|为了让它们正常工作，你必须用Bootstrap的Javascript来初始化.btn：|style|CODE|431996|$('.btn').button();|431997|entityMap|0|LINK|mutability|MUTABLE|url|http://getbootstrap.com/javascript/#buttons^0|X|17|0|0|0|0|0|0|12|4|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@$A|13|B|14|1|15]]|C|$]]|$1|D|3|E|5|6|7|16|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|17|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|18|8|@]|9|@]|C|$]]|$1|M|3|N|5|H|7|19|8|@]|9|@]|C|$I|J]]|$1|O|3|P|5|6|7|1A|8|@$A|1B|B|1C|Q|R]]|9|@]|C|$]]|$1|S|3|T|5|H|7|1D|8|@]|9|@]|C|$I|J]]|$1|U|3|-4|5|6|7|1E|8|@]|9|@]|C|$]]]|V|$W|$5|X|Y|Z|C|$10|11]]]]

<p>Bootstrap 3 has options to create toggle buttons based on checkboxes or radio buttons: <a href="http://getbootstrap.com/javascript/#buttons">http://getbootstrap.com/javascript/#buttons</a></p>

<p>Checkboxes</p>

<pre><code>&lt;div class="btn-group" data-toggle="buttons"&gt;
  &lt;label class="btn btn-primary active"&gt;
    &lt;input type="checkbox" checked&gt; Option 1 (pre-checked)
  &lt;/label&gt;
  &lt;label class="btn btn-primary"&gt;
    &lt;input type="checkbox"&gt; Option 2
  &lt;/label&gt;
  &lt;label class="btn btn-primary"&gt;
    &lt;input type="checkbox"&gt; Option 3
  &lt;/label&gt;
&lt;/div&gt;
</code></pre>

<p>Radio buttons</p>

<pre><code>&lt;div class="btn-group" data-toggle="buttons"&gt;
  &lt;label class="btn btn-primary active"&gt;
    &lt;input type="radio" name="options" id="option1" checked&gt; Option 1 (preselected)
  &lt;/label&gt;
  &lt;label class="btn btn-primary"&gt;
    &lt;input type="radio" name="options" id="option2"&gt; Option 2
  &lt;/label&gt;
  &lt;label class="btn btn-primary"&gt;
    &lt;input type="radio" name="options" id="option3"&gt; Option 3
  &lt;/label&gt;
&lt;/div&gt;
</code></pre>

<p>For these to work you must initialize <code>.btn</code>s with Bootstrap's Javascript:</p>

<pre><code>$('.btn').button();
</code></pre>


blocks|key|213728|text|如果你想保持一个很小的代码库，并且你只需要在应用程序的一小部分中使用切换按钮。我建议你自己编写javascript代码(angularjs，javascript，jquery)，只使用简单的CSS。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|213729|良好的切换按钮生成器：https://proto.io/freebies/onoff/|offset|length|213730|entityMap|0|LINK|mutability|MUTABLE|url|https://proto.io/freebies/onoff/^0|0|B|W|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

<p>If you want to keep a small code base, and you are only going to be needing the toggle button for a small part of the application. I would suggest instead maintain you're javascript code your self (angularjs, javascript, jquery) and just use plain CSS.</p>

<p>Good toggle button generator: <a href="https://proto.io/freebies/onoff/" rel="nofollow">https://proto.io/freebies/onoff/</a></p>


blocks|key|213811|text|如果有人还在寻找一个好的开关/切换按钮，我遵循了里克的建议，围绕它创建了一个简单的angular指令angular-switch。除了更喜欢Windows式的开关，与上面提到的角度引导开关和引导开关相比，总的下载量也要小得多(2kb+vs+23kb缩小的css%2Bjs)。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|213812|您可以按如下方式使用它。首先包含所需的js和css文件：|213813|<script+src="./bower_components/angular-switch/dist/switch.js"></script>
<link+rel="stylesheet"+href="./bower_components/angular-switch/dist/switch.css"></link>|code-block|syntax|javascript|213814|并在你的angular应用程序中启用它：|213815|angular.module('yourModule',+['csComp'
++++//+other+dependencies
]);|213816|现在，您可以按如下方式使用它：|213817|<switch+state="vm.isSelected"+
++++textlabel="Switch"+
++++changed="vm.changed()"
++++isdisabled="{{isDisabled}}">
</switch>|213818|​|213819|📷|atomic|213820|213821|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/erikvullings/angular-switch|1|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/381e50f7db352a3cc221601e6882e58f.png|imageAlt^0|1E|E|0|0|0|0|0|0|0|0|0|0|1|1|0|0^^$0|@$1|2|3|4|5|6|7|1C|8|@]|9|@$A|1D|B|1E|1|1F]]|C|$]]|$1|D|3|E|5|6|7|1G|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|1H|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|1I|8|@]|9|@]|C|$]]|$1|M|3|N|5|H|7|1J|8|@]|9|@]|C|$I|J]]|$1|O|3|P|5|6|7|1K|8|@]|9|@]|C|$]]|$1|Q|3|R|5|H|7|1L|8|@]|9|@]|C|$I|J]]|$1|S|3|T|5|6|7|1M|8|@]|9|@]|C|$]]|$1|U|3|V|5|W|7|1N|8|@]|9|@$A|1O|B|1P|1|1Q]]|C|$]]|$1|X|3|T|5|6|7|1R|8|@]|9|@]|C|$]]|$1|Y|3|-4|5|6|7|1S|8|@]|9|@]|C|$]]]|Z|$10|$5|11|12|13|C|$14|15]]|16|$5|17|12|18|C|$19|1A|1B|-4]]]]

<p>In case someone is still looking for a nice switch/toggle button, I followed Rick's suggestion and created a simple angular directive around it, <a href="https://github.com/erikvullings/angular-switch" rel="nofollow noreferrer" title="angular-switch">angular-switch</a>. Besides preferring a Windows styled switch, the total download is also much smaller (2kb vs 23kb minified css+js) compared to angular-bootstrap-switch and bootstrap-switch mentioned above together. </p>

<p>You would use it as follows. First include the required js and css file: </p>

<pre><code>&lt;script src="./bower_components/angular-switch/dist/switch.js"&gt;&lt;/script&gt;
&lt;link rel="stylesheet" href="./bower_components/angular-switch/dist/switch.css"&gt;&lt;/link&gt;
</code></pre>

<p>And enable it in your angular app:</p>

<pre><code>angular.module('yourModule', ['csComp'
    // other dependencies
]);
</code></pre>

<p>Now you are ready to use it as follows: </p>

<pre><code>&lt;switch state="vm.isSelected" 
    textlabel="Switch" 
    changed="vm.changed()"
    isdisabled="{{isDisabled}}"&gt;
&lt;/switch&gt;
</code></pre>

<p><a href="https://i.stack.imgur.com/ZHIFd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZHIFd.png" alt="enter image description here"></a></p>


blocks|key|213853|text|您可以在Bootstrap+3.3.0中使用Material+Design开关|type|unstyled|depth|inlineStyleRanges|entityRanges|data|213854|http://bootsnipp.com/snippets/featured/material-design-switch|offset|length|213855|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|1P|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@$D|O|E|P|1|Q]]|A|$]]|$1|F|3|-4|5|6|7|R|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|C]]]]

<p>You can use the Material Design Switch for Bootstrap 3.3.0 </p>

<p><a href="http://bootsnipp.com/snippets/featured/material-design-switch" rel="nofollow">http://bootsnipp.com/snippets/featured/material-design-switch</a></p>


<p>I originally created a web app in HTML, CSS and JavaScript, then was asked to create it again in Bootstrap too. I've done it all fine, but I had toggle buttons in the web app that have changed back to radio (originally checkbox) buttons instead of the toggle buttons I had originally.</p>

<p>The code for the buttons is:</p>

<pre><code>&lt;label&gt;
  Notifications
  &lt;span class='toggle'&gt;
    &lt;input type='radio'
      class='notifications'
      name='notifications'
      id='notifications' /&gt;
  &lt;/span&gt;
&lt;/li&gt;
&lt;label&gt;
  Preview
  &lt;span class='toggle'&gt;
    &lt;input type='radio'
      class='preview'
      name='preview'
      id='preview' /&gt;
  &lt;/span&gt;
&lt;/li&gt;
</code></pre>

<p>and the JavaScript and CSS files that the HTML page is linked to are:</p>

<pre><code>&lt;script src = 'jqtouch.js'&gt;&lt;/script&gt;
&lt;script src="jquery.js"&gt;&lt;/script&gt;
&lt;script src="js/bootstrap.js"&gt;&lt;/script&gt;
&lt;link href="css/bootstrap.css" rel="stylesheet"&gt;
&lt;link href="css/bootstrap-responsive.css" rel="stylesheet"&gt;
</code></pre>

<p>Is there a way to change the code so I can get the toggle button back?</p>


How to create a toggle button in Bootstrap

我最初用HTML、CSS和JavaScript创建了一个web应用，然后又被要求在Bootstrap中重新创建它。我已经做得很好了，但是我不得不在web应用程序中切换按钮，这些按钮已经变成了单选按钮(最初是复选框)，而不是我原来的切换按钮。按钮的代码为：<label>  Notifications  <span cla...

问如何在Bootstrap中创建切换按钮
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Bootstrap中创建切换按钮EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Bootstrap中创建切换按钮
EN