简介

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="..."

@H_55_4@mini 迷你
small 小号
Normal 正常
Large 大号

按钮颜色

data-on-color="..."

data-off-color="..."

priMary 深蓝
info　　浅蓝
success 绿色
warning 黄色
danger 红色

按钮文字

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

data-off-text="..."

按钮宽度

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

label宽度

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

只可读

readonly=""

禁用

disabled=""

更多

大佬总结

以上是大佬教程为你收集整理的bootstrap switch简单使用全部内容，希望文章能够帮你解决bootstrap switch简单使用所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：bootstrap switch 使用简单

上一篇: 关于Bootstrap 下一篇:Vue——初级小项目（小清单）

猜你在找的Bootstrap相关文章