Titatoggle--A BOOTSTRAP3-based, pure CSS sliding switch button assembly

What the hell is a titatoggle?

Titatoggle is actually a BOOTSTRAP3-based, pure CSS sliding switch button assembly.

Unlike other button components, the Titatoggle Slide button component does not use JavaScript, and in this component its HTML structure is basically the same as the native Bootstrap checkbox component structure, easy to use, A variety of theme styles are available: iOS style and material style. Let's take a look at how Titatoggle is installed and used.

1. Installation

Titatoggle so easy to use, how to install it? In fact it can be installed by bower:

$ Bower Install Titatoggle

2. How to use

Titatoggle How to use it specifically? Since it is a sliding switch component based on the BOOTSTRAP3, in use, in addition to the introduction of bootstrap related files, you also need to introduce TITATOGGLE-DIST.CSS files.

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

3. Titatoggle HTML structure

Because the HTML structure of the TITATOGGL slide switch component and the native Bootstrap checkbox component structure are basically the same, the HTML structure of the Titatoggle is simply added on the native HTML structure. Checkbox-slider--type class, and add a <span> element to the back of the <input>. Specific as follows:

Native Bootstrap checkbox component structure:

<div class= "checkbox" >

<label>

<input type= "checkbox" >default Bootstrap 3

</label>

</div>

HTML structure of the Titatoggle:

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

<label>

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

</label>

</div>

4, Titatoggle specific application

For the specific application of the Titatoggle component, we can learn from the following picture:

5. Browser compatible

The following browsers are compatible with the Titatoggle component, which can be opened by the following flow-through units:

Internet Explorer 9

FireFox

Safari

Chrome

Safari Ios

Stock Android Browser 4.2

Chrome Android

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

Titatoggle--A BOOTSTRAP3-based, pure CSS sliding switch button assembly