What is the usage of switch in bootstrap?

WBOY
Release: 2021-12-29 16:07:13
Original
2677 people have browsed it

In bootstrap, switch is used to set a switch-like style for the selection box. It is a bootstrap plug-in that implements the beautification switch of the check box. The calling syntax is "$(selection box element).bootstrapSwitch();" .

What is the usage of switch in bootstrap?

The operating environment of this tutorial: Windows 7 system, bootstrap version 3.3.7, DELL G3 computer

switch in bootstrap What is the usage?

Bootstrap Switch is a switch control implemented through check box beautification. It can set a switch-like style for the selection box. It is a component that relies on Bootstrap. plug-in.

Download

Official website address: https://www.bootcdn.cn/bootstrap-switch/

GitHub download address: https:// github.com/Bttstrp/bootstrap-switch

Import

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-switch.min.css">
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>       
<script src="js/bootstrap-switch.min.js"></script>
Copy after login

Use

//定义一个选择框
<input type="checkbox" name="test">
//给选择框应用样式
<script type="text/javascript">
$("[name=&#39;test&#39;]").bootstrapSwitch();
</script>
Copy after login

Properties

Commonly used attributes:

  • size: switch size. Optional values ​​are mini, small, normal, large

  • onColor: the color of the on button in the switch. Optional values ​​are primary, info, success, warning, danger, default

  • offColor: the color of the off button in the switch. Optional values ​​primary, info, success, warning, danger, default

  • onText: The text of the open button in the switch, the default is ON

  • offText: The text of the switch button, the default is OFF

  • onInit: The event that initializes the component.

  • onSwitchChange: Event when the switch changes.

  • data-on-color/ data-off-color: primary dark blue, info light blue, success green, warning yellow, danger red

Detailed introduction:

What is the usage of switch in bootstrap?

Recommended study: "bootstrap usage tutorial"

The above is the detailed content of What is the usage of switch in bootstrap?. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template