Bootstrap Switch / Дизайн / Плагины Bootstrap

Версия: v3.4

Каталог: Плагины Bootstrap

Категория: Дизайн

Для Bootstrap: 3, 4

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop, Shopify

Язык: Английский

Вес файла: 206.4 Kb

Уникальный ID: 56

Посмотрели: 2633 раз

Скачать бесплатно

Помощь: установка & настройка

Скачали бесплатно: 60 раз

Прокомментировали: 0 раз

Рейтинг: 5.0 / 5 - 2 голосов

Тип лицензии: CC BY 4.0

Авторство: https://github.com/Bttstrp/bootstrap-switch

Информация: Пользователям

Информация: Правообладателям

Теги: bootstrap 3, бутстрап 3, Radio, плагин, редактор, CheckBox, чекбоксы, Plugin

Поделился: aTmpl

Добавлено: 2015-11-26 в 18:14

Метка: 1613302670

⇄ ⇅

.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary {
 color: #fff;
 background: var(--primary);
}

.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info {
 background: var(--info);
 color: #fff;
}

.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success {
 background: var(--success);
 color: #fff;
}

.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning {
 background: var(--warning);
 color: #fff;
}

.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger {
 background: var(--danger);
 color: #fff;
}

.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-secondary,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-secondary {
 background: var(--secondary);
 color: #fff;
}
</style>

<div class="container">
 <div class="row">
 <div class="col">
 <div class="jumbotron my-4">
 <h1>Bootstrap switch (by Emanuele LostCrew) for Bootstrap 4 Advanced Components</h1>
 <p class="lead">by djibe.</p>
 <blockquote class="blockquote">
 <p>
 Turn checkboxes and radio buttons into toggle switches, now with Bootstrap 4.3.1 compatibility.
 </p>
 </blockquote>

<h2>Setup</h2>
 <ol>
 <li>Add the CSS and JS from <a href="https://github.com/djibe/bootstrap-switch" target="_blank">my Bootstrap Switch fork</a> to your HTML header. Choose the Bootstrap 4 version.</li>
 <li>Add tag : <code>data-toggle="switch"</code> to the desired input (type=checkbox or radio).<br>
 <code>&lt;input type="checkbox" name="my-checkbox" checked></code></li>
 <li>Add my custom CSS for universal bootstrap theming.</li>
 <li>Then initialize the plugin in your js code with <code>$('[data-toggle="switch"]').bootstrapSwitch();</code></li>
 <li>More options : state, size, animate, disabled, readonly, indeterminate, inverse, onColor, offColor, onText, offText, labelText, handleWith, labelWidth, baseClass, wrapperClass, ...</li>
 <li>Read full documentation in the Github folder</li>
 </ol>
 <h2>Demo</h2>
 <p>Simplest example</p>
 <p>
 <code>&lt;input type="checkbox" data-toggle="switch"></code>
 </p>
 <input type="checkbox" data-toggle="switch">

<hr>
 <p class="mt-3">
 Checked by default, secondary color when toggled, grey when idle.
 </p>
 <p>
 <code>&lt;input type="checkbox" data-toggle="switch" checked data-inverse="true" data-on-color="secondary" data-off-color="default"></code>
 </p>
 <input type="checkbox" data-toggle="switch" checked data-inverse="true" data-on-color="secondary" data-off-color="default">

<hr>
 <p class="mt-3">
 Toggle with custom text
 </p>
 <p>
 <code>&lt;input type="checkbox" data-toggle="switch" data-on-color="secondary" data-on-text="OUI" data-off-color="default" data-off-text="NON"></code>
 </p>
 <input type="checkbox" data-toggle="switch" data-on-color="secondary" data-on-text="OUI" data-off-color="default" data-off-text="NON">

<hr>
 <p class="mt-3">
 Disabled (left) or readonly (right)
 </p>
 <p>
 <code>&lt;input type="checkbox" data-toggle="switch" disabled></code>
 </p>
 <input type="checkbox" data-toggle="switch" disabled>
 <input type="checkbox" data-toggle="switch" checked data-on-color="secondary" readonly>

<hr>
 <p class="mt-3">
 Sizing
 </p>
 <p>
 <p>
 <code>&lt;input type="checkbox" data-toggle="switch" data-size="mini"></code>
 </p> (mini) <input type="checkbox" data-toggle="switch" data-size="mini"> (small) <input type="checkbox" data-toggle="switch" data-size="small"> (normal, by default)
 <input type="checkbox" data-toggle="switch"> (large) <input type="checkbox" data-toggle="switch" data-size="large">
 </p>

<hr>
 <p class="mt-3">
 Handle width 100px or 10px
 </p>
 <p>
 <code>&lt;input type="checkbox" data-toggle="switch" data-handle-width="100"></code>
 </p>
 <input type="checkbox" data-toggle="switch" data-handle-width="100">
 <input type="checkbox" data-toggle="switch" data-handle-width="10" checked>

<hr>
 <p class="mt-3">
 Radio buttons
 </p>
 <p>
 <code>&lt;input type="radio" name="radio" data-toggle="switch" data-on-text="Man"></code>
 </p>
 <input type="radio" name="radio" data-toggle="switch" data-on-text="Man">
 <input type="radio" name="radio" data-toggle="switch" data-on-text="Woman">
 </div>
 </div>
 </div>

BootstrapTema

Bootstrap Switch

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0