The only difference between default Bootstrap is the additional span. After that it's only a question of adding a class that fits your needs.
The Bootstrap 3default way of generating checkbox looks a like this:
<divclass="checkbox"><label><inputtype="checkbox">default Bootstrap 3</label></div>Just by adding one <span>plus the class .checkbox-slider--TYPEyou get this result:
<divclass="checkbox checkbox-slider--default"><label><inputtype="checkbox"><span>TiTaToggle</span></label></div>Don't forget to add the spanafter the input
Out of the box this would be the modest version, without any bells and whistles.
<divclass="... checkbox-slider--default"> ...</div>It takes the edge off.
<divclass="... checkbox-slider--a-rounded"> ...</div>Sometimes you need some text to double the meaning / state of the checkbox. I've noticed many people have trouble with a checkbox, when it's "On" of "Off". To make this more clear, you can use this version.
<divclass="... checkbox-slider--a"> ...</div>An iOS like version of just a plain checkbox.
<divclass="... checkbox-slider--b"> ...</div>Just flat, it seems to be very fashionable. We just wait until the bevel is back.
<divclass="... checkbox-slider--b-flat"> ...</div>Inspired by the Google material toggle boxes. And again this is just plain Bootstrap 3.
<divclass="... checkbox-slider--c"> ...</div>Giving the slider some more weight.
<divclass="... checkbox-slider--c-weight"> ...</div>Propper sizing option should get the pony over the hill for your next project.
Next to the default size there are 3 sizes:
_titatoggle.less to alther your preferend settings and sizes.<divclass="... checkbox-slider-sm ..."> ...</div><divclass="... <DEFAULT> ..."> ...</div><divclass="... checkbox-slider-md ..."> ...</div><divclass="... checkbox-slider-lg ..."> ...</div>Small visual que for the label to show that the checkbox is checked.
<divclass="checkbox ...">...<spanclass="indicator-success">danger</span>...</div><divclass="checkbox ...">...<spanclass="indicator-info">danger</span>...</div><divclass="checkbox ...">...<spanclass="indicator-warning">danger</span>...</div><divclass="checkbox ...">...<spanclass="indicator-danger">danger</span>...</div>Checkboxes can have different colors, just like buttons.
We use the default Bootstrap variables @brand-XXXto color the checkbox.
<divclass="checkbox ... checkbox-slider-info"><divclass="checkbox ... checkbox-slider-danger"><divclass="checkbox ... checkbox-slider-warning">Okay and now what?
You have a few options to include this into your project.
$ bower install titatoggle
Inside the project you will find _titatoggle.lessInclude this file into your own project, and stuff just works. If needed, you can fiddle around with some less variables.
There is alway the option to include only the titatoggle-dist.css. Keep in mind this thing is build on top off Bootstrap 3.
<linkhref="css/titatoggle-dist.css"rel="stylesheet">