如何在Bootstrap中创建切换按钮?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (132)

我最初用HTML、CSS和JavaScript创建了一个Web应用程序,然后被要求在Bootstrap中再次创建它。我做得很好,但我不得不在网页应用程序中切换按钮,这些按钮已经更改为单选按钮(最初的复选框),而不是原来的按钮。

按钮的代码是:

<label>
  Notifications
  <span class='toggle'>
    <input type='radio'
      class='notifications'
      name='notifications'
      id='notifications' />
  </span>
</li>
<label>
  Preview
  <span class='toggle'>
    <input type='radio'
      class='preview'
      name='preview'
      id='preview' />
  </span>
</li>

HTML页面链接到的JavaScript和CSS文件是:

<script src = 'jqtouch.js'></script>
<script src="jquery.js"></script>
<script src="js/bootstrap.js"></script>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">

有没有办法改变代码,这样我就可以拿回切换按钮了?

提问于
用户回答回答于

不确定它是否有帮助,但它是一个极好的(非官方的)引导开关可用。不过,它使用的是无线电类型。

现在也可以使用单选按钮。复选框作为开关。阿type属性已从1.8版本添加。

源代码是可在Gizub上查阅。

用户回答回答于

如果不介意更改HTML,则可以使用data-toggle属性上的属性<button>s.

<button type="button" class="btn btn-primary" data-toggle="button">
    Single toggle
</button>

扫码关注云+社区

领取腾讯云代金券