您好,欢迎访问一九零五行业门户网

TiTatoggle 一个基于Bootstrap3的纯CSS滑动开关按钮组件_html/css_WEB-ITnose

titatoggle是个什么鬼?
titatoggle其实是一款基于bootstrap3的纯css滑动开关按钮组件。
不同于其他按钮组件,titatoggle滑动按钮组件没有使用javascript,在这个组件中,它的html结构和原生的bootstrap checkbox组件结构基本相同,方便易用,且提供了多种主题样式:ios样式和material样式等。下面我们就来看看titatoggle的安装和使用方法。
1、安装
titatoggle这么方便易用,那怎么安装呢?其实它可以通过bower来安装:
$ bower install titatoggle
2、使用方法
       titatoggle具体怎么使用呢?由于其是基于bootstrap3的滑动开关组件,所以在使用中,除了引入bootstrap相关文件之外,还需要引入titatoggle-dist.css文件。
3、titatoggle的html结构
由于titatoggl滑动开关组件的html结构和原生bootstrap checkbox组件结构基本相同,所以titatoggle的html结构只需在原生html结构上添加.checkbox-slider--type class,以及在后面添加一个元素即可。具体如下:
原生bootstrap checkbox组件结构:
default bootstrap 3
titatoggle的html结构:
titatoggle
4、titatoggle具体应用
      titatoggle 组件的具体应用,我们可以通过下面这张图片得知:
5、浏览器兼容
以下浏览器都兼容titatoggle 组件,大家在使用这个组件时候可以通过下面这几个流量器打开:
internet explorer 9
firefox
safari
chrome
safari ios
stock android browser 4.2
chrome android
以上就是基于bootstrap3的css滑动开关按钮组件titatoggle的具体安装方法和使用方法,如果你喜欢的话,就赶紧安装使用吧。
其它类似信息

推荐信息