Home >Web Front-end >HTML Tutorial >TiTatoggle is a pure CSS sliding switch button component based on Bootstrap3_html/css_WEB-ITnose
TiTatoggle is a pure CSS sliding switch button component based on Bootstrap3_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:38:382356browse
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:
default Bootstrap 3
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.