基于Bootstrap3的纯CSS滑动开关按钮组件 A Pure css toggle buttons based on the bootstrap checkbox pattern

Intro

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.

Bootstrap 3

The Bootstrap 3 default way of generating checkbox looks a like this:

<div class="checkbox">
	<label>
		<input type="checkbox">default Bootstrap 3
	</label>
</div>

Ti-Ta-Toggle awesomenes

Just by adding one <span> plus the class .checkbox-slider--TYPE you get this result:

<div class="checkbox checkbox-slider--default">
	<label>
		<input type="checkbox"><span>TiTaToggle</span>
	</label>
</div>

Slider default checkbox-slider--default

Out of the box this would be the modest version, without any bells and whistles.

<div class="... checkbox-slider--default">
	...
</div>

Slider Default rounded checkbox-slider--a-rounded

It takes the edge off.

<div class="... checkbox-slider--a-rounded">
	...
</div>

Slider A checkbox-slider--a

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.

<div class="... checkbox-slider--a">
	...
</div>

Slider B checkbox-slider--b

An iOS like version of just a plain checkbox.

<div class="... checkbox-slider--b">
	...
</div>

Slider B Flat checkbox-slider--b-flat

Just flat, it seems to be very fashionable. We just wait until the bevel is back.

<div class="... checkbox-slider--b-flat">
	...
</div>

Slider C checkbox-slider--c

Inspired by the Google material toggle boxes. And again this is just plain Bootstrap 3.

<div class="... checkbox-slider--c">
	...
</div>

Slider C Weight checkbox-slider--c-weight

Giving the slider some more weight.

<div class="... checkbox-slider--c-weight">
	...
</div>

Sizes

Propper sizing option should get the pony over the hill for your next project.

Next to the default size there are 3 sizes:

• checkbox-slider-sm
• checkbox-slider-md
• checkbox-slider-lg

<div class="... checkbox-slider-sm ...">
	...
</div>

<div class="... <DEFAULT> ...">
	...
</div>

<div class="... checkbox-slider-md ...">
	...
</div>

<div class="... checkbox-slider-lg ...">
	...
</div>

Indicator

Small visual que for the label to show that the checkbox is checked.

<div class="checkbox ...">
...
	<span class="indicator-success">danger</span>
...
</div>

<div class="checkbox ...">
...
	<span class="indicator-info">danger</span>
...
</div>

<div class="checkbox ...">
...
	<span class="indicator-warning">danger</span>
...
</div>

<div class="checkbox ...">
...
	<span class="indicator-danger">danger</span>
...
</div>

Variations

Checkboxes can have different colors, just like buttons.

We use the default Bootstrap variables @brand-XXX to color the checkbox.

<div class="checkbox ... checkbox-slider-info">
<div class="checkbox ... checkbox-slider-danger">
<div class="checkbox ... checkbox-slider-warning">

Howto

Okay and now what?

You have a few options to include this into your project.

Bower

$ bower install titatoggle

Less

Inside the project you will find _titatoggle.less Include this file into your own project, and stuff just works. If needed, you can fiddle around with some less variables.

CSS

There is alway the option to include only the titatoggle-dist.css. Keep in mind this thing is build on top off Bootstrap 3.

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