bootstrap-switch使用，small、mini設置

1.首先需要引用https://www.bootcss.com/p/bootstrap-switch/。

bootstrap-switch插件庫

2.先引用jquery文件，在引用bootstrap.css樣式 、bootstrap-switch.css樣式  、bootstrap-switch.js樣式

3.代碼編碼單選控件

   <input name="status" data-size="mini" type="checkbox"  checked>

  

 window.onload=function(){
   $('[name="status"]').bootstrapSwitch("size","small");//基本初始化
 }

//手動設置按鈕狀態

$('[name="status"]').bootstrapSwitch('state',false);

//點擊按鈕切換 switch
$('[name="Btn"]').click(function(){
$('[name="status"]').bootstrapSwitch('toggleState');
});

//點擊觸發事件，監聽按鈕狀態
$('[name="status"]').on('switchChange.bootstrapSwitch',function(event,state){

//內置對象、內置屬性
console.log(event);

//獲取狀態
console.log(state); 
}); 

 

 

 

屬性名稱

 

 

問題 發現直接在html使用 

data-size="mini"或js中使用

 

 設置單選框大小，都是無效的。

后來使用js  

 $('[name="status"]').bootstrapSwitch("size","small");
這種方式設置達成效果。
具體原因還未知，先記錄遺留一下吧