站長資訊網(wǎng)
在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>
使用
//定義一個選擇框 <input type="checkbox" name="test"> //給選擇框應(yīng)用樣式 <script type="text/javascript"> $("[name='test']").bootstrapSwitch(); </script>
屬性
常用的屬性：
-
size ：開關(guān)大小?？蛇x值有 mini, small, normal, large
-
onColor：開關(guān)中開按鈕的顏色?？蛇x值有 primary, info, success, warning, danger, default
-
offColor：開關(guān)中關(guān)按鈕的顏色?？蛇x值 primary, info, success, warning, danger, default
-
onText：開關(guān)中開按鈕的文本，默認(rèn)是 ON
-
offText：開關(guān)中關(guān)按鈕的文本，默認(rèn)是 OFF
-
onInit：初始化組件的事件。
-
onSwitchChange：開關(guān)變化時的事件。
-
data-on-color/ data-off-color: primary 深藍(lán), info 淺藍(lán), success 綠色, warning 黃色, danger 紅色
詳細(xì)介紹：
推薦學(xué)習(xí)：《bootstrap使用教程》
