簡介

Bootstrap Switch是一款輕量級插件，可以給選擇框設置類似於開關的樣式

它是依賴於Bootstrap的一款插件

下載

下載地址

在線引用

導入

因為它是依賴於Bootstrap的一款插件，所以，在引入之前要先引入Bootstrap樣式

<link rel="stylesheet" type="text/css" href="/static/plugin/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/plugin/switch/bootstrap-switch.min.css">
<script src="/static/plugin/bootstrap/js/bootstrap.min.js"></script>        
<script src="/static/plugin/switch/bootstrap-switch.min.js"></script>

使用

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

屬性

除了默認的樣式，還可以通過給input框設置屬性的方式給它自定義一些樣式

按鈕大小

data-size="..."

1. Mini 迷你

2. Small 小號

3. Normal 正常

4. Large 大號

按鈕顏色

data-on-color="..."

data-off-color="..."

1. primary 深藍
2. info　　 淺藍
3. success 綠色
4. warning 黃色
5. danger 紅色

按鈕文字

data-on-text="..."(str類型)

data-off-text="..."

按鈕寬度

data-handle-width=".."(int類型)

label寬度

data-label-width="..."(int類型)

只可讀

readonly=""

禁用

disabled=""

更多

前端插件之Bootstrap Switch 選擇框開關控制