TiTatoggle is a pure CSS sliding switch button component based on Bootstrap3_html/css_WEB-ITnose

What the hell is TiTatoggle?

TiTatoggle is actually a pure CSS sliding switch button component based on Bootstrap3.

Unlike other button components, the TiTatoggle sliding button component does not use Javascript. In this component, its HTML structure is basically the same as the native Bootstrap checkbox component structure, which is convenient and easy to use, and provides a variety of theme styles. : IOS style and Material style, etc. Let's take a look at how to install and use TiTatoggle.

1. Installation

TiTatoggle is so convenient and easy to use, so how do you install it? In fact, it can be installed through Bower:

$ bower install titatoggle

2. How to use

How to use TiTatoggle specifically? Since it is a sliding switch component based on Bootstrap3, in use, in addition to introducing Bootstrap related files, you also need to introduce the titatoggle-dist.css file.

3. TiTatoggle’s HTML structure

Since the HTML structure of the TiTatoggl sliding switch component is basically the same as the structure of the native Bootstrap checkbox component, the HTML structure of TiTatoggle only needs to add .checkbox-slider--TYPE class to the native HTML structure, and add an < after ;span> element is enough. The details are as follows:

Native Bootstrap checkbox component structure:

HTML structure of TiTatoggle:

4. Specific applications of TiTatoggle

We can know the specific application of TiTatoggle component through the following picture:

5. Browser compatibility

The following browsers are Compatible with the TiTatoggle component. When using this component, you can open it through the following traffic devices:

Internet Explorer 9

FireFox

Safari

Chrome

Safari Ios

Stock Android browser 4.2

Chrome Android

The above is the CSS sliding switch button component TiTatoggle based on Bootstrap3 The specific installation method and usage method, if you like it, just install it and use it quickly.