bootstrap中switch怎么使用

本篇內容介紹了“bootstrap中switch怎么使用”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

在bootstrap中，switch用于給選擇框設置類似于開關的樣式，是實現復選框美化開關的bootstrap插件，調用語法為“$(選擇框元素).bootstrapSwitch();”。

本教程操作環境：Windows7系統、bootstrap3.3.7版、DELL G3電腦

bootstrap中switch的用法是什么

Bootstrap Switch是一款通過復選框美化實現的一款開關控件，可以給選擇框設置類似于開關的樣式，它是依賴于Bootstrap的一款插件。

下載

官網地址 : https://www.bootcdn.cn/bootstrap-switch/

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

導入

<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">
//給選擇框應用樣式
<script type="text/javascript">
$("[name='test']").bootstrapSwitch();
</script>

屬性

常用的屬性：

• size ：開關大小。可選值有 mini, small, normal, large

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

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

• onText：開關中開按鈕的文本，默認是 ON

• offText：開關中關按鈕的文本，默認是 OFF

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

• onSwitchChange：開關變化時的事件。

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

詳細介紹：

“bootstrap中switch怎么使用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！