转载

发表于 2015年08月17日
浏览 (1,472)
评论 (0)

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

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

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

查看演示下载插件

安装

可以通过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>

复制代码

应用举例

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

浏览器兼容

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

如果你喜欢这个插件，那么你可能也喜欢:

正文到此结束

所属分类：编程技术

本文标签： CSS Bootstrap src IDE dist UI 插件安装 Chrome Android ip HTML java 代码
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

热门推荐

openfire数据库安装指南

浏览(14,001) 评论(0)
Caffe 深度学习框架上手教程

浏览(10,665) 评论(0)
ReactiveCocoa入门教程：第一部分

浏览(11,495) 评论(0)
开源HIDS-OSSEC使用实例:监测CC攻击

浏览(11,411) 评论(0)
Decorators in ES7

浏览(15,950) 评论(4)
用Electron（Atom编辑器的兄弟项目）开发桌面应用

浏览(28,964) 评论(0)
Windows下JetBrains CLion中文输出乱码的解决方法

浏览(12,421) 评论(1)
同步-@synchronized, NSLock, pthread, OSSpinLock性能比较

浏览(11,368) 评论(0)
Seaweedfs之Volume读请求重定向

浏览(25,668) 评论(3)
HTML、CSS及JavaScript ：有Promise，不会搞大肚子

浏览(13,506) 评论(0)

相关文章

阿里云首购8折

Loading...

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

[HBLOG]公众号

HBLOG

HBLOG