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

Idea PhpStorm - How to fix bugs with incorrect code Inspections and Autocomplete

Image
Sometimes IDE starts to show something unpredictable and strange behavior.  For example, PhpStorm says that class is not exist in your project. Or you set up incorrect namespace. Cause all of these things is broken indexes and IDE cache. To fix this problem easy:  Go to Main Menu -> Invalidate Caches Choose Clear file system cache and Local History. Check VCS log caches and indexes. Invalidate and Restart . After that your IDE restarts and relaunch with new indexes. All have to work correctly.
Читать далее

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

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

PHP - How to show expected return array elements

When your function or method returns an associative array, it's beneficial to document the expected structure of that array using PHPDoc type annotations. This practice not only serves as documentation for developers using your code but also enables features like auto-completion in integrated development environments (IDEs). For example: /** * Creates a user. * * @return array{"name": string, "age": int, "married": bool} */ function createUser(): array { return ['name' => 'Nayf', 'age' => 38, 'married' => true]; } In this PHPDoc block, the @return annotation is used to specify that the function returns an associative array with three elements: "name" of type string, "age" of type int, and "married" of type bool. This information provides clarity on the expected structure of the returned array. The PHPDoc type system supports various basic PHP types such as string, bool, in
Читать далее