Convierte las casillas de bootstrap en conmutadores de palanca-TiTatoggle

Vista prévia

Descripción

TiTatoggle es una extensión de CSS para el marco de trabajo de bootstrap que convierte las entradas de casilla de verificación regulares en diferentes tipos de conmutadores de alternancia.

Soporta bootstrap 4 y bootstrap 3.

Supported types:

• Botón de alternancia (predeterminado)
• Ios
• Material

See also:

• mejor casilla de verificación y bibliotecas de reemplazo de entrada de radio
• mejor conmutador de alternancia JavaScript y bibliotecas CSS
• 10 mejores plugins de cambio de palanca de jQuery

Funcionamiento

Incluya la hoja de estilo titatoggle-Dist. CSS después del CSS de bootstrap.

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

Agregue las siguientes clases CSS a los elementos de la casilla de verificación y listo.

• CheckBox-deslizador – por defecto: Tema predeterminado
• CheckBox-deslizador – redondeado: Con el texto ON/OFF
• CheckBox-deslizador – redondeado: Bordes redondeados
• checkbox-slider–b: Ios theme
• checkbox-slider–b-flat: Flat Ios theme
• CheckBox-deslizador – c: Material diseño tema
• CheckBox-deslizador – c-peso: El tema Slim material

<div class="form-check checkbox-slider--default">

<label>


<input type="checkbox">


<span>Default Theme</span>

</label>
</div>

<div class="form-check checkbox-slider--a-rounded">

<label>


<input type="checkbox">


<span>Rounded Corner</span>

</label>
</div>

<div class="form-check checkbox-slider--a">

<label>


<input type="checkbox">


<span>With On/Off Text</span>

</label>
</div>

<div class="form-check checkbox-slider--b">

<label>


<input type="checkbox">


<span>Ios Style</span>

</label>
</div>

<div class="form-check checkbox-slider--b-flat">

<label>


<input type="checkbox">


<span>Ios + Flat Style</span>

</label>
</div>

<div class="form-check checkbox-slider--c">

<label>


<input type="checkbox">


<span>Material Design Style</span>

</label>
</div>

<div class="form-check checkbox-slider--c-weight">

<label>


<input type="checkbox">


<span>Slim Material Design Style</span>

</label>
</div>

Cambie el tamaño del switches.

• casilla de verificación-Slider-SM: Pequeño
• CheckBox-deslizador-MD: Medio
• casilla de verificación-Slider-LG: Grande

<div class="form-check checkbox-slider--default checkbox-slider-sm">

<label>


<input type="checkbox">


<span>Default Theme</span>

</label>
</div>

<div class="form-check checkbox-slider--default checkbox-slider-md">

<label>


<input type="checkbox">


<span>Default Theme</span>

</label>
</div>

<div class="form-check checkbox-slider--default checkbox-slider-lg">

<label>


<input type="checkbox">


<span>Default Theme</span>

</label>
</div>