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

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文件。

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

3、TiTatoggle的HTML结构

由于TiTatoggl滑动开关组件的HTML结构和原生Bootstrap checkbox组件结构基本相同,所以TiTatoggle的HTML结构只需在原生HTML结构上添加.checkbox-slider--TYPE class,以及在<input>后面添加一个<span>元素即可。具体如下:

原生Bootstrap checkbox组件结构:

<div class="checkbox">

<label>

<input type="checkbox">default Bootstrap 3

</label>

</div>

TiTatoggle的HTML结构:

<div class="checkbox checkbox-slider--default">

<label>

<input type="checkbox"><span>TiTaToggle</span>

</label>

</div>

4、TiTatoggle具体应用

TiTatoggle 组件的具体应用,我们可以通过下面这张图片得知:

5、浏览器兼容

以下浏览器都兼容TiTatoggle 组件,大家在使用这个组件时候可以通过下面这几个流量器打开:

Internet Explorer 9

FireFox

Safari

Chrome

Safari Ios

Stock Android browser 4.2

Chrome Android

以上就是基于Bootstrap3的CSS滑动开关按钮组件TiTatoggle的具体安装方法和使用方法,如果你喜欢的话,就赶紧安装使用吧。

时间: 2024-10-09 00:07:22

TiTatoggle -- 一个基于Bootstrap3的纯CSS滑动开关按钮组件的相关文章

使用IDEA结合MAVEN创建一个基于SpringMVC为前端JdbcTemplate为数据库组件的Java Web项目

前言 如今的Java项目,如果还使用传统的把jar包复制到目录下这种原始的方式,对于依赖管理来说实在是灾难.对某个功能需要引入某种技术包,但是你不确定是否已存在,如果分类好的话还好找,若是杂在一堆不仅头大,还身心俱疲.Maven旨在解决依赖问题,让项目结构变得精简,而Spring解决了项目中Bean的管理以及各种配置文件配置的功能轻松读入等问题,对于Java项目来说确实是福音.对于一个Web项目来说,必然需要数据库的读写,JdbcTemplate是一个Spring实现的Jdbc Support.

分享一个基于Bootstrap的 ACE框架 入门(MVC+EF)

基于Bootstrap3,拥有强大的功能组件以及UI组件,基本能满足后台管理系统的需求, 而且能根据不同设备适配显示,而且还有四个主题可以切换. 简单入门,源代码下载:https://github.com/huangxiaoning/ACE.Demo

一个常见下拉菜单的样式:一体化小三角(纯css手写解决)

类似下拉菜单2个一体化小三角,习惯上用字体图标加jQuery处理,比较方便,但是下面纯css手写解决方式,效果也还不错,对CSS知识也是一个比较好的孔固. 小三角用了2种不同处理方式:1.利用border属性:2.利用正方形选择45度. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>下拉菜单</title> <style> *{

一个标签的72变,打造一个纯CSS图标库

每次要用到图标的时候都会到 icono 去copypaste,但每次用到的时候尺寸都各不一样,总是要调整参数,巨烦.当然你可以会想到用zoom.scale来做缩放,但是这样的缩放会使得线宽也变粗了,不甚满意. 终于下定心思来改造一个可缩放的图标库.github先上:https://github.com/qieguo2016/iconoo,目前提供下载link标签引入和npm+webpack的引入方式,详见项目的readme.(喂,求star!) 关于改造,一开始的想法就是使用百分比尺寸来改造,然

分享一个纯css制作的动画化,在网页(手机)加载等的时候可以引用!

CSS代码如下: /* Custom Stylesheet */ body, html { margin: 0; -webkit-font-smoothing: antialiased; background: #68ABAD; text-align: center; } /* DEMO 1 */ .loader1 { margin: 0 auto; height: 20px; width: 20px; position:relative; -webkit-animation:spin 1.5s

前端每日实战:2.纯 CSS 创作一个矩形旋转 loader 特效

原文地址:2.纯 CSS 创作一个矩形旋转 loader 特效 扩展后地址:https://scrimba.com/c/cNJVWUR  扩展地址:https://codepen.io/pen/ HTML代码: <div class="loader"> <span></span> <span></span> <span></span> </div> CSS代码: /* 居中显示 */ htm

前端每日实战3.纯 CSS 创作一个容器厚条纹边框特效

原文地址:3.纯 CSS 创作一个容器厚条纹边框特效 没有啥好点子呀,不爽 HTML代码: <div class="box"> <div class="content"> <h2>What is Lorem Ipsum?</h2> <p>Mauris volutpat risus quis nisi tempus hendrerit. Nullam nisi urna, suscipit quis risu

纯css写一个带动画的弹框 visibility + opcity

css能实现各种各样的动态效果,比js实现简单,性能也比js实现高,现在我们就用纯css实现弹窗,主要用到了两个属性 opcity 和 visibility, opctiy 这个属性很简单 控制元素透明度 ,visibility控制元素的显示和隐藏,他和display有一个很重要的区别,visibility可以用transition来进行过渡,而display并不可以,这就是我们不用display的原因 可以配合上transform: scale() 让弹窗更有动态感觉 全部代码: <!DOCT

如何使用纯 CSS 制作四子连珠游戏

序言:你有没有想过单纯使用 CSS 也可以制作一款游戏?甚至可以双人对决?这是一篇非常有趣的文章,作者详细讲解了使用纯 CSS 制作四子连珠游戏的思路以及使用奇淫巧技解决困难问题的方法.因为案例本身比较复杂,而本人水平有限,翻译必有不恰当之处,望指正. 原文:How the Roman Empire Made Pure CSS Connect 4 Possible 翻译:nzbin 实验是学习新技巧.思考新想法.并突破自身极限的有趣的方式."纯 CSS"演示很早就有了,但是随着浏览器和