在bootstrap中，switch用于給選擇框設(shè)置類似于開關(guān)的樣式，是實(shí)現(xiàn)復(fù)選框美化開關(guān)的bootstrap插件，調(diào)用語法為“$(選擇框元素).bootstrapSwitch();”。

本教程操作環(huán)境：Windows7系統(tǒng)、bootstrap3.3.7版、DELL G3電腦

bootstrap中switch的用法是什么

Bootstrap Switch是一款通過復(fù)選框美化實(shí)現(xiàn)的一款開關(guān)控件，可以給選擇框設(shè)置類似于開關(guān)的樣式，它是依賴于Bootstrap的一款插件。

下載

官網(wǎng)地址 : https://www.bootcdn.cn/bootstrap-switch/

GitHub下載地址 : https://github.com/Bttstrp/bootstrap-switch

導(dǎo)入

<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>

使用

//定義一個(gè)選擇框 <input type="checkbox" name="test"> //給選擇框應(yīng)用樣式 <script type="text/javascript"> $("[name='test']").bootstrapSwitch(); </script>

屬性

常用的屬性：

• size ：開關(guān)大小。可選值有 mini, small, normal, large

• onColor：開關(guān)中開按鈕的顏色。可選值有 primary, info, success, warning, danger, default

• offColor：開關(guān)中關(guān)按鈕的顏色。可選值 primary, info, success, warning, danger, default

• onText：開關(guān)中開按鈕的文本，默認(rèn)是 ON

• offText：開關(guān)中關(guān)按鈕的文本，默認(rèn)是 OFF

• onInit：初始化組件的事件。

• onSwitchChange：開關(guān)變化時(shí)的事件。

• data-on-color/ data-off-color: primary 深藍(lán), info 淺藍(lán), success 綠色, warning 黃色, danger 紅色

詳細(xì)介紹：

推薦學(xué)習(xí)：《bootstrap使用教程》