基于Bootstrap3的纯CSS滑动开关按钮组件

TiTatoggle是一款基于Bootstrap3的纯CSS滑动开关按钮组件。该滑动按钮组件没有使用Javascript，它的HTML结构和原生的Bootstrap checkbox组件结构基本相同，使用起来非常方便。它还提供了多种主题样式：IOS样式和Material样式等。

安装

可以通过Bower来安装该滑动按钮组件。

$ bower install titatoggle                
              

使用方法

使用该Bootstrap3滑动开关按钮组件除了引入Bootstrap相关文件之外，只需要引入titatoggle-dist.css文件即可。

<link href="css/titatoggle-dist.css" rel="stylesheet">                
              

HTML结构

该滑动开关组件的HTML结构和原生Bootstrap checkbox组件结构基本相同。

原生Bootstrap checkbox组件结构如下：

<div class="checkbox">
  <label>
    <input type="checkbox">default Bootstrap 3
  </label>
</div>                
              

Ti-Ta-Toggle的HTML结构只需要在原生HTML结构上添加.checkbox-slider--TYPE class，以及在<input>后面添加一个<span>元素即可。

<div class="checkbox checkbox-slider--default">
  <label>
    <input type="checkbox"><span>TiTaToggle</span>
  </label>
</div>                
              

应用举例

默认的滑动按钮样式：

带文本的滑动按钮样式：

iOS样式的滑动按钮：

Material样式的滑动按钮：

更详细的示例是使用方法请参考Demo。

浏览器兼容

• Internet Explorer 9
• FireFox
• Safari
• Chrome
• Safari Ios
• Stock Android browser 4.2
• Chrome Android