Bootstrap - How to make toggle buttons

 At least, you need to have Bootstrap 5 or higher version.

The code below will insert Default toggle button. Actually, it is checkbox.

<input type="checkbox" class="btn-check" id="default" autocomplete="off">
<label class="btn btn-outline-success" for="default">Default</label>

And also you can change the color of button by label class.

It has checkbox behavior. It means, when it is checked, the toggle button switches own state.

So, you can just change checkbox status by 'checked' attribute as usual, and toggle button show this as well.

Comments

Post a Comment

Popular posts from this blog

CSS Как прикрепить слой (div) к краю

Сегодня столкнулся с такой проблемой: нужно было прикрепить рисунок справа, что бы он там висел постоянно, независимо от изменения окна по ширине. Я знал, что есть такое свойство в CSS как absolute в параметре position. То есть: style="position: absolute;" что указывает слою, что он будет на постоянном месте, относительно родительского элемента. Но изначально я пошел неверным путем... мне надо было прикрепить к правому краю, и я стал это делать через атрибут left. Так как фиксированное значение мне не подходит (откуда мне знать какого размера будет окно), я начал вычислять в процентах. В итоге получилось так, что при изменении ширины окна, часть слоя так же пряталась за краями окна. И тут ко мне пришла гениальная мысль: надо отсчитывать от правого края! То есть надо взять нулевое значение от правого края, и автоматически слой будет прикреплен к правому краю! Бинго! Итого мой код выглядел так: style="position: absolute; right: 0px;" или можно так:
Читать далее

MySQL - How to add JSON column type

 I use Doctrine ORM with Symfony framework.  Doctrine entities have the capability to handle JSON type columns, automatically converting data from an array to JSON and vice versa. This means they can effortlessly perform the conversion of data from an array format to JSON and vice versa, offering a convenient and dynamic approach. This proves exceptionally useful in scenarios such as storing and managing various settings within the database. Hence, to create a new column in a table with a JSON type, use the following syntax: settings LONGTEXT DEFAULT NULL COMMENT '(DC2Type:json)' This concise yet powerful declaration ensures that the column is set up to handle JSON data effectively. For adding a new column to an existing 'tblcontacts' table, execute the following SQL query: ALTER TABLE tblcontacts ADD COLUMN settings LONGTEXT DEFAULT NULL COMMENT '(DC2Type:json)'; The critical aspect here is the "COMMENT '(DC2Type:json)'". This specific c
Читать далее

Как сделать заголовок модуля активной ссылкой в Joomla 1.5

Когда-то я задался целью сделать название модуля кликабельным (аналог кнопки далее), что бы при клике мы переходили на саму статью (ну или куда там нам нужно перейти). В те времена помню прошерстил весь интернет, но так и не нашел ответа. Спустя некоторое время сейчас я уже могу это сделать сам и решил поделиться этим способом с вами. Признаюсь честно, так как делал я сам, то все выглядит довольно некрасиво в коде. Но главное результат, а он есть. Итак. Во-первых самое главное, это узнать, нет ли в вашем шаблоне генератора текста содержимого модуля. Если есть (например в шаблонах You Studio), тогда нам нужен файл по адресу: /templates/'ваш_шаблон'/html/modules.php Если ничего подобного в вашем шаблоне нет, тогда функцию вывода модуля на сайте берет на себя сама Joomla, а именно файл: /templates/system/html/modules.php Итак, в этом файле и находится вывод нашего модуля. Нам нужны строки следующие: echo $module->title; это и есть вывод нашего заголовка модуля.
Читать далее