bootstrap switch简单使用

发布时间：2020-12-17 20:51:13 所属栏目：安全来源：网络整理

导读：https://www.cnblogs.com/fu-yong/p/8794457.html ?http://www.bootcss.com/p/bootstrap-switch/ 简介 Bootstrap Switch是一款轻量级插件，可以给选择框设置类似于开关的样式它是依赖于Bootstrap的一款插件下载下载地址在线引用导入因为它是依赖于Boot

https://www.cnblogs.com/fu-yong/p/8794457.html

?http://www.bootcss.com/p/bootstrap-switch/

简介

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

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

更多

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!