Home  >  Article  >  Web Front-end  >  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

WBOY
WBOYOriginal
2016-06-24 11:38:382343browse

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.

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn